Semantic HTML

클론 코딩 실습에 대한 1차 리뷰 시간을 가졌다.

내가 작업하면서 느꼈던 불편함이나 궁금증 중에는 좀 더 '효과적으로 클래스 명을 짓는 방법'이 있었다. 다른 사람이 봐도 바로 이해할 수 있는 범용적인 용어를 쓰는게 어려웠다. 이 부분은 디자인을 할 때 레이어 혹은 컴포넌트 이름을 정할 때도 똑같이 느끼는 부분이였다.

예를 들어 나는 디자인 회사에서 일할 땐 WEB 상단의 카테고리를 GNB로 불렀는데 코드 리뷰에선 'GNB가 무슨 뜻인지 모르겠다. Header라고 쓰는게 더 맞는 것 같다.' 라는 피드백이 돌아왔다.

그 외에도 내가 쓴 css코드가 길어지면 길어질수록 복잡해서 나도 cmd+f가 아니면 찾기 힘들다고 하자 semantic elements와 BEM을 공부해 적용해보라는 피드백을 들었다.

Semantic Elements 종류는 총 13가지

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

그동안 나는 <div class="header">로 사용했는데 semantic elements인 <header>로 더 간결하고 직관적으로 마크업이 가능하다.

그리고 semantic elements와 같이 reset css많이 사용한다.
reset css는 semantic elements가 가지고 있는 고유의 padding또는 margin등을 없애 마치 단어 그대로 '어떤 의미의 용도로 사용한 태그'를 완성시켜 준다.