[HTML/CSS] CSS3 박스 모델과 응용
programming/html-css

[HTML/CSS] CSS3 박스 모델과 응용


6. CSS3 박스 모델과 응용


6.1 박스 모델


 - 웹 브라우저는 HTML 내의 요소들을 사각형으로 간주하고 웹 페이지에 출력시킴, 요소들을 박스 형태로 그리는 것을 박스 모델이라 함

 - 각 박스는 margin(바깥쪽 여백), border(경계선), padding(안쪽 여백)


  


6.2 경계선(border)


 - 경계선의 스타일 : border-style: none, dotted, dashed, solid, double 등

 - 경계선의 폭 : border-width

 - 경계선의 색상 : border-color

 - 둥근 경계선 : border-radius


6.3 요소의 크기 설정


 - 가로 길이 : width

 - 세로 길이 : height


6.4 여백 설정


 * 바깥쪽 여백 설정

  margin-top

  margin-right

  margin-bottom

  margin-left


 - 상하좌우 여백 설정(시계방향으로)

  margin: top right bottom left

  margin: 10 20 30 40;


 - 상하좌우 여백을 동일하게 설정

  margin: 10;


 * 안쪽 여백 설정

  padding-top

  padding-right

  padding-bottom

  padding-left


마. 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