728x90
반응형
블록 레벨 요소 (Block-Level Elements)
- 마크업(Mark up) 시 줄이 바뀌는 특성(세로정렬)을 가짐.
- 박스 개념으로 가로 폭 전체를 홀로 차지하고, 옆에 다른 요소를 두지 않음. (한 덩어리라고 이해하면 쉬움)
- 텍스트 요소 (문자)와 인라인 요소를 자식 요소(안에 들어가는 요소)로 포함 시킬 수 있음.
- 블록 요소 중에서도 자식 요소로 포함 시킬 수 있는 요소가 있고, 아닌 요소가 있음.
자주 쓰이는 블록 레벨 요소
1. <h1> ~ <h6>: 제목을 정의할 때 사용하는 태그
2. <header>
: 헤더를 정의할 때 사용하는 태그 (머리글)
3. <p>
: 단락을 정의할 때 사용하는 태그
4. <nav>
: 주로 메뉴, 목차, 색인 등을 정의하는 태그
내비게이션처럼 쉽게 찾을 수 있도록 사용함.
5. <table>
: 표를 만드는 태그
6. <ol>
: 순서 목록을 정의할 때 사용하는 태그
7. <ul>
: 비순서 목록을 정의할 때 사용하는 태그
<li> 태그만 자식 요소로 올 수 있음.
8. <li>
: 항목을 정의할 때 사용하는 태그
9. <div>
: 요소들을 그룹으로 정의하는 태그
태그 자체에는 아무런 의미도 없음.
인라인 요소 (Inline Elements)
- 마크업(Mark up) 시 가로 정렬 됨. (줄 바꿈이 없음)
- 자신의 글자 수 만큼의 영역만 차지함.
- 텍스트(문자) 요소와 인라인 요소를 자식 요소로 포함할 수 있음.
- 블록 레벨 요소를 자식 요소로 포함 할 수 없음.
자주 쓰이는 인라인 요소
1. <span>
: 인라인 요소들을 그룹으로 정의하는 태그
2. <a>
: 링크를 지정할 때 사용하는 태그
3. <br>
: 줄 바꿈 시 사용하는 태그
엔터(Enter)라고 생각하면 쉬움.
4. <strong>
: 중요한 텍스트 (문자)를 정의하기 위한 태그
<strong> 태그 사이의 문자는 굵고 진하게 표시됨.
5. <img>
:이미지를 삽입하기 위해 사용하는 태그
