반응형
HTML/CSS에서 많이 쓰이는 다양한 블록 요소들 정리.
<h1~6> 제목 태그 (Heading)
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>- <h1>부터 <h6>까지 총 6단계가 있다.
- 숫자가 높아질수록 제목의 중요도가 떨어진다.
<p> 문단 태그 (Paragraph)
<p>
문단 태그
문단 태그
문단 태그
문단 태그
문단 태그
</p>
<ol> 순서가 있는 목록 (Ordered List)
<ol>
<li>순서가 있는 목록</li>
<li>순서가 있는 목록</li>
<li>순서가 있는 목록</li>
</ol>
- 앞에 숫자가 붙는(넘버링) 목록
- 하위 항목은 <li> 태그(List)로 구현한다.
<ul> 순서가 없는 목록 (Unordered List)
<ul>
<li>순서가 없는 목록</li>
<li>순서가 없는 목록</li>
<li>순서가 없는 목록</li>
</ul>
- 순서 구분 없이 불렛이 붙는 목록
- <ol>과 동일하게 하위 항목은 <li> 태그로 구현한다.
<div> 레이아웃 구성 태그 (Division)
<div>
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<p>
문단 태그
문단 태그
문단 태그
문단 태그
문단 태그
</p>
<ol>
<li>순서가 있는 목록</li>
<li>순서가 있는 목록</li>
<li>순서가 있는 목록</li>
</ol>
<ul>
<li>순서가 없는 목록</li>
<li>순서가 없는 목록</li>
<li>순서가 없는 목록</li>
</ul>
</div>
- 화면의 요소들을 그룹화 시켜주거나 분할하는 태그
- 웹페이지의 기본 레이아웃 외에도 다양한 용도로 사용한다.
블록 요소의 특성
<style>
h1, h2, h3, h4, h5, h6 {border:1px solid red;}
p {border:1px solid green;}
ul, ol {border:1px solid blue;}
div {border:5px solid black; width:300px;}
</style>블록 요소가 차지하는 영역이 잘 보이도록 스타일을 적용한 모습. 아래는 블록 요소들이 공통으로 갖는 특징들이다.
| div, p, ul, ol, li, dl, dt, dd, h1~h6, table, form, address, fieldset + 시멘틱태그 등등... |
- 블록 요소는 기본적으로 블록처럼 쌓이며 자동 줄바꿈이 적용된다.
- width값과 height값을 지정할 수 있다.
- width값 미지정 시 부모 태그의 100%를 기준으로 자동 설정된다.
ex_div 태그의 width 사이즈에 맞게 자식 태그들의 width값이 변화 - margin, padding으로 모든 방향에 여백을 부여할 수 있다.
- 블록 요소 안에 다른 블록 요소나 인라인 요소를 포함할 수 있다.
ex_모든 블록 요소를 감싼 div 태그
단, 일부(address, h1~h6, p등)요소는 블록요소를 포함할 수 없다.
대부분의 웹 페이지들이 이런 블록 요소들을 기본으로 구성되어있다. 티스토리 에디터에서도 이 태그들이 여기저기 쓰이는 것을 쉽게 확인할 수 있다. ol과 ul이 항상 헷깔렸는데, 본래 영어 단어의 의미로 보니까 직관적이고 외우기 쉬웠다.
스타일을 부여하니 각 영역들이 명확하게 보여 쉽게 파악할 수 있었다. 블록 요소의 특성은 이후 레이아웃을 짤 때 태그가 꼬이더라도 빠르게 원인을 파악하고 해결하기 위해 숙지할 필요가 있다고 한다. 이 다음 배울 인라인 요소와 헷깔릴 수 있으니 둘의 차이를 잘 체크해야겠다.
반응형
