이번 포스트에서는 CSS3의 속성 중 박스 모델, 테두리 속성, 박스 속성에 대해 자세히 알아보겠습니다.
CSS3 속성
- 박스 모델(Box Model)
- 테두리(Border) 속성
- 박스(Box) 속성
- 레이아웃(Layout) 속성
- 표(Table) 속성
1. 박스 모델 (Box Model)
박스 모델은 CSS에서 요소의 크기와 여백을 정의하는 데 사용됩니다. 박스 모델은 다음 속성으로 구성됩니다.
- width와 height: 요소의 너비와 높이를 정의합니다.
- padding: 요소의 내부 여백을 정의합니다.
- border: 요소의 테두리를 정의합니다.
- margin: 요소의 외부 여백을 정의합니다.
박스 모델은 모든 HTML 요소가 사각형 박스로 표현된다는 개념입니다. 박스 모델은 네 가지 주요 구성 요소로 이루어져 있습니다: 콘텐츠, 패딩, 테두리, 마진입니다. 각 요소는 다음과 같은 역할을 합니다.
- 콘텐츠 : 실제 내용이 들어가는 부분입니다.
- 패딩 : 콘텐츠와 테두리 사이의 공간입니다.
- 테두리 : 박스를 둘러싸는 선입니다.
- 마진 : 박스와 다른 요소 사이의 공간입니다.
예제코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스 모델 예제</title>
<style>
/* 마진 영역 (Margin) */
.margin {
background: #f9e79f; /* 연한 노란색: 마진 영역 */
padding: 40px; /* 마진 영역의 크기를 시각적으로 표현 */
position: relative;
display: inline-block;
}
.margin::before {
content: "마진";
position: absolute; top: 40px; left: 40px;
top: 0px;
left: 10px;
background: #f9e79f;
padding: 2px 6px;
border: 1px solid #ccc;
font-size: 12px;
}
/* 테두리 영역 (Border) */
.border {
border: 10px solid #3498db; /* 파란색 테두리 */
position: relative;
}
.border::before {
content: "테두리";
position: absolute; top: 40px; left: 40px;
top: -20px;
left: 60px;
background: #3498db;
color: #fff;
padding: 2px 6px;
font-size: 12px;
}
/* 패딩 영역 (Padding) */
.padding {
padding: 30px;
background: #aed6f1; /* 연한 하늘색: 패딩 영역 */
position: relative;
}
.padding::before {
content: "패딩";
position: absolute;
top: 40px; left: 40px;
top: -20px;
left: 10px;
background: #aed6f1;
padding: 2px 6px;
font-size: 12px;
}
/* 콘텐츠 영역 (Content) */
.content {
background: #a9dfbf; /* 연한 녹색: 실제 콘텐츠 */
position: relative;
padding: 10px;
}
.content::before {
content: "콘텐츠";
position: absolute;
top: -20px;
left: 10px;
background: #a9dfbf;
padding: 2px 6px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="margin">
<div class="border">
<div class="padding">
<div class="content">
박스 모델 예제입니다.
</div>
</div>
</div>
</div>
</body>
</html>
2. 테두리 속성 (Border Properties)
테두리 속성은 요소의 테두리를 스타일링하는 데 사용됩니다. 주요 테두리 속성은 다음과 같습니다.
- border-style: 테두리의 스타일을 정의합니다. (예: solid, dashed, dotted)
- border-width: 테두리의 두께를 정의합니다.
- border-color: 테두리의 색상을 정의합니다.
- border-radius: 테두리의 둥근 정도를 정의합니다.
예제코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테두리 속성 예제</title>
<style>
.border-box {
width: 300px;
padding: 20px;
margin: 20px auto;
background-color: #fff;
/* 기본 테두리 스타일 */
border: 2px dashed #ff5722;
/* 테두리 둥글게 만들기 */
border-radius: 15px;
/* 그라데이션 테두리 (border-image) */
border-image: linear-gradient(to right, #ff5722, #4caf50) 1;
}
</style>
</head>
<body>
<div class="border-box">
이것은 다양한 테두리 속성을 적용한 예제입니다.
</div>
</body>
</html>
3. 박스 속성 (Box Properties)
박스 속성은 요소의 크기와 위치를 정의하는 데 사용됩니다. 주요 박스 속성은 다음과 같습니다.
- display: 요소의 표시 방식을 정의합니다. (예: block, inline, flex)
- position: 요소의 위치를 정의합니다. (예: static, relative, absolute)
- top, right, bottom, left: 요소의 위치를 정의합니다.
- float: 요소의 부동 여부를 정의합니다.
예제코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스 속성 예제</title>
<style>
.box-example {
width: 250px;
height: 150px;
padding: 10px;
margin: 20px;
background-color: #e0f7fa;
/* 내용이 지정된 영역을 벗어나면 스크롤 생성 */
overflow: auto;
/* box-sizing: border-box; 로 설정하면 padding과 border를 width, height에 포함 */
box-sizing: border-box;
/* display 속성을 block, inline-block, 또는 flex 등으로 변경 가능 */
display: inline-block;
}
</style>
</head>
<body>
<div class="box-example">
이 박스는 <code>overflow</code>, <code>box-sizing</code>, <code>display</code> 등의 다양한 박스 속성을 활용하고 있습니다.
<br>
박스 속성은 요소의 크기와 위치를 정의하는 데 사용됩니다. <br>
주요 박스 속성은 다음과 같습니다.<br>
(예: block, inline, flex)<br>
(예: static, relative, absolute)<br>
</div>
</body>
</html>
4. CSS3 속성의 활용 예시
✅ HTML 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 둥근 모서리 예시</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="rounded-box">
CSS3로 만든 둥근 모서리 박스입니다!
</div>
</body>
</html>
✅ CSS 코드 (styles.css)
.rounded-box {
width: 300px; /* 박스 너비 */
height: 150px; /* 박스 높이 */
background-color: #4CAF50; /* 배경색 */
color: white; /* 텍스트 색상 */
border: 3px solid #388E3C; /* 테두리 두께, 스타일, 색상 */
border-radius: 20px; /* 둥근 모서리 설정 (핵심 속성) */
box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 박스 그림자 추가 */
padding: 20px; /* 내부 여백 */
text-align: center; /* 텍스트 가운데 정렬 */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
box-sizing: border-box; /* 테두리와 패딩 포함 크기 계산 */
}
이 예시를 웹 브라우저에서 실행하면, 초록색 둥근 모서리 박스가 나타납니다.
텍스트가 가운데 정렬되고, 그림자가 있어 약간 떠 있는 느낌을 줍니다.
위의 코드 예시를 활용하여 원하는 스타일에 맞게 조정해 보세요.