안녕하세요. 오늘은 BOX MODEL 관련 스타일을 정리하겠습니다.
박스 모델(Box Model)은 HTML 요소를 렌더링할 때 요소의 크기와 레이아웃을 결정하는 중요한 개념입니다. 이에 대한 각 속성을 정리해 보겠습니다.
1. width, height
width: 요소의 너비를 설정합니다.height: 요소의 높이를 설정합니다.
1
2
3
4
| .example {
width: 200px;
height: 150px;
}
|
2. padding
- 요소의 내부 여백(내부 공간)을 설정합니다. 내용과 테두리 사이의 간격을 조절합니다.
1
2
3
| .example {
padding: 20px;
}
|
3. margin
- 요소의 외부 여백(요소 주변의 공백)을 설정합니다. 요소와 다른 요소 사이의 간격을 조절합니다.
1
2
3
| .example {
margin: 10px;
}
|
4. border
- 요소의 테두리를 설정합니다. 테두리의 두께, 스타일, 색상을 지정할 수 있습니다.
1
2
3
| .example {
border: 1px solid black;
}
|
5. outline
- 요소의 외부 윤곽선을 설정합니다. 주로 포커스 표시에 사용되며,
border와 비슷하지만 박스 모델에 영향을 주지 않습니다.
1
2
3
| .example {
outline: 2px dashed blue;
}
|
6. box-sizing
- 박스의 크기 계산 방법을 설정합니다. 기본값은
content-box로 내용의 너비와 높이만을 기준으로 크기를 계산하지만, border-box로 설정하면 테두리와 안쪽 여백을 포함하여 크기가 결정됩니다.
1
2
3
| .example {
box-sizing: border-box;
}
|
7. box-shadow
- 요소에 그림자 효과를 추가합니다. 그림자의 위치, 색상, 흐림 정도 등을 설정할 수 있습니다.
1
2
3
| .example {
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
|
8. resize
- 요소의 크기 조절 가능 여부를 설정합니다. 주로
<textarea>나 <iframe> 등에서 사용됩니다.
1
2
3
| .example {
resize: both; /* horizontal, vertical */
}
|
9. appearance
- 요소의 네이티브 스타일을 설정합니다. 주로 입력 요소(
input, button 등)의 스타일을 재정의할 때 사용됩니다.
1
2
3
| .example {
appearance: none;
}
|
이렇게 각 속성을 활용하여 요소의 크기와 모양을 조절할 수 있습니다. 각 속성은 요소의 박스 모델을 조작하여 웹 페이지의 레이아웃을 구성하는 데 중요한 역할을 합니다.
오늘도 필자의 부족한 글을 읽어 주셔서 감사합니다.— layout: post title: HTML CSS BOX MODEL 관련 스타일 정리 date: 2024-04-13 15:54 +0900 description: image: ../assets/img/javascript.jpg category: coding tags: HTML CSS BOX MODEL published: true sitemap: true —
안녕하세요. 오늘은 BOX MODEL 관련 스타일을 정리하겠습니다.
박스 모델(Box Model)은 HTML 요소를 렌더링할 때 요소의 크기와 레이아웃을 결정하는 중요한 개념입니다. 이에 대한 각 속성을 정리해 보겠습니다.
1. width, height
width: 요소의 너비를 설정합니다.height: 요소의 높이를 설정합니다.
1
2
3
4
| .example {
width: 200px;
height: 150px;
}
|
2. padding
- 요소의 내부 여백(내부 공간)을 설정합니다. 내용과 테두리 사이의 간격을 조절합니다.
1
2
3
| .example {
padding: 20px;
}
|
3. margin
- 요소의 외부 여백(요소 주변의 공백)을 설정합니다. 요소와 다른 요소 사이의 간격을 조절합니다.
1
2
3
| .example {
margin: 10px;
}
|
4. border
- 요소의 테두리를 설정합니다. 테두리의 두께, 스타일, 색상을 지정할 수 있습니다.
1
2
3
| .example {
border: 1px solid black;
}
|
5. outline
- 요소의 외부 윤곽선을 설정합니다. 주로 포커스 표시에 사용되며,
border와 비슷하지만 박스 모델에 영향을 주지 않습니다.
1
2
3
| .example {
outline: 2px dashed blue;
}
|
6. box-sizing
- 박스의 크기 계산 방법을 설정합니다. 기본값은
content-box로 내용의 너비와 높이만을 기준으로 크기를 계산하지만, border-box로 설정하면 테두리와 안쪽 여백을 포함하여 크기가 결정됩니다.
1
2
3
| .example {
box-sizing: border-box;
}
|
7. box-shadow
- 요소에 그림자 효과를 추가합니다. 그림자의 위치, 색상, 흐림 정도 등을 설정할 수 있습니다.
1
2
3
| .example {
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
|
8. resize
- 요소의 크기 조절 가능 여부를 설정합니다. 주로
<textarea>나 <iframe> 등에서 사용됩니다.
1
2
3
| .example {
resize: both; /* horizontal, vertical */
}
|
9. appearance
- 요소의 네이티브 스타일을 설정합니다. 주로 입력 요소(
input, button 등)의 스타일을 재정의할 때 사용됩니다.
1
2
3
| .example {
appearance: none;
}
|
이렇게 각 속성을 활용하여 요소의 크기와 모양을 조절할 수 있습니다. 각 속성은 요소의 박스 모델을 조작하여 웹 페이지의 레이아웃을 구성하는 데 중요한 역할을 합니다.
오늘도 필자의 부족한 글을 읽어 주셔서 감사합니다.
