TIL - HTML, CSS & 레이아웃

2021년 8월 25일 글

 

Semantic이란?

Semantics

프로그래밍에서 시맨틱은 코드 조각의 의미를 나타낸다.
mdn의 예를 빌리면, "이게 어떻게 시각적으로 보여질까?"보다는
"이 코드 라인을 실행하는 것이 어떤 효과가 있고 어떤 목적이나 역할이 있는가?"를 말한다고 한다.

출처 : MDN

즉, 내가 이해한 바로는 코드를 보기만 해도 의미를 알 수 있게 하는 것을 semantic하다고 하는 것 같다.

레이아웃 태그, 어떤 걸 쓸까?

레이아웃 태그?

이미지 출처:https://dasima.xyz/html-layout/

위 그림은 구글 검색 결과를 기준으로 레이아웃 태그를 나눠놓은 것인데 이해하기 쉬워서 가져와봤다. 사실 위의 header,nav,section등 모든 것을 div로 사용할 수도 있다. 하지만 왜 이런 걸 쓰는 걸까?

왜 쓸까?

위에서 언급한 semantic과 어찌보면 일맥상통하는 부분이다. 웹페이지의 접근성을 위해서, 또는 유지보수의 편의성을 위해서 사람이 잘 알아볼 수 있도록 시맨틱하게 코드를 짤 필요가 있다.

이런 관점에서 위에서 언급한 레이아웃 태그들은 시맨틱한 코드를 돕는다. div로 class를 나누어 구획을 나눌 수도 있지만 footer와 nav같이 유일한 태그를 사용하여 클래스를 굳이 주지 않아도 되고 파싱을 할 때에도 의미를 이해하기 쉽다.

종류는 무엇이 있을까?

<header> : 사이트 이름, 문서의 제목, 로고 등을 정의한다.
<nav> : 사이트의 다른 페이지로 이동하는 카테고리, 메뉴를 정의한다.
<section> : 범위 사이의 데이터를 같은 주제의 그룹으로 분류한다.
<article> : 개별 문서의 제목과 본문을 정의한다.
<footer> : 저작권, 저자 연락처 등을 표시한다.
<aside> : 사이드바 영역이다. 본문 내용과 직접적 연관이 없는 내용들을 기재한다.

개선해보자!

"오늘 코드를 짜면서 아래와 같은 부분을 개선해보자."

• Selector를 단순하게 짜보자.
• BEM CSS 방법론을 최대한 적용해보자.
• class들의 조합을 연습해보자.
• Semantic 태그들을 최대한 활용하자.