.png)
이번 포스팅은 HTML 페이지 UI를 구성하는 데 사용되는 태그와 기본 구조에 관한 내용을 담고 있습니다.
Semantic Tag
웹 페이지를 제작할 때, 단순히 <div> , <span> 등으로 원하는 모양의 페이지를 제작할 수 있습니다. 하지만 이는 좋은 방법은 아닙니다.
페이지를 제작할 때는 'semantic' 을 고려하여, 즉 요소의 의미를 고려 하여, 태그를 적재적소에 사용해야 합니다.
Semantic Tag를 사용해야, 웹 페이지의 구조를 쉽게 이해할 수 있고, 검색엔진이 웹 페이지를 이해하는 데도 도움을 줍니다. 이를 위해, HTML은 섹션을 나타내는데 사용할 수 있는 전용 태그들을 제공합니다. 전용 태그들은 아래와 같습니다.
Box vs Item
Box
Box는 일종의 컨테이너를 의미합니다. 전체 페이지의 구획을 나눌 뿐, 실제 브라우저 상에서 눈에 보이지는 않습니다.
<header><footer><nav><aside><main><section><article><div><span><form>
Box vs Semantic tag
위에서 본 Semantic 태그들과 Box 역할을 하는 태그들이 거의 유사합니다. 하지만, 둘의 분류 목적이 다르다는 것을 이해해야 합니다.
Semantic 태그들은 Element에 의미론적인 중요도의 여부를 나누는 것 입니다.
Box 역할의 태그들은 Layout을 위해 구획을 나누는 태그인지, 브라우저에 직접 보여지는 태그인지를 구분하는 것 입니다.
Item
Item은 브라우저에 직접적으로 보여지는 태그들입니다.
<a><button><input><label><img><video><audio><map><table>- ...
Inline vs Block
Inline 엘리먼트와 Block 엘리먼트를 이해하고 있어야, CSS를 사용할 때도 헷갈리지 않고 사용할 수 있습니다.
Inline
뷰 포트의 너비 중, 엘리먼트가 실제로 사용하는 만큼만 사용합니다. 뷰포트에 자리가 남아있다면, 한 줄에 요소를 배치합니다.
Block
뷰 포트 너비를 하나의 엘리먼트가 모두 차지합니다. 그렇기 때문에, 엘리먼트들을 나란히 작성했더라도, 나란히 나타나지 않고 한 줄에 하나씩 나타나게 된다.
📝 Reference
