programming/html-css

[HTML/CSS] CSS3 레이아웃과 애니메이션


7. CSS3 레이아웃과 애니메이션


가. block과 inline


- block : 한 줄에 한개만 배치

h, p, ul, li, table, div, form 등의 태그에 적용됨

태그 { display:block; }

- inline : 한 줄에 차례대로 배치

a, img, input, span 등의 태그에 적용됨

태그 { display:inline; }


나. 좌표값 지정


태그 { top:100px; left:200px; right:100px; bottom:200px; }


- 정적 위치 설정(static) : 페이지의 정상적인 흐름에 따라 배치

태그 { position:static; }

- 상대 위치 설정(relative) : 정상적인 흐름을 기준으로 상대적인 좌표에 배치

태그 { position:relative; }

- 절대 위치 설정(absolute) : 전체 페이지를 기준으로 절대 좌표에 배치

태그 { position:absolute }

- 고정 위치 설정(fixed) : 스크롤에 관계없이 고정된 좌표에 배치

태그 { position:fixed }


다. 배치 방향(float)


태그 { float:left; } 왼쪽에 배치

태그 { float:right; } 오른쪽에 배치


라. 레이어(z-index) : 레이아웃이 겹칠 경우 사용


태그 { z-index:값 } z-index가 클 경우 위에 표시되고 z-index가 낮으면 가려짐


마. overflow


- hidden : 숨김

태그 { overflow:hidden }

- scroll : 항상 스크롤

태그 { overflow:scroll }

- auto : 늘어나면 스크롤

태그 { overflow:auto }


바. 투명도 (opacity)


태그 { opacity:0.0~1.0 }    0.0 완전투명, 1.0 완전불투명


사. 가시성(visible)


태그 { visibility:visible; }    표시

태그 { visibility:hidden; }    숨김


아. 애니메이션 효과


- 이동(transition)

태그 { transition:전환속성 시간; }

div { transition: width 5s; }    div 태그의 가로길이를 5초동안 변경시킴

- 평행이동(translate)

translate(100px, 0px)    x축 100px, y축 0px 이동
scale(1.2, 1.2)    x축 1.2배, y축 1.2배 확대

rotate(30deg)    30도 회전

- 비틀기(skew)

skew(30deg, 20deg)    x축 30도, y축 20도 비틀기


자. 실습예제


01) block.html (block 요소와 inline 요소)    42;05

02) inline.html (block 요소와 inline 요소)    46;00

08) layout1.html (div를 이용한 화면 배치 방법)    01;19;27

09) ch07/css/style1.css    01;28;24

10) layout2.html (시맨틱 태그를 이용한 화면 배치)    01;21;18

- 시맨틱 태그 : 태그의 이름만 보고도 태그의 역할을 알 수 있는 태그

<header> : 웹사이트의 전체 혹은 일부의 머리말에 해당하는 부분

<hgroup> : 제목과 부제목을 묶어줌. 문서의 중요 뼈대를 구성

<nav> : 문서의 메뉴를 구성할 때 사용. 어느 위치에나 사용 가능

<article> : 독립적인 컨텐츠

<section> : 세부적인 컨텐츠

<aside> : 사이드바

<footer> : 저작권 정보나 제작자 정보

<figure> : 그림, 도표

<figcaption> : 그림, 도표의 설명글

<mark> : 텍스트 강조 표시

<time> : 날짜/시간 정보 기록

<address> : 이름, 주소, 이메일, 연락처 등


11) table-css.html (표 스타일)    01;38;34

12) table-align.html (<td>의 수직정렬 방법)    01;38;40
13) opacity.html (투명도)    01;41;42
15) css_anim.html (애니메이션 효과)    01;44;16
16) anim_delay.html (애니메이션 지연 효과)    01;56;22
18) key_anim.html (키프레임을 이용한 애니메이션)    02;04;12
19) ball_anim.html (튀어오르는 공 애니메이션)    02;07;30