이전 글에서 HTML의 목록 및 테이블 관련 태그에 대해 알아보았다.
이번 글에서는 HTML의 인라인과 블록 요소 그리고 영역 태그 및 시멘틱 요소에 대해 알아보도록 하자.
Inline 요소
- 내용의 크기가 요소의 크기를 결정한다.
- 높이, 너비, 외부/내부, 여백, 가로/세로 정렬 설정은 불가능하다
- 줄바꿈을 강제하지 않는다.
| Inline 태그 |
|---|
| <a> <b> <br> <button> <cite> <em> <i> <img> <input> <label> <script> <select> |
| <small> <span> <strong> <sub> <sup> <textarea> |
Block 요소
- 자체적인 크기와 여백을 가짐
- 부모 요소의 한 줄을 독점, 강제 줄바꿈 (자기 너비에 관계없이)
- 일반적으로 타 인라인 요소와 블록 레벨 요소를 포함 가능
| Block 태그 |
|---|
| <article> <aside> <blockquote> <div> <footer> <form> <h1>~<h6> |
| <header> <hr> <li> <nav> <ol> <p> <section> <ul> |
영역 태그
대표적인 영역 태그로는 <div>가 있으나, <div>는 용도를 추정할 수 없다는 한계를 가지고있다.
그래서, <div>와 같은 역할을 수행하면서도 의미가 부여된 태그, 즉, Semantic태그를 사용하여 위의 문제를 해결할 수 있다.
<영역 태그에 대한 참고 이미지>
<div>
- 순수 컨테이너 태그
- 다른 요소들을 묶거나, 문서의 영역을 나누는데 사용한다.
- 코드로만 봐서는 용도를 추론할 수 없다는 한계를 가지고 있다.
<header>
- 페이지의 최상단에 위치하는 컨테이너 태그
- 일반적으로 제목, 로고, 검색창 등의 내용 등 포함한다.
- 페이지의 소개 및 탐색에 도움을 준다
<footer>
- 페이지의 최하단에 위치하는 태그
- 일반적으로 작성자, 저작권 정보, 관련 문서 등 포함한다.
<nav>
- 링크들(현재 페이지 내 구획 또른 다른 페이지로의)을 포함하는 컨테이너 태그
<aside>
- 문서의 주 내용과 간접적으로 연관된 부분을 나타내는 컨테이너 태그
- 주로 사이드바 등에 사용한다.
<main>
- <body>의 주요 컨텐츠를 나타내는 컨테이너 태그
- 메인 컨텐츠가 이 구획에 들어간다.
<section>
- 컨텐츠 내 큰 단위의 독립적인 구획을 나타내는 컨테이너 태그
- 다른 시맨틱 태그의 의미에 해당하지 않는 구획이다.
<article>
- 독립적으로 재사용되거나 반복적으로 나타나는 구획을 나타내는 컨테이너 태그
- 게시판이나 뉴스, 갤러리의 목록상 각 항목에 해당한다.
웹 개발자