(Front-end) 구조가 탄탄한 HTML

HTML(HyperText Markup Language)

html은 사이트에 어떤 콘텐츠를 보여줄지 정하는 언어입니다. 

html은 보라색으로 나온 tag와 흰색으로 나온 각 tag의 attribute로 구성되어 있습니다. 

tag는 이 콘텐츠가 글인지, 이미지인지, 동영상인지를 정해주는 것이고 attribute는 해당 tag가 어떠한 성질을 가지고 있는지 표현해주는 것입니다. 

처음 html을 배울 때 tag를 아무렇게나 찍어도 화면에 다 찍혀서 그냥 몇몇 tag를 알기만 해도 front-end 끝이겠구나 했는데 큰 오산이었더라구요 ㅎ;

보여주고자 하는 화면의 구조를 잘 짜두어야 유지/보수도 쉽고 사용하기도 편하다고 합니다.

하지만 일단 tag를 알아야 구조적으로 사용을 하든지 하겠죠? 우선 문서 구조를 나타내는 tag에 대해서 정리해보겠습니다.

Tag 명	역할	요구사항
<section>	콘텐츠 맥락을 구분하는 장(chapter)	반드시 내부에 heading태그(<h1>등)를 하나 이상 자식으로 가져야 합니다.
<article>	독립적인 콘텐츠로서의 완결성을 갖춘 콘텐츠 ex) 뉴스 기사	반드시 내부에 heading태그(<h1>등)를 하나 이상 자식으로 가져야 합니다.
<nav>	주요 내비게이션 이동 ex)메뉴	반드시 내부에 heading태그(<h1>등)를 하나 이상 자식으로 가져야 합니다.
<aside>	주요 콘텐츠와는 관련이 적은 내용을 지닌 콘텐츠 ex)사이드 바	반드시 내부에 heading태그(<h1>등)를 하나 이상 자식으로 가져야 합니다.
<header>	페이지에 상단부분 ex)제목, 로고, 검색창 등
<footer>	페이지 맨 밑에 있는 푸터나 섹션 푸터 ex)연락처, 저작권 등 표현

위 태그들은 html sectioning 요소로 구조를 짜는데 유용하게 쓰일 수 있습니다. 

html요소들을 그룹화 해주는 <div>와 <section>은 화면에서 보이는 게 똑같아 보일 수 있지만 <section>을 쓰면 브라우저에게 완전한 chapter의 의미를 

줄 수 있다고 합니다. 향후 콘텐츠를 수정하거나 할 때 보다 직관적으로 이게 하나의 chapter구나 할 수 있겠죠? 

<article>은 <section>과 비슷해 보이는데요 <article>자체는 그 안의 요소들이 모두 하나의 콘텐츠로서 완결됐다라는 의미를 준다는 점에서 

<section>과 조금 다릅니다. 

html을 작성하는 방법들은 사람마다 다르고 정답이 없기 때문에 여러 tag들을 알고 본인 스타일대로 적용시키는 것이 중요한 것 같습니다.

본인 스타일대로 작성하기 위해서는 아무래도 경험이 쌓여야 할 수 있겠죠?