css - 레이아웃

layout 

- 블록들의 위치를 가로로 나열하는 데 필요한 요소와 요소들을 겹치게 배열하는데 필요한 요소들 *

 

1. float 

- 박스를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성

- 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 반드시 필요

 * float 박스에 가로사이즈를 함께 주어야 모든 구형 브라우저에도 크로스 브라우징 가능

크로스 브라우징 - 각 브라우저들에서 한 웹페이지가 동일한 결과로 표현 되는것

 

2. clear 

- float 된 박스들의 바로 아래 박스에게 주변을 흐로지 않고 원래대로 배치되도록 하는 속성

- float 해제 시켜주는 중요한 역할 - 요소 블록

left	float 된 박스중 좌측이 짧을때  좌측의 빈 공간 부터 채워 내려옴
right	float 된 박스중 우측이 짧을대 우측의 빈공간부터 채워 내려옴
both	float 된 박스 중 어느 쪽도 채우지 않고 다시 한단으로 배치해줌 *

 

3. display

- 요소의 성격을 바꾸어 주는 속성

block	박스를 블록 요소로 만들어 줌 (줄 바꿈이 일어남)
inline	박스를 인라인 요소를 만들어 줌( 줄바꿈 안일어남)
inline-block	박스를 인라인요소로 두어 줄 바꿈은 일어나지않게 하면서 블록에 쓸수있는 속성을 쓸 수 있음
none	바스를 보이지 않게 숨겨줌

 

4. overflow 

- 박스 안의 내용이 박스보다 클 경우 넘치는 부분을 처리하는 속성

hidden	넘치는 컨텐츠를 숨김
auto	넘치는 컨텐츠가 존재할 경우에만 스크롤바를 생성해 줌
scroll	넘치는 컨텐츠가 없얻 스크롤바를 생성해 줌
scroll-x,scroll-y	각 방향으로 스크롤바를 따로 처리하게 해줌

 

5. float을 해제하는 몇가지 방법

 

1) float 된 박스들의 바로 다음 박스에게 clear :both 한다

- 바로 다음 박스가 없으면 사용할수 없다.

 

2)float 된 박스들을 감싸는 박스를 다시 float: left 한다

- 그 float 까지 연쇄적을 해제해야 하며 width값 주어야 크로스 브라우징 됨

 

3) float 된 박스들을 감싸는 박스에 overflow:auto 한다

- 세로 스크롤바가 생길경우 사용할 수 없으며 width 값 주어야 크로스 브라우징 됨

 

4) float 된 박스들을 박스에 height 값을 준다.

- 본문 내용엔 높이를 주지 않으므로 세로 사이즈가 불변일 경우 아니면 사용불능.

 

5)float 된 박스들을 감싸는 박스에 가상요소 :after를 주어 해제 한다.

- 아무 부작용 없으며 width 주어야 크로스 브라우징 됨

- 1 다음으로  좋다

 

6. postion 

- 블록을 박스의 위치기준으로 배치하는 기술 

- 주로 컨텐츠를 서로 겹치게 배열하거나 마크업 순서 디자인상의 순서가 다를 경우의 표현에 매우 유용

static	요소를 이동하거나 겹칠 수 없는 원래 그대로의 상태를 말하며 position을 상태하면 바로 기본값
relative	이걸로 지정된 요소는 left와 top 속성으로 이동할수 있으며, absolute 지정된 요소의 부모요소역할
absolute	absolute 지정된 요소는 다른 요소와 겹칠수 있고 left와 top 속성을 이용하여 부모박스를 기준으로 위치를 정해주어야한다
fixed	요소의 위치를 화면 기준으로 지정해주며,

7. left 

-relative / absolute , fixed 박스의 가로 위치를 정할 때 쓰는 속성 

 

8. top

- -relative / absolute , fixed 박스의 세로 위치를 정할 때 쓰는 속성