HTML언어 쉽게 따라하기- 위치조정하는 태그
HTML언어 쉽게 따라하기 - 위치 조정하는 태그
HTML언어로 홈페이지를 꾸미다 보면 자주 나오는 것이 바로 위치 조정 태그이다. 왼쪽에 배치를 할것인지, 중앙에 배치를 할것인지 등을 결정하는 것인데, 이것 또한 간단하게 위치 조정 태그를 넣는 것으로 조절할 수 있다.
|
위치 조절 태그 |
아래 링크를 클릭해서 참고하시길 바라며,
http://redsecret.tistory.com/86
그럼 이번엔 이 글을 중앙 정렬하는 방법을 배워보자.
[문제]
엄마가 섬그늘에 굴 따러 가면
아기는 혼자남아 집을 보다가
바다가 불러주는 자장 노래에
팔베고 스르르르 잠이 듭니다.
--------------------------------------------------------------------
일단 메모장을 열어 HTML언어로 작성을 하면 다음과 같다.
<html>
<head>
<title> 섬그늘 </title>
</head>
<body>
엄마가 섬그늘에 굴 따라 가면<br>
아기는 혼자남아 집을 보다가<br>
바다가 불러주는 자장 노래에<br>
팔베고 스르르르 잠이 듭니다.<br>
</body>
</html>
-----------------------------------------------------------------------
메모장에 작성을 하고 저장할 때 제목.html 이라고 입력하고 저장한다.
저장 경로를 바탕화면에 했다면 바탕화면에 아이콘이 뜬 걸 확인 할 수 있다.
클릭해서 창을 띄우면 아래와 같이 보일 것이다.
그럼 이 글을 중앙 정렬을 하기 위해선 다음 태그를 넣어줘야 한다.
<div align="center">
여기에 내용 입력
</div>
자 그럼 완성본은 다음과 같다.
<html>
<head>
<title> 섬그늘 </title>
</head>
<body>
<div align="center">
엄마가 섬그늘에 굴 따라 가면<br>
아기는 혼자남아 집을 보다가<br>
바다가 불러주는 자장 노래에<br>
팔베고 스르르르 잠이 듭니다.<br>
</div>
</body>
</html>
위에서 처럼 저장을 한 후 저장 된 아이콘을 클릭해서 창을 띄우면 아래처럼 된다.
이처럼 자신이 원하는 부분 사이에 위치 태그를 넣어 조절하면 된다.
중앙정렬은 <div align="center">
좌측정렬은 <div align="left">
우측정렬은 <div align="right"> 라고 쓰면 된다.
다음 시간엔 이미지를 넣는 방법에 대해 알아보겠다.
이 글을 공유합시다
