2017. 2. 23. 20:15ㆍWork/CSS
- 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
-> 박스 형태에 그림자 부여
-> 태그에 그림자 부여