[CSS]Day5 - CSS 박스 모델

Day5 -CSS 박스 모델-

박스=Block Level 요소 (<div><h1><ul>...)

[1] 박스의 크기를 결정하는 요소

1. 내용 영역의 넓이 --->width, height: px단위, %

특별히 설정되지 않은 경우 넓이는 부모 가득, 높이는 내용만큼.

고정값을 갖기 때문에 한 번 값이 부여되면 늘어나거나 줄어들지 않는다.

2. 테두리 --->border: width(px) style(solid dashed dotted none) color;

-border-top/border-right/border-left/border-bottom

3. 내용 영역~테두리 사이의 여백 --->padding

값을 하나만 지정하는 경우: 상, 하, 좌, 우 동일 지정

값을 두 개 지정하는 경우: 상, 하 / 좌, 우

값을 네 개 지정하는 경우: 상단부터 시계방향

* 박스의 크기는 1, 2, 3번 특성을 모두 더한 값

* 중첩된 <div>구조에서 자식 요소의 크기 속성 총 합은 부모 요소의 width, height보다 클 수 없다.

4. auto 값

* width:auto; 자식요소에 적용하면 부모의 width에서 자신의 padding, border를 뺀 나머지

* height:auto; 자신이 포함하는 내용만큼만 설정(기본값과 동일)

* width에 대해서만 실질적인 100%의 의미로 사용(height는 기본 속성과 같기 때문에 잘 사용하지 않음.

5. 여백없이화면을 가득 채우는 박스 만들기

width, height는 부모 요소를 기준으로 크기를 갖기 때문에 박스->body->html순으로 부모에게도 100% 크기를 부여해야 한다.

html body { width: 100% height: 100%; }

body { padding: 0 margin: 0; }

[2] 박스에 효과주기

1. overflow: 부모 요소에서 자식이 벗어날 경우 부모가 자식을 어떻게 처리할 지에 대한 방법

visible: 벗어나도록 둠

scroll: 스크롤 항상 표시

hidden: 벗어나는 내용 잘라내기

auto: 벗어날 경우에만 스크롤 표시

2. min-height: 박스의 내용이 적을 경우에는 이 사이즈를 유지하다가 내용이 길어지면 height값이 확대

min-width / max-width / min-height / max-height

3. border-radius: 둥근 모서리 처리

border-top-left-radius/ border-top-right-radius / border-bottom-left-radius / border-bottom-right-radius

단일 값 설정: border-radius: 20px;

네 개 값 설정: border-radius: 20px 0 20px 0;

박스 크기의 반만큼 주면 원형이 됨.

이미지에도 적용 가능

4. box-shadow: 박스 그림자

box-shadow: [inset]  x-offset  y-offset  blur  color;

이미지에도 적용 가능

<!-- 색상 표현 방법-->

#rrggbb

rgb (red, green, blue) 0~255

rgba (red, green, blue, alpha) 0~255   --->alpha=투명도(0:투명~1:불투명)

[3] Margin 속성 - 박스의 위치 관련 속성

1개 값: 상, 하, 좌, 우 동일 값

2개 값: 상/하, 좌/우

4개 값: 상단 여백부터 시계방향

margin-top/ margin-right/ margin-left /margin-bottom

음수 값 적용 가능

마주 보는 방향에서 겹침 현상

** 애니메이션을 위한 코드: transition: all 0.3s

* margin:auto값

margin-left:auto;  ---자식 요소가 부모 오른쪽 끝

margin-right:auto;   ---자식 요소가 부모 왼쪽 끝(기본값)

margin-left:auto; margin-right:auto;   ---박스 중앙 정렬

margin:auto;   ---모든 영역에 대한 auto이지만 상/하에 대해서는 동작하지 않는다. 부모의 가로축 중앙에 배치

margin:10px auto;   ---상/하에 대해서 10px공간을 만들고 좌/우는 부모의 가로축 중앙에 배치