HTML

<section>, <p>, <div> 뭣이 다른디!

section

여러 contents가 리스트화되어 큰 의미 단위가 될 수 있는 것을 묶는다.

p

어떤 문단, 단락을 묶는다.

❗️ Symantic Element

• 태그만으로 데이터를 유추할 수 있다. (의미있는 코드 블록)
  = 목적과 역할을 브라우저와 개발자에게 명확히 나타낸다
• 시각 장애가 있는 사용자가 페이지를 탐색할 때 푯말로 사용할 수 있다.

div

임의의 내용을 묶어 구역을 구분한다.
Non-symantic 하다!

• div 자체로 의미를 가질 수 없어 속성 등으로 역할을 나타낸다.
• HTML은 'mark up', 즉 문서의 구조를 나타내기 위한 언어이므로 무분별하게 의미없는 div로 묶는 것은 좋지 않다. 최대한 Symantic Element를 사용하자!
• div는 특정 작은 부분을 따로 styling 해야할 때 구역을 나누어주는 상황에만 사용하자.