Web & Internet [06] CSS3 응용과 레이아웃

Presentation on theme: "Web & Internet [06] CSS3 응용과 레이아웃"— Presentation transcript:

1 Web & Internet [06] CSS3 응용과 레이아웃
2018년 10월 15일 박성진

2 위치 속성 요소의 위치는 2가지 방법으로 결정 절대 위치 좌표: 요소의 X 좌표와 Y 좌표를 설정해 절대 위치를 지정
상대 위치 좌표: 요소를 입력한 순서에 따른 상대 위치를 지정 키워드 설명 static 상대 위치 좌표 설정 relative 초기 위치에서 상하좌우로 이동 absolute 절대 위치 좌표 설정 fixed 화면을 기준으로 절대 위치 좌표 설정 top left right bottom

3 예제 1. 위치 속성 z 값으로 높이 변경 문제점 <div> 태그가 영역을 차지하지 않음
색상이 적용된 상자가 자기 부모를 기준으로 위치를 잡지 않음

4 예제 2. 위치 속성 자손의 position 속성에 absolute 키워드를 적용하면 부모는 크기를 지정해 영역을 만들어줌
부모에게 relative 속성을 지정 키워드 설명 hidden 영역을 벗어나는 부분을 숨김 scroll 영역을 벗어나는 부분을 스크롤로 만듦 DBLab Template by Suan

5 그림자 속성 태그에 그림자 부여 텍스트와 박스에 부여할 수 있음
을 통해 쉽게 생성 가능 오른쪽 아래 흐림도 색상 DBLab Template by Suan

6 예제 3. 그림자 속성 DBLab Template by Suan

7 그레이디엔트 (Gradient) 두 가지 이상의 색상을 혼합하여 채색
에서 그레이디언트 CSS를 생성할 수 있음 DBLab Template by Suan

8 예제 4. 그레이디엔트 에서 그레이디언트 CSS를 생성한 것을 복사 및 붙이기 DBLab Template by Suan

9 수평 정렬하기 float 속성과 overflow 속성을 사용하여 수평 정령
자손에게 float 속성을 지정하고 부모의 overflow 속성을 hidden 으로 적용 width, height 속성을 입력하지 않고 overflow 속성을 적용하면 자손이 차지하는 너비를 모두 감싸는 특성이 있음 Overflow 적용: O Overflow 적용: X DBLab Template by Suan

10 예제 5. 수평 정렬 DBLab Template by Suan

11 중앙 정렬, One True 레이아웃 가장 많이 사용하고 있는 레이아웃 DBLab Template by Suan

12 예제 6. 중앙 정렬, One True 레이아웃 DBLab Template by Suan

13 예제 7. 고정 위치를 이용한 바 생성 DBLab Template by Suan