👨🏻‍💻 TIL

레이아웃의 역사

지금이야 다들 간단하게 쓰는 flex, grid지만, 그 전까지는 다양한 방법으로 웹 페이지의 레이아웃을 구성했다고 한다. 단순히 텍스트만을 나열하다가, HTML의 table을 의도에 맞지 않게 레이아웃을 위해 사용하기도 하고, 프레임으로 여러 HTML 페이지를 한 페이지에 묶어서 사용하기도 하다가, 무수히 많은 div를 사용하기도 하고...그러다가 오늘과 같이 시맨틱 마크업과 flex, grid를 사용하는 시기에 도달한 것이다!

시맨틱 마크업

시맨틱 마크업은 콘텐츠의 시각적인 스타일보다는 정보 그 자체를 전달하기 위해서 문서를 작성하는 행위를 뜻한다. 조금 더 간단하게 말하면 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. 사실 사용자의 눈에만 이쁘게 보이면 되는거 아닐까? 왜 시맨틱 마크업이라는 것이 중요할까?

시맨틱 마크업을 사용하면 다음과 같은 장점을 얻을 수 있다.

• SEO(검색엔진 최적화)가 가능하다.
• 웹 접근성을 높여준다.
• 태그의 가독성 및 유지보수가 용이하다.

섹션

시맨틱 마크업을 잘 하기 위해서는 div말고도 구획을 나눌 수 있는 태그들에 대해서 잘 알아야 한다. 다음과 같은 태그들을 활용해서 시맨틱 마크업이 가능하다.

header

소개, 탐색 등에 도움이 되는 태그이다. 회사명, 로고, 제목, 작성자 등이 포함되며, 중첩 사용할 수 없다.

nav

문서의 부분 중 현재 페이지 내부, 혹은 다른 페이지로의 링크를 보여준다. 메뉴, 목차, 브레드크럼으로 사용된다.

브레드크럼, 또는 브레드크럼 트레일은 일반적으로 사이트의 header와 기본 컨텐츠 사이에 배치되는 탐색 보조 도구로, 사이트 구조와 관련된 현재 페이지의 계층 구조, 최상위에서부터 현재 페이지까지를 사용자의 링크 목록 등으로 표시합니다. 현재 페이지까지 방문한 순서대로 보입니다.

MDN 문서의 정의에 따르면 브레드크럼은 이러한 계층 탐색 보조도구이다.

경우에 따라 한 페이지 내부에 다양한 nav 태그를 가질 수 있다.

footer

페이지의 작성자, 저작권정보, 관련 문서 등의 내용을 담는다.

위와 같이 대부분의 웹 페이지 아래에서 확인 가능하다. 예시는 애플의 홈페이지이다.

main

HTML body의 주요 콘텐츠를 나타내며, 웹페이지에서 한 번만 사용 가능하다. 사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 여러 문서에 걸쳐 반복되는 콘텐츠는 포함해선 안된다.

• 검색 폼이 페이지의 주요 기능이라면 예외로 둘 수는 있다.

article

독립적으로 구분해 배포하거나 재사용 가능한 구획이다. 사이트의 다른 기능에 영향을 주지 않고 독립적인 기능을 수행하며, 아티클 영역을 제거해도 페이지는 정상적으로 작동한다. 대표적으로 뉴스 홈페이지에 사용되며, 게시판, 블로그 글, 매거진 등과 같은 곳에도 사용된다.

section과 article의 구분

둘 다 비슷해보이긴 하지만, 독립적으로 사용하는지의 여부에 따라서 article을 사용할지 section을 사용할지 결정하면 된다. 만약 웹페이지의 문맥상 연결성이 필요하다면 section을 사용하면 된다.

• 단순히 스타일을 위해서 묶어주어야 한다면 div를 사용하도록 하자!

aside

문서의 주요 내용과 간접적으로 연관된 부분을 나타내며, 보조적인 역할을 하는 공간이다. 각주나 광고 등에 사용된다.

📗 회고

어쩌다보니 정신을 차렸을때는 TIL이 왕창 밀려있었다...
사실 매일 무언가를 꾸준히 작성한다는게 그렇게 쉬운 일이 아니긴 하다. 금방 정신을 차리니 4일치가 밀려버렸고 다시 4일, 5일, 6일...이런 식으로 더 적는 것도 아닌 것 같아 못 채운 날짜는 내버려 두었다. 앞으로라도 조금 더 성실하게 TIL을 채우려고 노력해봐야겠다.

배운 내용 모든것을 TIL에 적으려니 힘들다. 사실 그냥 전부 적는 것은 배껴쓰기나 다름없으니, 어떻게하면 복습을 하면서 간결하고 핵심적인 TIL을 작성할 수 있을지 여러가지 방법을 시도해 봐야겠다.