CSS 레이아웃

CSS 레이아웃편을 작성하게 된 이유 :

컨텐츠를 배치할 때 position의 개념과 display 개념을 까먹는 경우가 많아 이렇게 정리하게 되었습니다.

<div> 태그는 기본값이 block-level의 태그 ( 한줄을 모두 차지 )

<span>은 컨텐츠 단위로 감싸주는 기본값이  Inline-level의 태그 입니다. 컨텐츠가 없으면 자리를 차지하지도 않습니다.

<span> 태그에 컨텐츠를 넣었더니 Inline-level의 태그는 컨텐츠를 감싸줍니다.

요렇게 따로 CSS 셀렉터를 설정하여 배경색 설정을 해줍니다.

 

inline , block , inline-block 3가지 종류의 케이스를 살펴보겠습니다.

위에서 설명드렸다 싶이 <div> 태그의 기본값은 block-level 

display: inline을 통해 inline-level로 변경하여 주니 사라졌습니다. ( <div></div> 컨텐츠로 감싸주는 컨텐츠가 없기에)

 

두번째는 <span> 태그의 기본값은 inline-level 이를 display: block; 으로 변경하여 줍니다.

<span>태그가 block-level로 변경되어 컨텐츠를 감싸는 것이 아닌 box 개념이 됩니다.

 

 

display: inline-block 값을 통하여 block의 특징과 inline의 특성을 모두 가져옵니다.

 

* 참고 ( 사진이 작아 안보이시는 분들은 ctrl + 마우스의 휠을 위로 올리기를 통해 참고 )

 

다음은 position의 개념에대해 설명드리겠습니다.

 

 

다음과 같이 <div> 태그를 설정하였습니다.

CSS의 .container 부분을 보시면 left와 top의 설정값을 주었지만 변화가 생기지 않습니다.

 

왜냐하면 position의 기본값이 static으로 설정되어 있기 때문입니다.

 

(위의 설명에 position: static; 부분이 없어도 기본값으로 설정되있다 이 말입니다.)

 

사진으로 느껴지실련지 모르시겠지만

 

.container에 position: relative; 값을 설정해주니 노란색 배경이 top쪽으로 20px 왼쪽으로 20px 만큼 움직였습니다.

.box 부분은 더 확실하게 보이네요

position: absolute; 값은 해당 컨텐츠가 담겨있는 box 기준으로 배치가 됩니다.

 

position: fixed; 는 페이지 기준 ( 가장 큰 개념)으로 CSS 배치가 됩니다.

position: sticky; 는 마우스 휠을 내려도 .box 가 따라 내려오는 것을 보실 수 있습니다.

 

 

 

잠시 딴얘기 )

CSS 프레임워크에는 Bootstrap과 JQuery가 있으며 현재에는 기술이 발전하여 두 기술이 엄청 자주 쓰이진 않지만 그래도 쓰는 회사가 있으니 한번 써보시는 것을 추천드립니다.

 

그리고 해당 기술이 적용되는지는

caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

에서 해당 기술이 지원되는지 확인할 수 있고요.. 아무래도 가장 안좋은건 Exploer가 호환이 안되는 기술이 많습니다.