[CSS] 속성 - 박스 모델

 

width : 요소의 가로 너비 지정

height : 요소의 세로 너비 지정

 

 

속성 값	의미	기본값
auto	브라우저가 너비 계산	auto
단위	px, em, cm

 

 

 

 

 

max-width : 요소의 최대 가로 너비 지정

max-height : 요소의 최대 세로 너비 지정

 

min-width : 요소의 최소 가로 너비 지정

min-height : 요소의 최소 세로 너비 지정

 

 

속성 값	의미	기본값
auto	브라우저가 너비 계산	auto
단위	px, em, cm	none(max) / 0(min)

 

 

 

margin : 요소의 외부(바깥) 여백 지정. 단축속성

 

margin-top 위쪽, margin-bottom 아래쪽, margin-left 왼쪽, margin-right 오른쪽 등의 개별속성이 있다.

위, 아래, 좌, 우의 모든 값을 한번에 조절할 수 있는 단축속성

음수 값을 사용할 수 있다.

 

 

속성 값	의미	기본값
단위	px, em, cm	0
auto	브라우저가 너비 계산
%	부모 요소의 width에 대한 비율로 지정

ex)50%로 설정하면 해당 요소의 부모요소의 width 1/2의 값이 설정된다. 

 

 

 

사용법 (위에서부터 시계방향 순으로 적용된다)

margin: 위 우 아래 좌;
margin: 위 [좌,우] 아래;
margin: [위,아래] [좌,우];
margin: [위,아래,좌,우];

.box{
    margin: 10px 20px 30px 40px;
    margin: 10px 20px 40px;
    margin: 10px 40px;
    margin: 10px;
}

 

 

※ 마진 중복(병합, Collapse) : 마진의 특정 값들이 '중복'되어 합쳐지는 현상

 

→오류가 아니며, 이 현상을 우회.응용할 수 있다.

 

 

1. 형제 요소들의 margin-top과 margin-bottom이 만났을 때

 

left, right의 margin이 겹칠 경우 더해진다.

 

반면 top과 bottom의 margin이 겹치면 합쳐진다.

 

 

2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때

 

자식요소의 margin이 부모요소의 margin으로 작동한다

 

 

3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때 : 마찬가지

 

 

 

*마진 중복 계산법

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

양수든 음수든 절대값이 큰 값으로 중복된다고 외우면 편할 듯

 

 

padding : 요소의 '내부(안) 여백'을 지정. 단축속성

 

padding-top 위쪽, padding-bottom 아래쪽, padding-left 왼쪽, padding-right 오른쪽 등의 개별속성이 있다.

사용법은 margin과 동일하다.

 

값	의미	기본값
단위	px, em, cm	0
%	부모요소의 너비에 대한 비율로 지정

 

 

*크기 증가 : 추가된 padding 값만큼 요소의 크기가 커지는 현상

 

 

크기가 커지지 않도록 직접 계산하기(귀찮다)

/* 100 x 100(px) 크기 요소 만들기 */
.box{
  width: 60px; /* 20+20 */
  height: 80px; /* 10+10 */
  background: red;
  padding: 10px 20px;
}

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

/* 100 x 100(px) 크기 요소 만들기 */
.box{
  width: 100px;
  height: 100px;
  background: red;
  padding: 10px 20px;
  box-sizing: border-box; /* 추가 */
}

 

 

border : 요소의 '테두리 선'을 지정. 단축속성

 

 

개별 속성

속성 값	의미	기본값
border-width	선의 두께(너비)	medium
border-style	선의 종류	none
border-color	선의 색상	black

 

 

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
transparent	투명한 선(요소의 배경색이 보임)

 

 

border-top,border-bottom,border-left,border-right 속성이 있고

border-top,bottom,left,right- 로 시작하는, 각각 width,style,color를 지정하는 기타속성이 있다.

 

개별속성의 사용법은 margin,padding과 동일하다

 

 

사용법

.box{
    border: 1px solid red;
}

 

 

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

div{
  width: 100px;
  height: 100px;
  background: orange;
  border: 1px solid;
  box-sizing: border-box; /* 추가 */
}

 

 

 

box-sizing : 요소의 크기 계산 기준을 지정

 

속성 값	의미	기본값
content-box	너비(width, height) 만으로 요소의 크기를 계산	content-box
border-box	너비(width, height)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산

padding-box 속성이 있긴한데 브라우저 호환이 떨어져서 못쓴다고 보면 된다

 

 

 

 

display : 요소의 박스 타입(유형) 설정

 

속성 값	의미	기본값
block	블록 요소( <div> 등)
inline	인라인 요소( <span> 등)
inline-block	인라인-블록 요소(<input> 등)
기타	table, table-cell, flex 등
none	요소의 박스 타입이 없음(요소가 사라짐)

 

inline-block 속성의 경우 기본값은 inline인데 블록요소 처럼 margin,padding의 top,bottom을 사용할 수 있다.

 

 

opacity 적용한 경우 투명도

 

display를 none으로 설정하면 아예 그 요소가 사라진다

 

 

 

예제 (button클릭하면 요소가 사라지게 만들자)

버튼을 클릭할 경우 JS 코드로 hide 클래스를 부여&삭제

 

<button>Toggle</button>
<div>요소</div>

div{
  width: 200px;
  height: 200px;
  background : tomato;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.hide{
  display: none;
}

const el = document.querySelector('div');
const btn = document.querySelector('button');
btn.addEventListener('click',function(){
  if(el.classList.contains('hide')){
    el.classList.remove('hide');
  }else{
    el.classList.add('hide');
  }
});

 

 

 

 

overflow : 요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어. 단축속성

 

속성 값	의미	기본값
visible	넘친 부분을 자르지 않고 그대로 보여줌	visible
hidden	넘친 부분을 안보이게 함
scroll	넘친 부분을 잘라내고, 스크롤바로 볼 수 있게 함 (넘치는 부분이 없는 면에도 스크롤바를 생성함)
auto	넘친 부분이 있는 경우만 잘라내고, 스크롤바로 볼 수 있게 함

 

 

 

 

opacity : 요소의 투명도를 지정

 

속성 값	의미	기본값
숫자	0~1 사이의 실수	1

 

사용 예제

.half{
  opacity: 0.5; /* 반투명 */
}
.transparent{
  opacity: 0; /* 투명 */
}
.box{
  opacity: .75; /* 75% 붙투명, 소수점 앞 0 생략 가능 */
}