[CSS] CSS 속성 - 박스 모델
CSS 속성 - 박스 모델
박스 모델
width, height
width
요소의 가로 너비를 지정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
auto | 브라우저가 너비를 계산 | auto |
단위 px, em, cm 등 단위로 지정 |
height
요소의 세로 너비를 지정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
auto | 브라우저가 너비를 계산 | auto |
| 단위 | px, em, cm 등 단위로 지정 |
예제
<div></div>
<span></span>
div { /* 레이아웃 다룰 때 씀 */
width: auto; /* 100%에서 시작 */
height: auto; /* 0에서 시작 */
background: tomato;
}
span { /* 텍스트를 다룰 때 씀 */
width: auto; /* 0에서 시작 */
height: auto; /* 0에서 시작 */
background: tomato;
}
max-width, min-width, max-height, min-height
max-width
요소의 최대 가로 너비를 지정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 단위 | px, em, % 등 단위로 지정 | none |
auto | 브라우저가 너비를 계산 |
min-width
요소의 최소 가로 너비를 지정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 단위 | px, em, % 등 단위로 지정 | 0 |
auto | 브라우저가 너비를 계산 |
max-height
요소의 최대 세로 너비를 지정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 단위 | px, em, % 등 단위로 지정 | none |
auto | 브라우저가 너비를 계산 |
min-height
요소의 최소 세로 너비를 지정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 단위 | px, em, % 등 단위로 지정 | 0 |
auto | 브라우저가 너비를 계산 |
예제
<div class="parent">
<div class="child"></div>
</div>
.parent {
width: 500px;
height: 300px;
border: 4px solid tomato;
margin: 20px;
}
.child {
max-width: 400px;
min-width: 200px;
/* width: 100%; */ /* 100% = auto */
height: 200px;
background: orange;
}
margin
margin
요소의 ‘외부(바깥) 여백’을 지정’, 단축 속성을 갖고 있음.
음수 값을 사용할 수 있습니다.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 단위 | px, em, cm 등 단위로 지정 | 0 |
auto | 브라우저가 너비를 계산 | |
% | 부모 요소의 너비에 대한 비율로 지정 |
사용법
margin: 위 우 아래 좌;
margin: 위 [좌, 우] 아래;
margin: [위, 아래] [좌, 우];
margin: [위, 아래, 좌, 우];
.box {
margin: 10px 20px 30px 40px; /* 시계방향으로 해석 */
margin: 10px 20px 40px; /* 위에서 아래로 해석 */
margin: 10px 40px;
margin: 10px;
}
예제
<div class="parent">
<div class="child"></div>
</div>
.parent {
width: 400px;
height: 200px;
border: 4px solid red;
}
.child {
width: 100px;
height: 100px;
border: 4px solid;
margin: 50%; /* 부모 요소 가로 너비의 50%를 뜻함(세로 너비 X) */
}
maring 개별 속성
- margin-top : 요소의 ‘외부(바깥) 위쪽 여백’을 지정,
개별속성을 갖고 있다. - margin-right : 요소의 ‘외부(바깥) 오른쪽 여백’을 지정,
개별속성을 갖고 있다. - margin-bottom : 요소의 ‘외부(바깥) 아래쪽 여백’을 지정,
개별속성을 갖고 있다. - margin-left : 요소의 ‘외부(바깥) 왼쪽 여백’을 지정,
개별속성을 갖고 있다.
예제
.box1 {
margin: 10px 20px 30px 40px; /* 단축 속성 */
}
.box2 {
/* 개별 속성 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
margint - 중복(병합)(Collapse)
마진의 특정 값들이 ‘중복’되어 합쳐지는 현상
- 형제 요소들의
margin-top과margin-bottom이 만났을 때 - 부모 요소의
margin-top과 자식 요소의margin-top이 만났을 때 - 부모 요소의
margin-bottom과 자식 요소의margin-bottom이 만났을 때
‘마진 중복’은 버그(오류)가 아닙니다. 현상을 우회하거나 응용할 수 있습니다.
예제1
형제 요소들의 margin-top과 margin-bottom이 만났을 때 마진 중복이 발생
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
.parent {
}
.child {
width: 100px;
height: 100px;
background: tomato;
/* float: left; */
margin: 20px;
}
예제2
부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때
<div class="parent">
<div class="child"></div>
</div>
.parent {
width: 300px;
height: 200px;
background: cyan;
/* margin-top: 50px; */
}
.child {
width: 100px;
height: 100px;
background: tomato;
margin-top: 50px;
}
마진 중복 계산법
마진 중복 현상이 발생시, 중복 값을 계산하는 방법
| 조건 | 요소A 마진 | 요소B 마진 | 계산법 | 중복 값 |
|---|---|---|---|---|
| 둘 다 양수 | 30px | 10px | 더 큰 값으로 중복 | 30px |
| 둘 다 음수 | -30px | -10px | 더 작은 값으로 중복 | -30px |
| 각각 양수와 음수 | -30px | 10px | -30 + 10 = -20 | -20px |
padding
padding
요소의 ‘내부(안) 여백’을 지정, 단축을 갖고 있음.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 단위 | px, em, cm 등 단위로 지정 | 0 |
% | 부모 요소의 너비에 대한 비율로 지정 |
사용법
padding: 위 우 아래 좌;
padding: 위 [좌, 우] 아래;
padding: [위, 아래] [좌, 우];
padding: [위, 아래, 좌, 우];
.box {
padding: 10px 20px 30px 40px; /* 시계방향으로 해석 */
padding: 10px 20px 40px; /* 위에서 아래로 해석 */
padding: 10px 40px;
padding: 10px;
}
padding 개별 속성
- padding-top : 요소의 ‘내부(안) 위쪽 여백’을 지정,
개별속성을 갖고 있다. - padding-right : 요소의 ‘내부(안) 오른쪽 여백’을 지정,
개별속성을 갖고 있다. - padding-bottom : 요소의 ‘내부(안) 아래쪽 여백’을 지정,
개별속성을 갖고 있다. - padding-left : 요소의 ‘내부(안) 왼쪽 여백’을 지정,
개별속성을 갖고 있다.
padding - 크기 증가
추가된 padding 값만큼 요소의 크기가 커지는 현상
크기가 커지지 않도록 직접! 계산
/* 100 x 100 (px) 크기의 요소 만들기 */
.box {
width: 60px; /* +40px */
height: 80px; /* +20px */
background: red;
padding: 10px 20px;
}
padding이 추가된 값만큼width와height값을 다시 계산합니다.
크기가 커지지 않도록 자동! 계산
/* 100 x 100 (px) 크기의 요소 만들기 */
.box {
width: 100px;
height: 100px;
background: red;
padding: 10px 20px;
box-sizing: border-box;
}
직접 계산하지 않고
box-sizing: border-box;를 추가합니다.
예제
<div>
Hello world!
</div>
div {
width: 100px;
height: 100px;
background: tomato;
padding: 20px;
box-sizing: border-box; /* 가운데 컨텐트 박스가 생성됨 */
}
border
border
요소의 ‘테두리 선’을 지정, 단축 속성을 갖고 있음.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
border-width | 선의 두께(너비) | medium |
border-style | 선의 종류 | none |
border-color | 선의 색상 | black |
사용법
border: 두께 종류 색상;
.box {
border: 1px solid red;
}
border 개별 속성
border-width
선의 두께(너비)를 지정, 개별 속성이면서 추가로 단축 속성을 갖고 있다.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
medium | 중간 두께 | medium |
thin | 얇은 두께 | |
thick | 두꺼운 두께 | |
| 단위 | px, em, cm 등 단위로 지정 |
사용법
border-width: 위 우 아래 좌;
border-width: 위 [좌, 우] 아래;
border-width: [위, 아래] [좌, 우];
border-width: [위, 아래, 좌, 우];
.box {
border-width: 10px 20px 30px 40px; /* 시계방향으로 해석 */
border-width: 10px 20px 40px; /* 위에서 아래로 해석 */
border-width: 10px 40px;
border-width: 10px;
}
border-style
선의 종류를 지정, 개별 속성이면서 추가로 단축 속성을 갖고 있다.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
none | 선 없음 | none |
hidden | 선 없음과 동일(table 요소에서 사용) | |
solid | 실선(일반선) | |
dotted | 점선 | |
dashed | 파선(하이픈으로 된 것 같은) | |
double | 두 줄선 | |
groove | 홈이 파여있는 모양(선) | |
ridge | 솟은 모양(선, groove의 반대) | |
inset | 요소 전체가 들어간 모양(선) | |
outset | 요소 전체가 나온 모양(선) |
사용법
border-style: 위 우 아래 좌;
border-style: 위 [좌, 우] 아래;
border-style: [위, 아래] [좌, 우];
border-style: [위, 아래, 좌, 우];
.box {
border-style: solid dotted doule inset; /* 시계방향으로 해석 */
border-style: solid dotted inset; /* 위에서 아래로 해석 */
border-style: solid inset;
border-style: solid;
}
border-color
선의 색상을 지정, 개별 속성이면서 추가로 단축 속성을 갖고 있다.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 색상 | 선의 색상을 지정 | black |
transparent | 투명한 선(요소의 배경색이 보임) |
기타 속성
| 값 | 의미 | 사용 값 |
|---|---|---|
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 | 오른쪽 선의 색상 | 색상 |
크기가 커지지 않도록 직접! 계산
/* 100 x 100 (px) 크기의 요소 만들기 */
.box {
width: 98px;
height: 98px;
background: orange;
border: 1px solid black;
}
border가 추가된 값만큼width와height값을 다시 계산합니다.
크기가 커지지 않도록 자동! 계산
/* 100 x 100 (px) 크기의 요소 만들기 */
.box {
width: 100px;
height: 100px;
background: orange;
border: 1px solid black;
box-sizing: border-box;
}
직접 계산하지 않고
box-sizing: border-box;를 추가합니다.
box-sizing
요소의 크기 계산 기준을 지정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
content-box | 너비(width, height)만으로 요소의 크기를 계산 | content-box |
border-box | 너비(width, height)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산 |
display
요소의 박스 타입(유형)을 설정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
block | 블록 요소(<div> 등) | |
inline | 인라인 요소(<span>등) | |
inline-block | 인라인-블록 요소(<input>등) | |
| 기타 | table, table-cell, flex 등 | |
none | 요소의 박스 타입이 없음(요소가 사라짐) |
예제1
<span></span>
<div></div>
span {
/* display: inline; */ /* 생략 되어 있음 */
display: block; /* 블록 요소 특성으로 바꾸어주면 화면에 상태가 나타남 */
width: 100px;
height: 100px;
background: tomato;
}
div {
/* display: block; */ /* 생략 되어 있음 */
display: inline; /* 인라인 요소 특성으로 바꾸어주면 화면에 상태가 나타남 */
width: 100px;
height: 100px;
background: tomato;
}
예제2
<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 | 넘친 부분이 있는 경우만 잘라내고 스크롤바를 이용하여 볼 수 있도록 함 |
예제
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
width: 300px;
height: 250px;
border: 4px solid black;
/* overflow: visible; 넘친거 보여줌 */
/* overflow: hidden; 넘친거 자름 */
/* overflow: scroll; 넘친부분 가로세로 스크롤로 볼 수 있음 */
overflow: auto; /* 넘친부분만 스크롤이 생김 */
}
.parent .child {
width: 100px;
height: 100px;
background: tomato;
border: 4px solid red;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
}
opacity
요소의 투명도를 지정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 숫자 | 0부터 1사이의 소수점 숫자 | 1 |
사용법
opacity: 투명도;
- 1 : 불투명
- 0 : 투명
.half {
opacity: 0.5; /* 50% 투명도, 반투명 */
}
.transparent {
opacity: 0; /* 0% 투명도, 투명 */
}
.box {
opaacity: .75; /* 75% 투명도, 반투명 */
}
예제
<div class="parent">
<div class="child">123</div>
</div>
.parent {
width: 300px;
height: 250px;
background: blue;
}
.parent .child {
width: 150px;
height: 100px;
background: tomato;
font-size: 50px;
opacity: .5;
}
참고
패스트캠퍼스(박영웅 강사님) : 올인원 패키지 : 프론트엔드 개발 with React.js
개발자님들 덕분에 많이 배울 수 있었습니다. 감사의 말씀 드립니다.
