디비전 DIV 태그는 "분할하다"는 의미를 가진 Division의 약자입니다.
DIV 태그는 웹 페이지의 레이아웃 디자인을 위한 태그입니다. <div> </div> DIV태그로 contents를 감싸게 되면, contents는 디자인을 위한 특정한 영역으로 별도 지정이 됩니다. 지정된 영역은 웹 페이지의 레이아웃 상에서 다양한 위치로 배치될 수 있습니다. DIV 태그는 block level element 로서 contents가 포함된 행의 화면 양 끝에 이르는 모든 영역에 적용됩니다. contents HTML1, HTML2, HTML3에 각각 DIV 태그를 적용해보겠습니다. DIV 태그만 사용해도 자동으로 줄 바꿈이 됩니다. DIV 태그는 margin 값을 0으로 갖고 있습니다. 연속해서 DIV 태그를 사용하면 빈 간격 없이 딱 붙어서 적용됩니다.
<body>
<div> HTML 1 page </div>
<div> HTML 2 page </div>
<div> HTML 3 page </div>
</body>
그리고 DIV 태그를 적용한 3개의 contents를 하나로 묶는 DIV 태그를 만들 수 있습니다. 상위 DIV 태그에 id를 지정하여 특정한 서식을 적용할 수 있습니다. 아래와 같이 코드를 작성합니다.
<body>
<div id="top">
<div> HTML 1 page </div>
<div> HTML 2 page </div>
<div> HTML 3 page </div>
</div>
</body>
id 이름은 임의로 top로 지정했습니다. <style> </style> 태그에 선택자로서 id인 top를 지정한 후 서식을 적용할 수 있습니다. id 선택자를 지정하는 방법은 # 과 id 이름을 붙여 쓰는 것입니다. 10px의 굵기를 가진 빨간색 단선을 적용해보겠습니다.
<style>
#top {
border:10px solid red;
}
</style>
P 태그는 Paragraph의 앞 글자를 딴 태그로서, 텍스트로 이루어진 contents의 단락을 구분합니다.
<body>
<p> HTML 1 page </p>
<p> HTML 2 page </p>
<p> HTML 3 page </p>
</body>
P 태그 역시 DIV 태그와 동일하게 Block level element 로서 contents가 속한 행의 양 끝 영역에 적용됩니다. 그러나 P 태그는 DIV 태그와 달리 margin 값을 기본적으로 갖고 있습니다. P 태그를 연속해서 적용하면 DIV 태그와 달리 줄 간격의 영역만큼 공백이 표시됩니다.
SPAN 태그는 어떤 일이 지속되는 기간 또는 폭 등의 의미를 갖고 있습니다.
SPAN 스팬 태그는 DIV 태그 및 P 태그와 달리 inline element 태그입니다. contents가 사용하는 공간만큼의 영역에만 서식을 지정할 수 있습니다. 또한, 연속으로 SPAN 태그를 사용할 경우에는 가로 방향으로 나란히 정렬됩니다. SPAN 태그는 DIV 태그와 함께 웹 페이지의 레이아웃을 만들 때 자주 사용할 수 있는 태그입니다.
<body>
<span> HTML 1 page </span>
<span> HTML 2 page </span>
<span> HTML 3 page </span>
</body>
텍스트가 많은 문장들로 구성된 contents는 주로 P 태그를 이용해 디자인합니다. 그 외 전반적인 웹 디자인 레이아웃 제작을 위해 DIV , SPAN 태그를 사용합니다. block level element 또는 inline element 중 어떤 방식으로 쓸 것인지 결정 후 DIV, SPAN 태그를 선택합니다.
'코딩' 카테고리의 다른 글
| css media queries 미디어 쿼리 min-width, max-width 비교하기 (0) | 2020.09.01 |
|---|---|
| CSS Grid 그리드 기초 간단히 익혀보기 (0) | 2020.08.31 |
| html CSS border 속성 property 사용하여 웹 페이지 라인 꾸미기 (0) | 2020.08.30 |
| CSS 박스 모델 개념 margin, border, padding, width, height (0) | 2020.08.29 |
| <style> 태그에 선택자 comma [ , ] 로 정렬하여 동시에 서식 적용하기 (0) | 2020.08.29 |
댓글