HTML , div 와 span

<div></div> 

 

-body 문서 내의 각각 영역 세션을 구분하기 위해 사용.

구역들을 나누는 태그.

영역들을 그룹화 하는 목적을 지님.

-블럭 레벨 요소

 

<span></span>

-텍스트에 크기조절 , 좌우간격, 컬러 등 조절에 주로 사용.

영역을 그룹화 하는 목적을 지님.

-인라인 레벨 요소

 

div 의 구체화 ,시멘틱 구조 태그

 

다수의 동일 div 태그 사용과 중첩으로 인해 코드 가독성이 떨어짐,

이를 보완하기위해 div와 동일한 기능을 하되 영역에 따른 고유한 명칭을 부여함으로 구저적인 가독성과 검색 엔진의 데이터 추출 효율성을 증대시킴.

<header> : 페이지나 문서의 상단에 배치하여 주제나 검색, 머리말등을 표시 및 그룹화.

<nav> : 페이지나 문서의 주요 네비게이션(메뉴) 링크를 그룹화.

<main> : 페이지 본문 내용들을 그룹화.

<aside> : 일반적으로 main 내부나 사이드에 배치하여 main 에 대한 간접적인 추가 정보나 링크등을 포함하는 사이드바 형태로 표현.

<section> : 페이지나 문서의 특정 영역에 대한 독립적인 주제별 컨텐츠를 그룹화.

<article> : 기사나 블로그, 포럼등 그 자체로 독립적인 컨텐트등을 지정.

<footer> : 페이지나 문서의 하단에 배치하여 연락처, 주소, 저작권, 상호, 약관등 부가 정보들을 그룹화

section 과 article 의 차이가 미묘하여 애매한 부분을 가지고 있음.

 

<p>,<span>,<div> 의 차이점은 무엇일까 ?

 

<p>,<div> 는 블럭 레벨 요소 (줄바꿈의 현상 )

<span>은 인라인 레벨 요소 (줄바꿈의 현상이 불가능)

 

span<div (X)

span<p (X)

 

div<span (O)

p<span (O)

 

p<div(X)

 

div<p (O)

div<span (O)