728x90
반응형
HTML에서 margin, border, padding은 요소의 배치와 크기를 조정하는 데 중요한 CSS 속성입니다. 이 속성들은 박스 모델(Box Model)이라는 개념을 통해 요소의 크기와 위치를 제어하는 데 사용됩니다.
박스 모델(Box Model)
박스 모델은 HTML 요소를 사각형 박스로 표현하는 개념입니다. 박스 모델은 네 가지 주요 구성 요소로 이루어져 있습니다.
- 콘텐츠(Content): 요소의 실제 내용(텍스트, 이미지 등)이 들어가는 영역입니다.
- 패딩(Padding): 콘텐츠와 요소의 테두리(Border) 사이의 여백입니다. 패딩은 요소의 배경색을 적용받습니다.
- 테두리(Border): 패딩과 콘텐츠 주변을 감싸는 선입니다. 테두리는 스타일과 두께를 가질 수 있습니다.
- 마진(Margin): 요소의 가장 바깥쪽 여백으로, 요소와 다른 요소 사이의 간격을 조정합니다. 마진은 배경색을 가지지 않습니다.
패딩(Padding)
- 정의: 패딩은 요소의 콘텐츠와 테두리 사이의 내부 여백을 의미합니다.
- 특징:
- 요소의 크기를 늘립니다(패딩이 커질수록 요소의 전체 크기도 커집니다).
- 패딩은 요소의 배경색을 적용받습니다.
- padding 속성을 사용하여 설정할 수 있습니다. 네 가지 방향(위, 오른쪽, 아래, 왼쪽)에 대해 개별적으로 지정할 수도 있고, 축약형으로 한꺼번에 지정할 수도 있습니다.
- 예시
div {
padding: 20px; /* 모든 방향에 20px 패딩 적용 */
}
div {
padding-top: 20px; /* 위쪽 패딩 */
padding-right: 15px; /* 오른쪽 패딩 */
padding-bottom: 10px; /* 아래쪽 패딩 */
padding-left: 5px; /* 왼쪽 패딩 */
}
테두리(Border)
- 정의: 테두리는 요소의 콘텐츠와 패딩 주위에 그려지는 선을 의미합니다.
- 특징:
- 테두리는 요소의 크기에 포함됩니다.
- 테두리의 두께, 스타일, 색상을 지정할 수 있습니다.
- border 속성을 사용하여 설정할 수 있으며, 개별 속성(border-width, border-style, border-color)으로도 설정할 수 있습니다.
- 예시
div {
border: 2px solid black; /* 두께 2px, 실선, 검은색 테두리 */
}
div {
border-top: 2px dashed blue; /* 위쪽에 두께 2px, 파란색 점선 테두리 */
}
마진(Margin)
- 정의: 마진은 요소의 테두리와 이웃하는 요소들 사이의 외부 여백을 의미합니다.
- 특징:
- 마진은 요소와 주변 요소들 간의 간격을 조정합니다.
- 마진은 투명하며, 배경색이 적용되지 않습니다.
- margin 속성을 사용하여 설정할 수 있으며, 개별 방향(위, 오른쪽, 아래, 왼쪽)에 대해 설정할 수 있습니다.
- auto 값을 사용하면 요소를 가운데 정렬할 수 있습니다(주로 블록 요소에서 수평 중앙 정렬에 사용).
- 예시
div {
margin: 20px; /* 모든 방향에 20px 마진 적용 */
}
div {
margin-top: 20px; /* 위쪽 마진 */
margin-right: 15px; /* 오른쪽 마진 */
margin-bottom: 10px; /* 아래쪽 마진 */
margin-left: 5px; /* 왼쪽 마진 */
}
div {
margin: 0 auto; /* 수평 중앙 정렬 (좌우 마진이 자동으로 설정) */
}
박스 모델 구조 요약
- Content: 콘텐츠 영역
- Padding: 콘텐츠와 테두리 사이의 내부 여백
- Border: 요소를 감싸는 테두리
- Margin: 테두리와 다른 요소 사이의 외부 여백
예시를 포함한 HTML 및 CSS 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 모델 예시</title>
<style>
.box {
width: 200px; /* 콘텐츠 너비 */
padding: 20px; /* 내부 여백 */
border: 5px solid black; /* 테두리 */
margin: 30px; /* 외부 여백 */
background-color: lightblue; /* 배경색 */
}
</style>
</head>
<body>
<div class="box">이것은 박스 모델의 예시입니다.</div>
</body>
</html>
- 설명
- 이 예제에서 .box 클래스는 콘텐츠 영역(텍스트)을 포함하는 200px 너비의 박스를 생성합니다.
- 이 박스는 20px의 패딩, 5px의 테두리, 30px의 마진을 갖고 있습니다.
- 전체적인 크기는 width + padding + border + margin을 통해 계산됩니다.
이 세 가지 속성(padding, border, margin)은 웹 페이지에서 요소의 레이아웃과 디자인을 제어하는 중요한 도구이며, 적절히 사용하면 요소들 간의 간격과 배치를 정밀하게 조정할 수 있습니다.
728x90
반응형
'Front' 카테고리의 다른 글
| 뷰 애플리케이션의 실행 과정 (2) | 2024.10.14 |
|---|---|
| Vue 애플리케이션 기본 구조 (5) | 2024.10.14 |
| CDN vs NPM (1) | 2024.10.14 |
| Vue란?? (1) | 2024.10.14 |
| 웬 표준 개요 (10) | 2024.08.21 |