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