![Page 1: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/1.jpg)
CSS3 응용과레이아웃
![Page 2: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/2.jpg)
위치속성
요소의 위치는 2가지 방법으로 결정
– 절대 위치 좌표: 요소의 X 좌표와 Y 좌표를 설정해 절대 위치를 지정
– 상대 위치 좌표: 요소를 입력한 순서에 따른 상대 위치를 지정
22018-01-04
키워드 설명
static 상대위치좌표설정
relative 초기위치에서상하좌우로이동
absolute 절대위치좌표설정
fixed 화면을기준으로절대위치좌표설정
left right
top
bottom
![Page 3: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/3.jpg)
예제 1. 위치속성
32018-01-04
![Page 4: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/4.jpg)
예제 1. 위치속성
42018-01-04
Z값으로높이변경
문제점
– div 태그가 영역을 차지하지 않음
– 색상이 적용된 상자가 자기 부모를 기준으로 위치를 잡지 않음
![Page 5: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/5.jpg)
예제 2. 위치속성
52018-01-04
자손의 position 속성에 absolute 키워드를 적용하면 부모는 크기를 지정해 영역을 만들어줌
부모에게 relative 속성을 지정
키워드 설명
hidden 영역을벗어나는부분을숨김
scroll 영역을벗어나는부분을스크롤로만듦
![Page 6: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/6.jpg)
그림자속성
태그에 그림자 부여
텍스트와 박스에 부여할 수 있음
https://css3generator.com 을 통해 쉽게 생성 가능
62018-01-04
오른쪽 아래 흐림도 색상
![Page 7: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/7.jpg)
예제 3. 그림자속성
72018-01-04
![Page 8: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/8.jpg)
그레이디언트
두 가지 이상의 색상을 혼합하여 채색
http://www.colorzilla.com/gradient-editor/ 에서 그레이디언트 CSS를 생성할 수 있음
82018-01-04
![Page 9: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/9.jpg)
예제 4. 그레이디언트
92018-01-04
![Page 10: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/10.jpg)
수평정렬하기
float 속성과 overflow 속성을 사용하여 수평 정령
자손에게 float 속성을 지정하고 부모의 overflow 속성을 hidden 으로 적용
– width, height 속성을 입력하지 않고 overflow 속성을 적용하면 자손이 차지하는
너비를 모두 감싸는 특성이 있음
102018-01-04
overflow 적용 overflow 적용 X
![Page 11: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/11.jpg)
예제 5. 수평정렬
112018-01-04
![Page 12: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/12.jpg)
중앙정렬, One True레이아웃
가장 많이 사용하고 있는 레이아웃
1. 행을 독립적으로 생각함
2. 부모 태그에 고정된 너비를 입력
3. 수평 정렬하는 부모 태그의 overflow 속성에 hidden을 적용
4. 자손 태그에 적당한 너비를 입력하고 float 속성을 적용
122018-01-04
![Page 13: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/13.jpg)
예제 6. 중앙정렬, One True레이아웃
132018-01-04
![Page 14: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/14.jpg)
예제7. 고정위치를이용한바생성
142018-01-04
![Page 15: CSS3 응용과레이아웃 - Kangwoncs.kangwon.ac.kr › ~whcho › 2017_Winter › lecture › lecture6.pdf · 2018-01-04 · >CSS3 1 > 4 3 4 . Oil* -1 AH 01 ' DOCTYPE html> html](https://reader033.vdocuments.site/reader033/viewer/2022060411/5f1088287e708231d4499264/html5/thumbnails/15.jpg)
감사합니다