HTML과 CSS에서 사용되는 박스 모델(Box Model)은 HTML 요소를 사각형 박스로 처리합니다. 각각의 박스는 content, padding, border, margin의 4개의 영역으로 나뉩니다.
HTML/CSS 박스란? 박스 만들기(쪼개기)
거대한 한 페이지를 여러 개의 영역으로 나누어서 그 영역에 글자나 사진 등을 넣고 싶을 때가 있습니다. 문서 작업을 할 때에는 단을 나누거나 표를 만들어서 원하는 영역에 글자나 사진 등을 배치하고는 합니다. HTML/CSS에서는 단이나 표 대신 박스를 만들어서 그 안에 내용을 집어넣습니다. 먼저 박스를 만드는 것은 쉽습니다. <div> 태그를 이용합니다. 여러 개의 박스를 만들 때는 각 박스에 이름을 붙여줘야 다루기가 쉬워지겠죠? div class에 이름을 지어 주세요.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="box_model.css">
</head>
<body>
<div class="box1">박스1</div>
<div class="box2">박스2</div>
</body>
</html>
박스의 구성 요소
박스는 content, padding, border, margin의 4개의 영역으로 나뉩니다.
- Content: Content 영역은 요소의 실제 내용을 담고 있는 부분입니다. 우리가 화면을 보는 사람들에게 직접적으로 보여 주고 싶은 것을 담는 부분이에요. 이 영역의 크기는 우리가 width와 height를 지정하면 됩니다.
- Padding: Padding 영역은 content와 border 사이의 간격을 나타내며 content 영역을 감싸고 있는 내부 여백이라고 생각할 수 있습니다. Padding은 content와 border 간의 거리를 제어하는 데 사용됩니다. 즉, 우리가 박스의 콘텐츠 영역에 사진 하나를 담았다고 생각해 볼게요. padding이 생기면 박스 border와 사진의 사이가 멀어지는 것이고 padding을 더 두껍게 하면 할수록 그 사이는 더 멀어지는 것입니다. 여백을 두기 싫다면 당연히 0으로 설정할 수도 있습니다.
- Border: Border는 콘텐트와 패딩 영역을 둘러싸고 있는 요소의 경계선입니다. 요소의 경계를 강조하거나 두 요소 사이를 구분하기 위해 사용됩니다. Border는 두께, 스타일, 색상을 지정할 수 있으며, 콘텐트와 패딩 영역을 둘러싸고 있는 모양의 경계를 만듭니다. 아까 우리가 사진을 담았죠? 그 사진에 여백도 줬어요. 그 여백 바깥으로 테두리를 설정하는 거예요. 테두리 색상, 모양(실선, 점선, 두 줄 등등), 두께 같은 것을 속성으로 줄 수 있겠죠. 여기서 잠깐! padding과 border의 크기를 키우면 박스에는 어떤 일이 일어날까요? 네! 박스 자체의 크기도 함께 커집니다.
- Margin: Margin은 요소의 바깥쪽 영역으로 요소와 인접한 다른 요소와의 간격을 나타냅니다. 예를 들어, 박스 두 개를 나란히 놓을 때 둘 사이의 간격을 처리하는 것이지요.
코드로 속성 지정하기
각 구성 요소들의 개념에 이어 사용법도 알아봅시다. 박스 모델의 네 가지 영역은 CSS에서 다양한 속성을 사용하여 지정할 수 있습니다. 예를 들어, width, height, padding, border, margin 등의 속성을 사용하여 각각의 영역의 크기, 두께, 스타일, 색상 등을 조절할 수 있습니다.
- Content는 width와 height 속성을 사용해서 크기를 조절합니다.
- Padding도 Margin과 마찬가지로 양수, 음수, 0의 값을 가질 수 있고 내용을 더 넓게 보여줄 수 있도록 합니다. padding-top, padding-right, padding-bottom, padding-left 속성을 사용하여 각각의 방향에 대한 값을 지정할 수 있습니다.
- Border는 border-width, border-style, border-color 속성을 사용하여 두께, 스타일, 색상을 지정할 수 있습니다. 방향을 지정하려면 border-top, border-right, border-bottom, border-left 속성을 사용합니다.
- Margin은 양수, 음수, 0의 값을 가질 수 있습니다. 양수값은 요소를 인접한 다른 요소에서 멀어지게 하고 음수값은 겹치게 합니다. margin-top, margin-right, margin-bottom, margin-left 속성을 사용하여 각각의 방향에 대한 값을 지정할 수 있습니다.
이 글 첫부분에서 우리가 html로 box1과 box2를 만들었지요? 아래의 코드는 그 박스들을 이렇게 저렇게 만들어 줄 css 코드입니다. width, height, margin, padding, border가 지정된 부분을 보시면 어떻게 사용하는지 이해가 되실 거예요.
.box1{
background-color: skyblue;
width: 100px;
height: 100px;
border: 5px solid black;
padding: 20px;
margin: 20px;
}
.box2{
background-color: violet;
width: 100px;
height: 100px;
border: 5px solid purple;
}
- padding의 여러 속성 사용하기
div {
padding: 10px; /* 상하좌우 모두 10px */
padding-top: 5px; /* 위쪽 5px */
padding-bottom: 5px; /* 아래쪽 5px */
padding-left: 20px; /* 왼쪽 20px */
padding-right: 20px; /* 오른쪽 20px */
}- border의 여러 속성 사용하기
div {
border-width: 2px; /* 두께 2px */
border-style: solid; /* 스타일: 실선 */
border-color: #ccc; /* 색상: 회색 */
border-top: 1px dotted red; /* 위쪽 방향, 두께: 1px, 스타일: 점선, 색상: 빨강 */
border-left: 1px dashed blue; /* 왼쪽 방향, 두께: 1px, 스타일: 파선, 색상: 파랑 */
}- margin의 여러 속성 사용하기
div {
margin: 10px; /* 상하좌우 모두 10px */
margin-top: 5px; /* 위쪽 5px */박스 쪼개기 부분은 이두희 선생님께서 특히 중요하다고 강조하신 부분입니다. 반드시 이해하고 연습해야 합니다.
'프로그래밍' 카테고리의 다른 글
| [코드라이언] HTML/CSS (2) div 중앙정렬, div와 span의 차이점 (0) | 2023.03.14 |
|---|---|
| [코드라이언] HTML/CSS로 이력서 만들기 (1) (0) | 2023.03.13 |
댓글