[3주차] 4. CSS 박스 모델 관련 속성

박스 모델

margin

- 요소의 바깥쪽 여백 지정(단축속성)

- top, bottom, left, right 개별적인 속성 지정 가능(이것을 한번에 아우르는 것이 단축속성)

- 음수 negative values의 값도 사용할 수 있음(여백이 안쪽이 들어오는 것처럼)

- 단위는 px, em, cm 등 쓸 수 있고 기본값은 0

- auto(브라우저가 여백 계산 출력, 특수한 경우에 사용), %(margin이 들어가는 요소의 부모요소의 width에 대한 비율로 지정)도 사용 가능

- 단축 속성들은 개별 속성을 대부분 갖고있다.

1. 단축 속성

- margin : 값; -> [위 아래 좌우]의 값이 다 하나의 값이다.

- margin : 위의 값, 오른쪽 값, 아래 값, 왼쪽 값; ->위에서부터 시계방향으로 돌면서 값이 사용됨

- margin : 위의 값, 좌우값, 아래 값; ->값이 세 개일 경우에는 위에서부터 아래로 해석하면 됨

- margin : 위아래값, 좌우값;

 

2. 개별 속성(되도록이면 단축속성을 쓰는 것을 추천한다.)

- margin-top : margin 위쪽 지정

- margin-right : margin 오른쪽 지정

- margin-bottom : margin 아래쪽 지정

- margin-left : margin 왼쪽 지정

 

3. margin 중복(병합, collapse)

- margin의 특정 값들이 중복되어 합쳐지는 현상

- 버그가 아니다. 이걸 활용해서 쓸 수 있고 우회(padding속성 활용)하거나 해결해서 사용할 수 있다.

- 두개 이상의 형제요소가 있고 형제요소들의 margin-top과 margin-bottom이 만났을 때

  -> 위와 아래가 만나는 margin은 중복 예를 들어 첫번째 요소의 아래 margin이 20이고 두번째 요소의 margin이 20일 때 그사이의 margin의 값은 40이 아니라 20이 됨

- 부모요소들의 margin-top과 자식요소 margin-top이 만났을 때(같은 방향)

 -> 부모요소의 margin-top이 시작하는 면과 자식요소의 margin top이 시작하는 면이 만나면 자식요소의 margin top이 부모요소의 margin-top으로 사용됨

- 부모요소들의 margin-bottom과 자식요소 margin-bottom이 만났을 때(같은 방향)

 -> 부모요소가 가지고 있는 margin-bottom의 면과 자식요소가 가지고 있는 margin-bottom의 면이 만났을 때 자식요소에 아래 쪽에 margin-bottom이 들어간다면 이것은 부모요소의 margin-bottom으로서 사용됨

- 계산법

  -> margin값이 음수일 경우 음수의 절대값만큼 두 요소가 겹쳐져 있는 상태

조건	요소A margin	요소B margin	계산법	중복 값
둘 다 양수	30px	10px	더 큰 값으로 중복	30px
둘 다 음수	-30px	-10px	더 작은 값으로 중복	-30px
각각 양수와 음수	-30px	10px	-30+10=-20	-20px

 

See the Pen margin by soyun (@ssoyuni) on CodePen.

 

---

padding

- 요소 내부 여백 설정(단축속성)

- 단위는 px, em, cm 등 쓸 수 있고 기본값은 0

- %(margin이 들어가는 요소의 부모요소의width에 대한 비율로 지정)도 사용 가능

 

1. 단축 속성(속기형)

- padding: 값; -> [위 아래 좌우]의 값이 다 하나의 값이다.

- padding: 위의 값, 오른쪽 값, 아래 값, 왼쪽 값; ->위에서부터 시계방향으로 돌면서 값이 사용됨

- padding: 위의 값, 좌우값, 아래 값; ->값이 세 개일 경우에는 위에서부터 아래로 해석하면 됨

- padding: 위아래값, 좌우값;

 

2. 개별 속성(특정한 값만 입력하고 싶을 때 사용)

- padding-top : padding 위쪽 지정

- padding -right : padding 오른쪽 지정

- padding -bottom : padding 아래쪽 지정

- padding -left : padding 왼쪽 지정

 

3. 크기증가

- 추가된 padding 값만큼 요소의 크기가 커지는 현상(그래서 커진 요소의 너비도 계산할 줄 알아야함)

- 크기가 커지지 않도록 직접 계산

<div class="box"></div>

<style>

/* 100 x 100(px) 크기의 요소 만들기 */

.box {

  width: 60px; /*+40px*/

  height: 80px;/*+20px*/

  background: red;

  padding: 10px 20px;

}

</style>

 

- 크기가 커지지 않도록 자동계산

<div class="box"></div>

<style>

/* 100 x 100(px) 크기의 요소 만들기 */

.box {

  width: 100px;

  height: 100px;

  background: red;

  padding: 10px 20px;

  box-sizing: border-box; /*가로사이즈 100에 맞추고 padding도 넣겠다. padding을 제외한 content box 너비를 자동 계산*/

}

</style>

 

See the Pen padding by soyun (@ssoyuni) on CodePen.

---

border

- 요소의 테두리 선(바깥 쪽 외곽에 있는 선)을 만들어냄

- 두께, 종류, 색상을 입력해야만 선이 만들어진다.

 

1. 단축속성

- border: 두께 종류 색상; (종류만 입력해도 선이 나오긴 함)

- border-width : 위 우 아래 좌; -> margin, padding 등 처럼 (전체, 위(좌우)아래, 시계방향, 위아래 좌우) 각 면의 선 두께 지정 가능

- border-style : 위 우 아래 좌; -> 각 면의 선 스타일 지정 가능

- border-color : : 위 우 아래 좌; -> 각 면의 선 색 지정 가능

 

2. 개별속성

- border-width : 선의 두께(너비), 기본값은 medium

 -> medium(중간두께), thin(얇은 두께), thick(두꺼운 두께), 단위(px ,em ,cm 등)로 지정

- border-style : 선의 종류, 기본값은 none

 -> none: 선 없음,

hidden: 선 없음과 동일하고 table 요소에서만 사용,

solid: 실선(일반선),

dotted : 점선(진짜 점으로만 이루어져 있음),

dashed : 파선(일반적으로 우리가 알고있는 점선),

double : 두 줄선, groove : 홈이 파여있는 모양(선) 판화같이 외곽선을 따라서 파여져있는 모양새,

ridge : 솓은 모양(선, groove의 반대) 외곽선이 튀어나와 보이는 개념,

inset : 요소 전체가 들어간 모양(선) 모양이 전체적으로 들어가 보임,

outset : 요소 전체가 나온 모양(선)

- border-color : 선의 색상, 기본값은 black

 -> #으로 시작하는 색상코드, rgb 등 알고있는 색상 개념을 쓰면 된다. cmyk 같은 인쇄할 때 쓰는 색상은 사용 불가, transparent : 투명한 선의 색상(요소의 배경색 보임) 두께는 지정하는 데 색 안넣고 싶을 때 사용

 

3. 기타 속성(개별 속성, 파생된 개념)

속성	의미	사용값
border-top	위쪽 선	두께 종류 색상
border-top-width	위쪽 선의 두꼐	두께
border-top-style	위쪽 선의 종류	종류
border-top-color	위쪽 선의 색상	색상
border-bottom	아래쪽 선	두께 종류 색상
border-bottom-width	아래쪽 선의 두께	두께
border-bottom-style	아래쪽 선의 종류	종류
border-bottom-color	아래쪽 선의 색상	색상
border-left	왼쪽 선	두께 종류 색상
border-left-width	왼쪽 선의 두꼐	두께
border-left-style	왼쪽 선의 종류	종류
border-left-color	왼쪽 선의 색상	색상
border-right	오른쪽 선	두께 종류 색상
border-right-width	오른쪽 선의 두께	두께
border-right-style	오른쪽 선의 종류	종류
border-right-color	오른쪽 선의 색상	색상

 

4. 크기 증가

- 요소의 외곽선이기에 선의 두께가 늘어날수록 그 요소의 크기도 같이 늘어가는 개념

- 직접 계산 : 선의 두께 + 요소 크기 고려하여 width와 height 직접 계산

- 자동 계산 : width과 height 값 원하는 값으로 지정해놓고 box-sizing : border-box; 이용

 

See the Pen border by soyun (@ssoyuni) on CodePen.

---

box-sizing

- 요소의 크기 계산 정하는 기준 설정시 사용

- content-box : 계산요소가 가지고 있는 content box 영역이다. 기본 값으로 너비(width, height) 만으로 요소 크기

- border-box : content box+padding 영역+border의 너비이다. 너비(width, height)에 안쪽 여백(padding)과 테두리 선 (border)를 포함하여 요소의 크기 계산, 계산 자동으로 하고싶을 시 사용

- padding-box가 있긴 하지만 브라우저 호환성이 떨어져 사실상 못사용한다.

 

See the Pen box-sizing by soyun (@ssoyuni) on CodePen.

 

---

display

- 화면에 보여지는 특성 설정

- block : 블록 요소(div 태그 등)

- inline : 인라인 요소(span 태그 등)

- inline-block : 인라인- 블록 요소(input 태그 등 ), 기본적인 특징은 인라인(수평으로 쌓임)인데 블록의 특성을 추가적으로 가지고 있다.(가로 세로 값을 가질 수 있고 margin, padding의 top과 bottom 사용 가능)

- 기타 : table, table-cell, flex 등

- none : 화면에 보이는 특성이 없기 때문에 화면에서 요소가 사라지게 됨 , 존재하지만 안보이는 개념이 아니라 완벽하게 존재하지 않는 개념

 

See the Pen display by soyun (@ssoyuni) on CodePen.

---

overflow

- 요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때 내용의 보여짐을 어떻게 할 것인지 제어

- 부모요소로부터 자식요소가 넘친 경우이므로 부모요소에 overflow 속성 작성

- visible : 기본값으로 넘친 부분을 자르지 않고 그대로 보여줌

- hidden : 넘친 부분을 잘라내고, 보이지 않도록 함

- scroll : 넘친 부분을 잘라내고, 위아래 좌우 스크롤바를 이용하여 볼 수 있도록 함(넘침의 유무와 상관없이), 스크롤 할 게 없는데도 불구하고 있는게 불편할 수 있다. 언제든지 스크롤 될 수 있어 바 영역을 미리 설정해놓는 개념으로 쓸 수 있다.

 ex) 수직으로만 넘쳤을 경우에도 수직 스크롤바는 물론, 수평 스크롤바도 생성한다.

- auto : 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함, 많은 경우에 사용

 

See the Pen overflow by soyun (@ssoyuni) on CodePen.

---

opacity

- 요소의 투명도를 설정할 때 사용

- opacity : 투명도 (1: 불투명, 0: 요소가 있는 데 안보임)

- opacity 범위를 설정하는 값으로 숫자 입력(0~1), 기본값은 1(불투명)

   ex) opacity: 0.5 -> 50% 투명도를 가진 반투명

- opacity: 0은 화면에 존재하지만 단지 보이지 않는 것이고 display: none은 화면에 보여지는 특성 자체가 없어지면서 화면에서 완벽하게 사라진 개념(존재하지 않는 개념) -> 확실히 구분해서 사용할 수 있어야 한다.

 

See the Pen by soyun (@ssoyuni) on CodePen.

---

Tips

- 개발자 도구로 content box 크기 확인 : F12>select 도구로 box 클릭>computed>파란색 영역이 content box