![[HTML/CSS] CSS3 박스 모델과 응용](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F99B3943B5C0E353C1D)
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