[HTML] element 주용도 구분하기

HTML가 마크업 언어라 그런건지는 몰라도 정의 그 자체로는 용도가 잘 구분되지 않는 Tag들이 많았다. 그래서 NAVER 홈페이지를 참고하여 정리해보았다.

① padding vs margin

margin과 padding은 외관상으로는 둘다 빈공간으로 내비쳐 구분에 어려움을 겪었다.

• padding
  어떠한 element에 구분감(덩어리진 느낌)을 주어 정렬하기 위해 사용된다. element에 border을 표시해야할 때도 margin 대신 쓰인다.

• margin
  덩어리진 느낌이 없는 element의 정렬, border이 없는 구간에서 공백을 메우기 위해 사용된다. button이나 link element를 사용할 때 EventListener가 적용되는 영역을 구분하기 위해 padding 대신 사용되기도 한다.
  
  

② list vs div

네비게이션, 사이드바처럼 객체를 일렬로 정렬할 때 list를 주로 사용한다. a 태그를 포함하는 경우가 많으며 table 형식의 정렬에서도 간혹 쓰인다.

기능적인 관점에서 왜 굳이 div 대신에 사용하는 것인지 잘 모르겠다. 이것을 그냥 의미론적으로 보아야하는 것인지 여전히 헷갈린다.

③ class vs id

id는 일일히 입력하는게 귀찮고 코드가 무거워질 수 있으므로 되도록 class를 활용하는게 효율적이라 생각했다. 하지만 웹사이트의 실제 HTML 코드를 보니 거의 모든 element에 id와 class가 정의되어있었다. 대체 둘의 용도는 어떻게 다른 걸까

구글링을 해보니, 규칙으로 정해진건 아니지만 class는 주로 웹퍼블리싱에서 css 선택자로서 많이 활용되고 id는 JS나 백엔드 개발에서 활용된다고 한다.