HTML 및 CSS에서 사용되는 상자 모델은 HTML 요소를 직사각형 상자로 취급합니다. 각 상자는 콘텐츠, 패딩, 프레임 및 테두리의 네 영역으로 나뉩니다.
HTML/CSS 상자란 무엇입니까? 필드 만들기(공유)
거대한 페이지를 여러 영역으로 분할하고 해당 영역에 텍스트나 이미지를 삽입하고 싶을 때가 있습니다. 문서 작업을 할 때 원하는 영역에 텍스트나 이미지를 배치하기 위해 열을 나누거나 표를 생성하는 경우가 많습니다. HTML/CSS에서는 열이나 표 대신 상자를 만들고 내용을 삽입합니다. 상자를 먼저 만드는 것은 쉽습니다. 그것을 사용
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://imliz99.m/box_model.css">
</head>
<body>
<div class="box1">박스1</div>
<div class="box2">박스2</div>
</body>
</html>
상자의 구성품
상자는 콘텐츠, 패딩, 프레임 및 테두리의 네 영역으로 나뉩니다.
- 콘텐츠: 콘텐츠 영역은 요소의 실제 콘텐츠를 포함하는 부분입니다. 화면을 보는 사람들에게 직접 보여주고 싶은 내용을 담고 있는 부분입니다. 이 영역의 크기는 너비와 높이를 지정하는 것입니다.
- 패딩: 패딩 영역은 콘텐츠와 테두리 사이의 간격을 나타내며 콘텐츠 영역을 둘러싸는 내부 테두리로 생각할 수 있습니다. 패딩은 콘텐츠와 테두리 사이의 공간을 제어하는 데 사용됩니다. 상자의 콘텐츠 영역에 이미지를 넣었다고 가정해 보겠습니다. 패딩 시 프레임 테두리와 사진 사이의 거리가 늘어나고 패딩이 두꺼울수록 그 사이의 거리가 멀어집니다. 물론 여백을 원하지 않으면 0으로 설정할 수 있습니다.
- 프레임: 프레임은 콘텐츠와 채우기 영역을 둘러싸는 요소의 테두리입니다. 요소의 경계를 강조하거나 두 요소를 구분할 때 사용합니다. 테두리는 두께, 스타일 및 색상을 가질 수 있으며 콘텐츠 및 패딩 영역을 둘러싸는 모양 주위에 테두리를 만듭니다. 우리가 더 일찍 사진을 찍었나요? 나는 또한 그림에 빈 공간을 주었다. 프레임을 여백 밖에 설정합니다. 테두리 색상, 모양(단색, 점선, 이중 등) 및 두께와 같은 속성을 지정할 수 있습니다. 여기서 기다려! 패딩과 테두리를 늘리면 상자는 어떻게 됩니까? 예, 상자 자체의 크기도 커지고 있습니다.
- 여백: 여백은 요소의 외부 영역으로 요소가 다른 인접한 요소와 얼마나 떨어져 있는지 나타냅니다. 예를 들어 두 개의 상자를 나란히 놓으면 상자 사이의 간격이 처리됩니다.
코드로 속성 지정
각 구성 요소의 개념이 끝나면 어떻게 사용되는지 살펴보겠습니다. 상자 모델의 네 영역은 CSS의 다양한 속성을 사용하여 지정할 수 있습니다. 예를 들어 너비, 높이, 패딩, 테두리 및 테두리와 같은 속성을 사용하여 각 영역의 크기, 두께, 스타일 및 색상을 사용자 지정할 수 있습니다.
- 콘텐츠의 크기는 너비 및 높이 속성을 사용하여 설정됩니다.
- 여백과 마찬가지로 패딩은 양수, 음수 또는 0 값을 가질 수 있으며 콘텐츠를 더 넓게 표시할 수 있습니다. padding-top, padding-right, padding-bottom, padding-left 속성을 사용하여 각 방향에 대한 값을 지정할 수 있습니다.
- 테두리는 border-width, border-style 및 border-color 속성을 사용하여 두께, 스타일 및 색상으로 설정할 수 있습니다. 정렬을 지정하려면 border-top, border-right, border-bottom 및 border-left 속성을 사용합니다.
- 여백은 양수, 음수 또는 0 값을 가질 수 있습니다. 양수 값은 다른 이웃 요소에서 요소를 이동하고 음수 값은 겹칩니다. margin-top, margin-right, margin-bottom, margin-left 속성을 사용하여 각 방향에 대한 값을 지정할 수 있습니다.
이 기사의 첫 번째 부분에서는 HTML을 사용하여 Box1과 Box2를 만들었습니다. 아래 코드는 이와 같은 박스를 만드는 CSS 코드입니다. width, height, border, padding, frame이라고 써있는 부분을 보시면 어떻게 사용하는지 이해가 되실겁니다.
.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;
}
- 여러 패딩 속성 사용
div {
padding: 10px; /* 상하좌우 모두 10px */
padding-top: 5px; /* 위쪽 5px */
padding-bottom: 5px; /* 아래쪽 5px */
padding-left: 20px; /* 왼쪽 20px */
padding-right: 20px; /* 오른쪽 20px */
}- 프레임의 여러 속성 사용
div {
border-width: 2px; /* 두께 2px */
border-style: solid; /* 스타일: 실선 */
border-color: #ccc; /* 색상: 회색 */
border-top: 1px dotted red; /* 위쪽 방향, 두께: 1px, 스타일: 점선, 색상: 빨강 */
border-left: 1px dashed blue; /* 왼쪽 방향, 두께: 1px, 스타일: 파선, 색상: 파랑 */
}- 가장자리 속성 사용
div {
margin: 10px; /* 상하좌우 모두 10px */
margin-top: 5px; /* 위쪽 5px */상자를 나누는 부분은 이두희 선생님이 특히 중요하게 강조한 부분이다. 이해하고 실천해야 합니다.