재유's

[CSS] 박스 모델(1) - border, overflow, shadow 본문

IT Story/　: : HTML5

[CSS] 박스 모델(1) - border, overflow, shadow

Stella_NY 2019. 1. 17. 11:53

박스란?

 block-level요소를 의미하는 것으로 가장 대표적인 요소는 <div>가 있다.


박스 크기를 구성하는 기본 속성

속성

설명

값

 비고

width

 내용 영역의 가로 폭

 px단위, %단위

 부모의 width, height를 기준으로 한다.

heifht

 내용 영역의 세로 높이

 px단위, %단위

border

 박스의 테두리

 굵기 종류 색상

 

padding

 테두리와 내용영역 사이의 여백

 여백 사이즈에 대한 px단위

 


border 속성에서의 종류값

속성

설명

none

 투명

solid

 직선

dotted

 점선

dashed

 끊긴선


border 값의 세분화

- 위치에 따른 구분 : border-top, border-left, border-bottome, border-right

- 속성에 따른 구분 : border-width, border-color, border-style (잘 사용하지 않음)


padding 값의 설정

- 하나의 값 : 상, 하/좌, 우 모두 같은 값이 부여된다.

- 두 개의 값 : 첫 번째 값은 상, 하를 의미. 두 번째 값은 좌, 우를 의미한다.

- 네 개의 값 : 상단 부터 시계방향으로 회정하면서 부여된다.


박스의 크기는 관련 속성들의 총합으로 이루어 진다.

테두리와 여백은 내용영역(width, height)의 크기 바깥으로 형성된다.

- 가로 : border-left + padding-left + width + padding-right + border-right

- 세로 : border-top + padding-top + height + padding-bottom + border-bottom



중첩 관계에서의 박스 크기

1. 자식요소의 크기 총 합은 부모 요소의 width, height를 벗어날 수 없다.

2. 자식요소의 width, height를 %로 부여할 경우 부모의 width, heigth를 기준으로 한다.


auto 값의 사용

1. width 속성에 사용하는 경우.

- 부모 요소의 width에서 현재 자신의 padding, border 크기를 뺀 나머지를 자동으로 계산하여 갖는다.

=> 실질적인 100% 처리 효과

2. height 속성에 사용하는 경우

- 자신이 포함하고 있는 내용 만큼 높이를 구성한다. (박스의 기본 특성)


화면을 가득 채우는 박스 만들기

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

1. <body>태그가 갖는 기본 여백을 제거한다.

body{
    padding: 0;
    margin: 0;
}


2. 박스에게 width, height를 100%로 부여하기 위해서는 부모요소의 크기르 부여해야 기준으로 삼을 수 있다.

박스의 부모 요소는 <body> 태그이고 <body>의 부모 요소는 <html> 이므로 이 두 요소에게 모두 크기를 부여한다.

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



박스에 효과 주기

overflow 속성

자신을 벗어나는 내용에 대한 처리 방법 지정

속성

설명

visible

 기본값. 벗어난 내용이 부모 요소를 벗어나도록 그대로 둔다.

scroll

 벗어나는 내용에 대하여 스크롤 처리한다.

이 속성이 부여되면 부모 요소는 항상 스크롤바의 트랙을 표시한다.

hidden

 벗어나는 내용에 대하여 화면에 표시되지 않도록 잘라낸다.

auto

 내용이 벗어나지 않을 경우에는 박스의 기본 모양대로 표시되지만, 

내용이 벗어날 경우에는 scroll처리 된다.


- overflow속성은 x축, y축을 모두 처리한다.

- 가로 혹은 세로 방향만 처리 하고자 하는 경우 overflow-x, overflow-y 속성을 사용할 수 있다.


박스의 가변 크기 지정

속성

설명

min-width

 최소 넓이 지정.

내용이 없더라도 이 속성이 지정한 만큼 넓이가 보장된다.

max-width

 최대 넓이 지정. 

이 속성의 값 이상 커지지 않는다.

min-height

 최소 높이 지정.

max-height

 최대 높이 지정.



박스 그림자 효과

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


x-offset : 본체와 그림자의 가로축 거리 ( px 단위 )

y-offset : 본체와 그림자의 세로축 거리 ( px 단위 )

blur-radius : 그림자의 번짐 정도 ( px 단위 )

color : 그림자의 색상


그림자 관련 값들은 콤마로 구분하여 여러개 지정할 경우 포토샵 레이어 처럼 처리할 수 있다.


inset이 없는 경우

그림자가 박스 뒤에 생성된다.(DropShadow 효과)

▶ x-offset : +값인 경우 박스의 오른쪽에 생성된다.

▶ y-offset : +값인 경우 박스의 아래쪽에 생성된다.


inset이 적용된 경우

그림자가 박스의 안쪽으로 생성된다.(InnerShadow 효과)

▶ x-offset : +값인 경우 박스의 왼쪽에 생성된다.

▶ y-offset : +값인 경우 박스의 위쪽에 생성된다.

저작자표시

'IT Story > 　: : HTML5' 카테고리의 다른 글

[CSS] 박스 모델(2) - margin, display  (0) 2019.01.18
[CSS] rgba 색상  (0) 2019.01.17
[CSS] 문단 관련 속성  (0) 2019.01.16
[CSS] 글자 속성  (0) 2019.01.16
[CSS] CSS 구체성 단위  (0) 2019.01.16
공유하기 링크
'IT Story/　: : HTML5' Related Articles more
Comments