04 Understanding the Box model and layout_1. Box model, Width and Height

  ● Box model: Learn about the roles and properties of the box model's components: Content, Padding, Border, and Margin.

 1) Content (내용):
Content는 요소의 실제 내용을 나타냅니다. 텍스트, 이미지, 비디오 등이 이 영역에 위치하게 됩니다. Content의 크기는 width와 height 속성을 사용하여 조절할 수 있습니다.

<div class="content-box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

 

 2) Padding (안쪽 여백):
Padding은 Content와 Border 사이의 영역으로, 요소의 내용 주위에 추가 공간을 만듭니다. 이를 통해 내용과 테두리 사이의 간격을 조절할 수 있습니다. padding 속성을 사용하여 안쪽 여백의 크기를 설정할 수 있습니다.

.content-box {
  padding: 20px;
}

 

 3) Border (테두리):
Border는 요소의 가장 외각에 위치한 선으로, 요소의 외관을 꾸밀 수 있습니다. 테두리의 스타일, 굵기, 색상 등을 지정할 수 있습니다. border 속성을 사용하여 테두리의 속성을 설정할 수 있습니다.

.content-box {
  border: 2px solid #000;
}

 

 4) Margin (바깥쪽 여백):
Margin은 요소와 주변 요소 사이의 간격을 조절하는 데 사용됩니다. 요소의 테두리와 인접한 외부 공간을 의미하며, 다른 요소들과의 간격을 설정하여 요소를 레이아웃에서 올바르게 배치할 수 있습니다. margin 속성을 사용하여 바깥쪽 여백의 크기를 조정할 수 있습니다.

.content-box {
  margin: 10px;
}

위의 예제 코드에서는 "content-box"라는 클래스를 가진 <div> 요소를 사용하여 박스 모델의 구성 요소를 보여주고 있습니다. CSS를 사용하여 Content의 내용을 설정하고, Padding, Border, Margin의 속성을 조정하여 각각의 영역을 설정하고 크기를 조절하였습니다.

이렇게 Box 모델의 구성 요소를 이용하면 요소의 크기와 위치, 간격을 조절하여 웹 페이지의 레이아웃을 디자인할 수 있습니다.

 

  ● Width and Height Properties: Learn how to adjust the horizontal width and height of an element and what to pay attention to.

 1) Width 속성:
width 속성은 요소의 가로 너비를 설정하는 데 사용됩니다. 일반적으로 픽셀(px), 백분율(%), em 등의 단위를 사용하여 값을 지정할 수 있습니다.

.container {
  width: 300px;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소의 가로 너비를 300px로 설정하고 있습니다.

 2) Height 속성:
height 속성은 요소의 세로 높이를 설정하는 데 사용됩니다. width 속성과 마찬가지로 픽셀(px), 백분율(%), em 등의 단위를 사용하여 값을 지정할 수 있습니다.

.container {
  height: 200px;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소의 세로 높이를 200px로 설정하고 있습니다.

 3) 주의할 점:
  - width와 height 속성을 사용하여 요소의 크기를 조정할 때, 내용(Content)의 크기와 상호 작용할 수 있습니다. 내용이 설정한 크기보다 크거나 작을 경우, 크기가 잘리거나 내용이 넘칠 수 있습니다. 이를 방지하기 위해 내용의 크기를 조절하거나 overflow 속성을 사용하여 내용이 넘치는 경우 처리할 수 있습니다.
  - 퍼센트(%) 단위를 사용할 경우, 부모 요소의 크기에 상대적으로 설정됩니다. 따라서 부모 요소의 크기에 유연하게 반응하여 레이아웃을 조정할 수 있습니다.

 

요소의 크기를 설정할 때, 레이아웃과 디자인 요구에 맞게 width와 height 속성을 조절하면 됩니다. 필요에 따라 다른 속성들과 함께 사용하여 원하는 모양과 크기를 가진 요소를 생성할 수 있습니다.