CSS3 05

위치 속성

- position

-- static : 태그가 위에서 아래로 순서대로 배치

.box{ position:static }

-- relative : 초기 위치 상태에서 상하좌우로 위치 이동

.box{ position:relative }

-- absolute : 절대 위치 좌표를 설정

.box{ position:absolute }

-- fixed : 화면을 기준으로 절대 위치 좌표 설정

.box{ position:fixed }

- z-index

.box{position:absolute; z-index: 100}

-> 숫자가 클 수록 앞에 위치

- 위치 속성 관련 공식

-> position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지 하지 않음 => 문제 발생

 1. h1 태그 2개가 붙어 있다.(div 태그가 영역을 차지하지 않는다.) => 해결 : 자손의 position 속성에 absolute 키워드 적용하면 부모는 height 속성 사용

 2. 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않는다. => 해결 : 자손의 position 속성에 absolute 키워드를 적용하면 부모의 position 속성에 relative 키워드 적용

- overflow 속성

- hidden : 요소를 숨김

.box{overflow: hidden;}

- scroll : 영역을 스크롤로 만듬

등등

-> 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정

-> 절대 위치 좌표(요소의 X좌표와 Y좌표를 설정해 절대 위치 지정), 상대 위치 좌표(요소를 입력한 순서를 통해 상대적으로 위치를 지정)

float 속성

- left : 태그를 왼쪽에 붙입니다.

img{ float: left; }

- right : 태그를 오른쪽에 붙입니다.

- float 속성을 사용한 레이아웃 구성

Header

Navigation

Aside

Section

Footer

-> 그림을 글자 위에 띄우던가 정렬에 쓰임

그림자 속성 CSS3 Generator(http://css3generator.com/) -> 그림자 속성 부여 사이트

- text-shadow

p{text-shadow: 5px(오른쪽) 5px(아래) 5px(흐림도) black(색상);}    

-> 글자 형태에 그림자 부여

- box-shadow

-> 박스 형태에 그림자 부여

-> 태그에 그림자 부여