html 강의 2편은 body태그에 대해 알아보려고 합니다. 지난 시간에 봤던 html의 개념(해당글로 이동하기) 에서 html의 구조가 head헤드, title타이틀, body바디로 이루어져있다고 말씀드렸죠. 오늘은 그 중에서 <body>로 시작해서 </body>로 끝나는 바디태그에 대한 부분을 다루려고합니다.
먼저 body에 설정되는 속성은 어떤것들이 있는지 알아볼께요.
<body
bgcolor="#색상코드" - 배경색지정
text="#색상코드" - 글자색지정
background="이미지경로/배경파일.jpg" - 배경이미지지정
bgproperties="fixed" - 배경이미지고정
link="#색상코드" - 방문전 링크 색깔
vlink="#색상코드" - 방문했던 링크 색깔
alink="#색상코드" - 방문하는 순간의 링크 색깔
topmargin="50" - 상하의 여백을 50만큼 준다.
leftmargin="50" - 좌우 여백을 50만큼 준다.
marginwidth=0 x좌우 영역
marginheight=0 y좌우 영역
이미지경로를 지정할 때
현재폴더 : .
상위폴더 : ..
최상위폴더 : /
하우폴더 : 폴더명
으로 지정하면 됩니다. 예를들면
../그림.jpg 라면 상위폴더에 그림.jpg를 사용한다라는 것이고
/그림.jpg 라면 최상위 폴더에 그림.jpg를 사용한다는 것이죠.
이번엔 br태그와 p태그를 살펴보죠. 둘다 줄바꿈하는 태그인데요. 약간은 다릅니다. p는 문단으로 설정해서 줄이 조금 더 떨어지고 br은 말그대로 딱 줄만 바꾸는 태그에요. 그래서 br은 혼자 사용이 가능한데요.
<html>
<head>
<title>br태그</title>
</head>
<body>
오징어<br />
꼴뚜기<br />
너구리<br />
<p>오징어</p>
<p>꼴뚜기</p>
<p>너구리</p>
</body>
</html>
이렇게하면 화면에서는요.
p와 br태크 차이 보이시나요?
다음은 align태그입니다. 정렬인데요.
<html>
<head>
<title>br태그</title>
</head>
<body>
오징어<br />
꼴뚜기<br />
너구리<br />
<p>오징어</p>
<p>꼴뚜기</p>
<p>너구리</p>
<p align="left">좌측</p>
<p align="center">가운데</p>
<p align="right">우측</p>
</body>
</html>
화면으로는요.
다음은 H태그입니다.
본문중에 제목을 크게 표시할 때 사용할 수 있고요. h1부터 h6까지 있으며 h1이 가장 큰 크기입니다.
<html>
<head>
<title>br태그</title>
</head>
<body>
<h1>오징어<br /></h1>
<h2>꼴뚜기<br /></h2>
<h3>너구리<br /></h3>
<h4><p>오징어</p></h4>
<h5><p>꼴뚜기</p></h5>
<h6><p>너구리</p></h6>
<h1><p align="left">좌측</p></h1>
<p align="center">가운데</p>
<h6><p align="right">우측</p></h6>
</body>
</html>
화면은요.
어렵진 않죠? 처음부터 천천히 보신다면 마지막 html코드가 다 이해가 되리라 믿습니다.
여기까지 html강좌 2번째 시간 body태그의 여러 속성들에 대해서 알아봤고요. h, br, p태그에 대해서 알아봤습니다. html강좌는 오른쪽 상단 돋보기에서 html로 검색하시면 다른것들도 보실 수 있습니다.
'IT > HTML' 카테고리의 다른 글
| HTML 강좌 1편 - HTML의 개념 (0) | 2016.12.20 |
|---|
최근댓글