html 8

8화: html 8

<div></div> 태그는 레이아웃을 만들고 섹션을 분리함.
그 안에는 html 요소를 추가할 수 있음.
예를 들어 단락, 제목, 이미지, 심지어 다른 div 요소까지도.

<div>랑 <p>가 뭔 차이인가 했는데

div는 단순 구조/묶음 상자, 의미가 없는 태그. 그냥 구조 설계, 하나의 덩어리라고 표시하기 위함인거래. 건물의 방을 나누는 벽 같은 존재.

p는 문단이라는 의미를 가진 태그임. 구조 설계, 레이아웃을 위해 사용하지 않음.

인라인 스팬

<span></span>
문장에서 한 단어나 작은 부분만 강조하고 싶을 때.
텍스트의 특정 부분에만 스타일을 적용하거나 변경 가능하게 해줌.

그니까 꾸밀 대상을 지정해주는 태그.
<p>이 문장은 <span style=...>여기만</span> 특별하다.</p>

시맨틱 태그

콘텐츠의 의미를 정의하는데 도움을 줌.
개발자, 브라우저 모두에게 코드를 더 명확하게 만듬.
div와 span과 달리 포함된 콘텐츠에 맥락을 제공.

<header> – 소개 콘텐츠, 보통 상단에 위치.
<nav> – 탐색 링크를 포함.
<main> – 페이지의 주요 콘텐츠.
<article> – 블로그 포스트와 같은 독립적인 콘텐츠 조각.
<section> – 관련 콘텐츠를 그룹화, 종종 제목과 함께.
<footer> – 저작권이나 연락처 정보와 같은 하단 섹션.

이 게시글에선 main, article 위주로 작성.
이거만 배웠음ㅋㅋ

Q. div랑 article이 뭔 차이? 둘다 하나의 큰 틀 아닌가?

div는 아무 의미도 없고 그냥 구조 설계, 레이아웃용임.

article은 독립적인 콘텐츠 단위이고 의미도 가지고 있음. 검색엔진도 이걸 인식함.

Q. 아니, 그럼 p랑 article은 뭐가 다른데. 하나의 독립된 기사. 하나의 문단. 결국 똑같은거 아님?

article은 한 편의 글 / p는 그 글 속의 문단 하나.

글 전체냐, 그 안의 한 문단이냐 정도의 차이.

p는 문단 그 자체인거고 article은 하나의 글인거지. 그러니까 얘만 덩그러니 빼놨을 때 뭘 말하는 건지 이해할 수 있어야함. (뉴스 기사, 댓글 하나 등.) 단독 게시했을 때 자연스러워야 함. 그니까 이건 완성된 콘텐츠라는 거임. 이 사이트가 미완성이어도 구조적으로 완성되었다면 그건 하나의 콘텐츠가 되는 아티클인 것임.

사이트의 완성도와는 무관한 것.

<article>
  <h2>고양이 키우는 법</h2>
  <p>고양이는 독립적인 동물입니다...</p>
  <p>사료는 이렇게 주세요...</p>
</article>

이거만 빼놓고 봐도 뭘 말하는지 이해 가능.

집으로 비유하자면

<body> - 집 전체

<main> - 거실 (이 집의 중심 공간, 가장 핵심 활동이 일어나는 장소)
페이지의 중심 영역. 여러개 사용하지 않음.

<div> - 벽, 칸막이

<article> - 방 하나 (침실, 서재, 욕실 등... 각각 독립적인 목적이 있음.)

<p> - 방 안의 구성 요소 (침대, 의자 등.)

텅.

같은 시리즈의 다른 포스트

코딩 8화