본문 바로가기

나는 엔지니어/HTML

DIV / SPAN : 페이지를 논리적인 구간으로 나누기 & float / 포지셔닝에 관해서

DIV의 영역은 한줄 전체인 반면에 SPAN의 영역은  태그안의 내용 만큼만이다


span은 특정한 단어들의 스타일을 변경할때 사용한다.

하지만 단지 단어의 강조만을 나타낼 경우에는 em 혹은 strong 태그를 사용한다.



float  컨텐츠 띄우기 ( 명시적으로 width 사이즈를 설정해야 한다.)

float : left;  왼쪽으로 띄우기

float : right;  오른쪽으로 띄우기 


clear float 지우기 ( 상위에 float이 설정되어 있다면 자동으로 아래 모든 컨텐츠에도 반영된다. ) 

clear : left;  왼쪽으로 띄우기 중지

clear : rgiht; 오른쪽으로 띄우기 중지


position 속성


static (default )

다음칸(줄)에 순서대로 배치 

absolute

문서의 기본flow를 벗어난다
부모 요소를 기준으로 top,bottom,left,right 값에 따라 div가 위치한다. 

relative

기본flow를 기준으로   top,bottom,left,right 값에 따라 상대적으로 위치한다.