일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 자바스크립트 onclick
- 오블완
- CSS
- 자바스크립트 실행 컨텍스트
- javascript opreator
- 자바스크립트 생성자 함수
- 자바스크립트 상속
- css3
- 자바스크립트 innerhtml
- javascript opreators
- 자바스크립트 dom 문법
- css position
- 자바스크립트 dom의 목적
- html 주석
- 웹 개발 트렌드
- 프론트엔드
- HTML
- 자바스크립트 클래스
- 자바스크립트 스코프
- 자바스크립트 innertext
- css 포지션
- front-end
- 자바스크립트
- 자바스크립트 scope
- 자바스크립트 연산자
- 티스토리챌린지
- html 코드
- javascript
- css display
- 자바스크립트 반복문
- Today
- Total
Multi Developer SuHo
CSS 박스 모델(Box Model) && 박스 사이즈(box-sizing) 본문
안녕하세요~ 오늘은 CSS에서 박스 모델(Box Model)과 박스 사이즈(box-sizing)에 대해 알아보겠습니다. 먼저 박스 모델부터 살펴보겠습니다.
글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.
박스 모델(Box Model) -> CSS에서 박스 모델(Box Model)은 웹 페이지의 레이아웃을 구성하는 기본적인 개념입니다. HTML 요소를 하나의 '박스'로 생각하고, 이 박스의 크기, 위치, 여백 등을 조절하는 방법을 제공합니다.
CSS 박스 모델은 웹 페이지 상의 모든 요소를 사각형 박스로 간주하는 개념입니다. 이 박스는 4가지 주요 구성 요소로 이루어져 있습니다
1. 콘텐츠(Content): 이 부분은 텍스트, 이미지 등 실제 내용을 포함하는 영역입니다. 콘텐츠의 너비와 높이는 'width'와 'height' 속성으로 조절할 수 있습니다.
2. 패딩(Padding): 패딩은 콘텐츠와 테두리 사이의 공간을 의미합니다. 패딩은 요소 내부의 여백을 제공하여, 콘텐츠가 테두리에 너무 붙지 않게 합니다.
3. 테두리(Border): 테두리는 요소를 둘러싸는 선을 의미합니다. 테두리의 너비, 스타일, 색상을 설정할 수 있습니다.
4. 마진(Margin): 마진은 요소와 그 주변 요소 사이의 공간을 의미합니다. 마진은 요소 간의 간격을 조절하는데 사용됩니다.
다음은 박스 사이즈(box-sizing)입니다.
CSS의 'box-sizing' 속성은 요소의 전체 크기를 계산하는 방법을 결정합니다. 이 속성은 'content-box'와 'border-box' 두 가지 값을 가질 수 있습니다.
content-box : 이것은 CSS의 기본 박스 모델입니다. 'width'와 'height' 속성은 콘텐츠 영역의 크기만을 나타냅니다. 패딩과 테두리는 이 크기에 추가로 계산됩니다. 즉, 실제 요소의 전체 너비는 'width + padding + border'로 계산됩니다.
border-box : 이 값이 설정되면, 요소의 너비와 높이는 콘텐츠, 패딩, 테두리를 모두 포함하여 계산됩니다. 즉, 'width'와 'height' 속성이 지정한 값이 실제 요소의 전체 너비와 높이가 됩니다. 이는 요소의 실제 크기를 더 정확하게 제어할 수 있게 해주므로, 레이아웃 디자인에 유용합니다.
소스코드를 보면서 설명하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 박스 모델 및 사이즈 </title>
<style>
div {
width: 200px;
height: 150px;
background-color:deepskyblue;
}
.one {
border: 5px groove salmon;
}
.two {
padding: 10px;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</html>
분명 박스의 크기를 200px * 150px 로 설정했는데 박스마다 각각 크기가 다른 것을 확인할 수 있습니다.
이러한 현상이 나타나는 이유는 CSS의 기본 박스 모델에서 width와 height 속성이 콘텐츠 영역의 크기만을 나타내기 때문입니다.
문제를 해결하기 위해서는 다음 소스코드와 같은 방법으로 너비와 높이는 패딩과 테두리를 포함한 전체 크기를 나타내게 되도록 box-sizing: border-box 로 설정해주면 됩니다.
'html5+CSS3' 카테고리의 다른 글
CSS 디스플레이(Display) && 포지션(Position) (0) | 2024.03.08 |
---|---|
CSS 여백과 테두리 스타일 적용 (0) | 2024.02.29 |
CSS 배경에 적용할 수 있는 속성(Background-Style) (0) | 2024.02.29 |
CSS 가상 선택자(Pseudo-selector) (0) | 2024.02.24 |
CSS 링크(link), 리스트 스타일(list-style) (0) | 2024.02.24 |