CSS 박스 모델은 HTML 요소를 네모난 상자로 구분하여 표현하는 모델입니다.
위 그림 처럼 HTML 요소를 "상자"로 보는 방식이에요. 이 상자는 네 개의 층으로 이루어져 있어요.
-Content(내용): 상자 안의 실제 내용물(텍스트, 이미지 등).
-Padding(패딩) : 내용과 테두리 사이의 내부 공간.
-Border(테두리): 패딩을 감싸는 경계선.
-Margin(마진): 테두리 밖의 외부 공간.
박스 모델을 이해하면 웹페이지에서 요소의 크기와 간격을 정확히 조정할 수 있어요. 이걸 모르면 버튼이 겹치거나
텍스트가 너무 붙어서 보기 불편한 문제가 생길 수 있습니다.
|실습 코드 1 - 박스 모델에 개념
| 박스모델에 대한 기본적인 속성에 이해
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
/* 박스 크기를 계산하는 기준(기본 값) */
box-sizing: content-box;
/*
* box-sizing이 명시적으로 설정되지 않았으므로 기본값(content-box)적용
* content-box에서는 width(50px) 속성이 콘텐츠 영역만을 의미하게 됨
* 즉 박스 모델에 전체 너비는 padding과 border가 되어서 결정 됨
*box-sizing: content-box;를 사용한다면 계산 방식이 달라짐
*
*/
｝
／＊주요 속성 width, height＊／
.box {
width: 200px;
height: 100px;
background-color; light;
}
/*주요 속성 padding*/
..box {
padding : 20px;
}
/* 주요 속성 .border*/
.box {
border: 5ox solid black;
}
/*주요 속성 margin */
.box {
margin: 10px;
}
</style>
</head>
<body>
<div class=:"box">div 태그 1 박스 모델</div>
<div>div x 태그2</div>
<hr />
<pre>
요소 크기 게산해보기
전체 너비 = width + 좌우 padding + 좌우 border + 좌우 margin
전체 높이 = height + 상하 padding + 상하 border + 상하 margin
widht: 200px;
padding: 20px
border: 5px;
margin: 10px
-박스모델 크기를 계산하는 기준
box-sizing: content-box 기준 (기본값)
전체 너비 :200 + 20 + 40 + 10 = 250px
-요소 자체의 너비 : 200 + 40 + 10 = 250 px
레이아웃에서 차지하는 총 공간 : 250 + 20(마진값 추가) + 270px
</pre>
</div>
</body>
</html>
| 실습 코드 2 - box-sizing 속성 이해하기
box-sizing 은 요소의 크기 계산 방식을 바꿔줍니다. (box-sizing: border-box; 속성
을 사용하자)
box-sizing: 속성이란?
box-sizing 속성은 CSS에서 요소의 크기(width 와 height)를 계산하는 방식을 결정합니다.
이 속성은 박스 모델의 동작 방식을 변경하여 요소의 전체 크기를 더 쉽게 예측하고
관리할 수 있도록 돕습니다. box-sizing 에는 두 가지 주요값이 있습니다.
실습예제 1에 코드 추가해서 확인( content-box 기본 값)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
/* box-sizing: content-box; */
/* border-box로 설정 */
box-sizing: border-box;
}
/* 주요 속성 width, height */
.box {
width: 200px;
height: 100px;
background-color: lightblue;
}
/* 주요 속성 padding */
.box {
padding: 20px;
}
/* 주요 속성 border */
.box {
border: 5px solid black;
}
/* 주요 속성 margin */
.box {
margin: 10px;
}
</style>
</head>
<body>
<div class="box">div 태그 1 박스 모델</div>
<div>div 태그 2</div>
<hr />
<div>
<pre>
요소 크기 계산해보기
box-sizing: border-box 기준
border-box에서는 width가 콘텐츠 + padding + border를 포함
따라서 width: 200px는 콘텐츠 + 좌우 padding + 좌우 border를 포함한 값
width: 200px
padding: 20px
border: 5px
margin: 10px
- 박스모델 크기를 계산하는 기준
box-sizing: border-box 기준
- 요소 자체의 너비: 200px (padding과 border 포함)
- 레이아웃에서 차지하는 총 공간: 200 + 20(마진값추가) = 220px
</pre>
</div>
</body>
</html>
-box-sizing: content-box는 콘텐츠를 width를 콘탠츠 영역만 의미하고 추가적으로 패딩 + 보더 + 마진을
힙산해서 전체 너비를 결정합니다.
-box-sizing: border-box는 width: 200px는 콘텐츠 + 패딩 + 보더를 포함 시켜서 계산을 하는 방식입니다.
현대 웹 개발에서는 보톤 모든 요소에 border-box를 기본값으로 설정하는 리셋 CSS를 사용합니다.
아래는 그 예시입니다.
*,
*::before,
*::after {
box-sizing: boder-box;
}
/* * 선택자가 가상 요소를 포함하지 않기 때문 */
[ 가상 요소 선택자:: before와 ::after 이들은 특정 요소의 콘탠츠 앞(::before) 또는
뒤(::after)에 가상의 콘텐츠를 삽입할 수 있개 해줍니다. 이 가상 요소는 실제
DOM애는 존재하지 않지만, 스타일링을 통해 시각적으로 랜더링됩니다.]
|실습 예제3
max-width 와 max-height 에 대한 알아 보자.
max-width 와 max-height는 HTML/CSS에서 요소의 최대 크기를 제한하는 프로퍼타입니다.
이를 통해 요소가 지정된 너비나 높이를 초과하지 않도록 제어할 수 있습니다. 반응형 디자인에서 특히
유요하며, 콘텐츠가 화면 크기에 따라 적절히 조정되도록 도와줍니다.
max-width
-요소의 최대 너비를 설정합니다.
-요소의 너비가 콘텐추나 다른 스타알에 의해 커지더라도 max-width 로 지정한 값을
넘지 않습니다.
- 단위:px,%,em,rem,vw,vh 등 사용 가능.
max-height
- 요소의 최대 높이를 설정합니다.
- 요소의 높이가 콘텐츠에 의해 늘어나더라도 max-height로 지정한 값을 초과하지 않습니다.
- 단위:px,%,em,rem,vw,vh 등 사용 가능.
특징
1.우선순위 : -width/height 값이 max-width/max-height 보다 크더라도, max-width/max-height가
우선 적용됩니다.
2. 반응형 디자인 : 화면 크기에 따라 유연하게 동작하며, 주로% vw/vh 단위와 함깨 사용됩니다.
3.초과 시 동작: 콘텐츠가 최대 크기를 넘으면 overflow 속성에 따라 스크롤바각 생기거나 내용이
잘릴 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*,*::after,*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 500px; /* 너비가 500px를 넘지 않음 */
background-color: lightblue;
padding: 20px;
/* (위,아래), (좌,우) */
margin: 20px auto;
}
.box {
max-height: 200px; /* 높이가 200px를 넘지 않음 */
padding: 10px;
background-color: lightcoral;
overflow: scroll; /* 내용이 넘치면 스크롤 생성, 숨김 - hidden */
}
</style>
</head>
<body>
<div class="container">
<h2> max-withd 예제 </h2>
<p>이 컨테이너는 최대 너비는 500px 로 제한 됩니다. 창 크기를 조정해보세요</p>
</div>
<div class="container">
<div class="box">
<h2>max-height 예제</h2>
<p>이 박스의 최대 높이는 200px입니다. 내용이 많아 지면 스크롤이 자동으로 생깁니다.</p>
<p>더 많은 텍스트를 추가해서 확인해봅니다.</p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui, voluptatibus voluptates! Magnam, quo? Incidunt id dicta, fugiat sequi sint optio provident exercitationem ad voluptates iste, laudantium rem possimus labore sit.
Vero incidunt nobis iure unde recusandae provident nostrum eligendi ipsam neque sed illo quisquam magnam, eveniet ex aliquid modi, inventore voluptatem accusamus, velit optio dignissimos. Veniam veritatis sunt natus inventore?
</div>
</div>
</body>
</html>'HTML CSS' 카테고리의 다른 글
| CSS block, inline 에 대해 알아 보자 - 15 (0) | 2025.06.03 |
|---|---|
| CSS background 에 이해 - 14 (0) | 2025.05.31 |
| (JAVA) 파일 복사 기능 만들어 보기-18 (1) | 2025.05.29 |
| (HTML/CSS/JavaScript)CSS 선택자(속성 선택자) - 12 (1) | 2025.05.29 |
| (HTML/CSS/JavaScript) CSS 선택자(가상 클래스 선택자) - 11 (1) | 2025.05.29 |