04 Understanding the Box model and layout_2. Border, Padding and Margin, Display

 ● Border Properties: Learn how to specify the border style, thickness, and color of an element, and learn how to apply various effects.

 1) Border Style (테두리 스타일):
Border 스타일은 테두리의 스타일을 지정하는 데 사용됩니다. 일반적인 스타일 값으로는 solid, dashed, dotted, double 등이 있습니다.

.container {
  border-style: solid;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소의 테두리 스타일을 solid로 설정하고 있습니다.

 2) Border Width (테두리 굵기):
Border 굵기는 테두리의 두께를 설정하는 데 사용됩니다. 일반적인 값으로는 픽셀(px), em 등의 단위를 사용할 수 있습니다.

.container {
  border-width: 2px;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소의 테두리 굵기를 2px로 설정하고 있습니다.

 3) Border Color (테두리 색상):
Border 색상은 테두리의 색상을 지정하는 데 사용됩니다. 색상을 표현하는 방법으로는 키워드, RGB, HEX 코드 등이 있습니다.

.container {
  border-color: #000000;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소의 테두리 색상을 검정(#000000)으로 설정하고 있습니다.

 4) Border Radius (테두리 모서리 반경):
Border Radius는 테두리의 모서리를 둥글게 만드는 데 사용됩니다. 일반적으로 픽셀(px), 백분율(%) 등의 단위를 사용하여 값을 지정할 수 있습니다.

.container {
  border-radius: 10px;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소의 테두리 모서리 반경을 10px로 설정하고 있습니다.

위의 속성들을 조합하여 테두리의 스타일, 굵기, 색상, 모서리 반경 등을 원하는 대로 지정할 수 있습니다. 예를 들어, 다음과 같이 여러 속성을 함께 사용할 수 있습니다.

.container {
  border: 2px solid #000000;
  border-radius: 10px;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소의 테두리를 2px 굵기의 검정색 테두리로 설정하고, 모서리 반경을 10px로 조절하고 있습니다.

이렇게 Border 속성을 사용하여 요소의 테두리를 스타일링하면 웹 페이지의 디자인을 더욱 풍부하게 만들 수 있습니다.

 

 ● Padding and Margin Properties: Learn how to adjust the spacing and layout between elements by setting the padding and outer padding of elements.

 1) Padding (안쪽 여백):
Padding은 요소의 내부에 추가 공간을 생성하여 요소의 내용과 테두리 사이의 간격을 조절하는 데 사용됩니다. 일반적으로 픽셀(px), 백분율(%), em 등의 단위를 사용하여 값을 지정할 수 있습니다.

.container {
  padding: 20px;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소의 안쪽 여백을 20px로 설정하고 있습니다.

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

.container {
  margin: 10px;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소의 바깥쪽 여백을 10px로 설정하고 있습니다.

 3) 주의할 점:
  - Padding은 요소 내부의 간격을 조절하고, Margin은 요소 간의 간격을 조절합니다.
  - Padding과 Margin은 요소의 크기와 위치에 영향을 줄 수 있으므로 주의해야 합니다. 이를 고려하여 레이아웃을 조정하고, 요소들을 원하는 위치에 배치할 수 있습니다.

요소의 간격과 레이아웃을 조정할 때, Padding과 Margin 속성을 적절하게 활용하여 요소들을 디자인할 수 있습니다. 필요에 따라 Padding과 Margin 속성을 조절하여 원하는 간격과 배치를 구현할 수 있습니다.

 

 ● Display property: This is a property that sets the display method of the element. Learn how to use it with various values ​​such as block, inline, and inline-block.

 1) block:
block 값은 요소를 블록 수준 상자로 표시합니다. 블록 수준 요소는 자체 행을 가지며, 가로 너비를 100% 차지하여 줄바꿈이 발생합니다. 일반적으로 div, p, h1, ul 등의 요소가 block 요소로 사용됩니다.

.container {
  display: block;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소를 block 수준으로 표시하고 있습니다.

 2) inline:
inline 값은 요소를 인라인 수준 상자로 표시합니다. 인라인 요소는 텍스트와 같이 행 내에 표시되며, 가로 너비는 내용에 맞게 조정됩니다. 일반적으로 span, a, strong 등의 요소가 inline 요소로 사용됩니다.

.container {
  display: inline;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소를 inline 수준으로 표시하고 있습니다.

 3) inline-block:
inline-block 값은 요소를 인라인 수준 상자로 표시하되, 블록 수준 요소처럼 가로 너비와 세로 높이를 지정할 수 있습니다. 즉, 인라인 요소처럼 행 내에 표시되면서도 블록 요소처럼 크기를 조정할 수 있습니다.

.container {
  display: inline-block;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소를 inline-block 수준으로 표시하고 있습니다.

Display 속성을 적절하게 활용하여 요소를 block, inline, inline-block 등의 수준으로 표시하면 원하는 레이아웃과 디자인을 구현할 수 있습니다. 이를 통해 요소들을 유연하게 배치하고, 원하는 모양과 동작을 가진 웹 페이지를 만들 수 있습니다.