[기초]CSS 여백, 패딩, 테두리 스타일(margin, padding, border)

CSS에서 여백, 패딩, 테두리는 요소와 그 주변 요소들 간의 공간을 관리하는 중요한 속성들입니다. 이 속성들을 사용하면 웹 페이지의 레이아웃과 시각적 스타일을 세밀하게 조정할 수 있습니다.

 

여백 (Margin)

여백은 요소의 경계와 그 주변 요소 사이의 외부 공간을 의미합니다. margin 속성을 사용하여 설정하며, 단일 속성이나 개별 속성으로 지정할 수 있습니다.

 

 

1. 기본 속성

• margin: 모든 방향의 여백을 한 번에 설정할 수 있는 단축 속성입니다.(값이 4개일 경우 순서대로 시계방향으로 적용)

div {
  margin: 20px; /* 모든 방향에 20px 여백 */
}
div {
  margin: 10px 20px; /* 상하 10px, 좌우 20px */
}
div {
  margin: 10px 20px 30px 40px; /* 상 10px, 우 20px, 하 30px, 좌 40px */
}

 

 

2. 개별 여백 속성

• margin-top: 위쪽 여백
• margin-right: 오른쪽 여백
• margin-bottom: 아래쪽 여백
• margin-left: 왼쪽 여백

div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

 

---

패딩 (Padding)

패딩은 요소의 경계와 그 내부 콘텐츠 사이의 내부 공간을 의미합니다. padding 속성을 사용하여 설정하며, 단일 속성이나 개별 속성으로 지정할 수 있습니다.

 

 

1. 기본 속성

• padding: 모든 방향의 패딩을 한 번에 설정할 수 있는 단축 속성입니다.(값이 4개일 경우 순서대로 시계방향으로 적용)

div {
  padding: 20px; /* 모든 방향에 20px 패딩 */
}
div {
  padding: 10px 20px; /* 상하 10px, 좌우 20px */
}
div {
  padding: 10px 20px 30px 40px; /* 상 10px, 우 20px, 하 30px, 좌 40px */
}

 

 

2. 개별 패딩 속성

• padding-top: 위쪽 패딩
• padding-right: 오른쪽 패딩
• padding-bottom: 아래쪽 패딩
• padding-left: 왼쪽 패딩

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

 

---

테두리 (Border)

CSS에서 테두리(Border) 속성은 요소의 경계를 설정하는 데 사용되며, 웹 페이지의 레이아웃과 디자인에 중요한 역할을 합니다. 테두리는 요소를 시각적으로 구분하고 강조하는 데 유용합니다. 테두리 속성에는 테두리의 너비, 스타일, 색상을 설정하는 다양한 방법이 있습니다.

 

 

1. 테두리의 기본 속성 (border)

테두리의 기본 속성은 border 단축 속성으로, 테두리의 너비, 스타일, 색상을 한 번에 설정할 수 있습니다.

border: [border-width] [border-style] [border-color];

 

div {
  border: 2px solid #000; /* 2px 너비, 실선, 검정색 */
}

 

 

2. 테두리 너비 속성 (border-width)

테두리의 두께를 설정하는 속성입니다.

border-width: [value];

• 값: thin, medium, thick, 또는 단위가 있는 값(px, em, rem 등)

div {
  border-width: 4px; /* 4px 두께의 테두리 */
}

 

 

3. 테두리 스타일 속성 (border-style)

테두리의 스타일을 설정하는 속성입니다. 스타일을 설정하지 않으면 테두리가 표시되지 않습니다.

border-style: [value];

• 값:
  • none: 테두리 없음
  • solid: 실선
  • dotted: 점선
  • dashed: 대시 선
  • double: 이중선
  • groove: 테두리가 홈이 파인 모양으로 보입니다.
  • ridge: 테두리가 능선 모양으로 보입니다.
  • inset: 테두리가 요소 내부로 들어간 것처럼 보입니다.
  • outset: 테두리가 요소 외부로 돌출된 것처럼 보입니다.

div {
  border-style: dashed; /* 대시 선 테두리 */
}

 

 

4. 테두리 색상 속성 (border-color)

테두리의 색상을 설정하는 속성입니다.

border-color: [color];

• 값: 색상 이름, HEX 코드, RGB/ RGBA, HSL/ HSLA 값.

div {
  border-color: red; /* 빨간색 테두리 */
}

 

 

5. 개별 방향 테두리 속성

각 방향(상, 우, 하, 좌) 별로 개별적으로 테두리를 설정할 수 있습니다. 각 속성은 border-top, border-right, border-bottom, border-left로 나뉩니다.

• border-top: 위쪽 테두리
• border-right: 오른쪽 테두리
• border-bottom: 아래쪽 테두리
• border-left: 왼쪽 테두리

div {
  border-top: 2px solid red;    /* 위쪽 테두리 */
  border-right: 3px dashed blue; /* 오른쪽 테두리 */
  border-bottom: 4px double green; /* 아래쪽 테두리 */
  border-left: 5px groove black; /* 왼쪽 테두리 */
}

 

 

6. 테두리 모서리 속성 (border-radius)

border-radius 속성은 테두리의 모서리를 둥글게 만듭니다. 이 속성을 사용하면 요소의 각 모서리에 곡선을 적용할 수 있습니다. 모든 모서리에 동일한 반경을 적용하거나, 각 모서리별로 다른 값을 설정할 수 있습니다.

div {
  border-radius: 10px; /* 모든 모서리를 10px 둥글게 */
}

 

div {
  border-radius: 10px 20px 30px 40px; /* 각각의 모서리에 다른 값 설정 */
}

 

 

7. 요소 그림자 속성 (box-shadow)

테두리와 관련된 추가 속성으로, box-shadow 속성은 요소에 그림자 효과를 추가하는 속성입니다. 이를 사용하여 요소에 깊이감을 더하거나 강조할 수 있습니다. box-shadow는 테두리 외에 다른 요소에도 적용할 수 있습니다.

div {
  border: 2px solid #000;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 요소에 그림자 추가 */
}

 

 

8. 투명한 테두리 속성

border-color 속성에서 transparent 값을 사용하면 투명한 테두리를 만들 수 있습니다. 투명한 테두리는 요소 간의 간격을 조정하는 데 유용하며, 요소의 크기를 유지하면서 보이지 않는 공간을 만들 때 사용할 수 있습니다.

border: [border-width] [border-style] [border-color]; /* 마지막 border-color에  transparent 적용 */

div {
  border: 5px solid transparent; /* 투명한 테두리 */
}

 

 

9. 테두리 이미지 속성 (border-image)

border-image 속성은 테두리에 이미지를 설정할 수 있는 단축 속성입니다. 이 속성은 테두리의 이미지 소스, 슬라이스, 너비, 확장, 반복 방식을 한 번에 설정할 수 있습니다.

div {
  border: 10px solid transparent;
  border-image: url(border.png) 30 stretch; /* 테두리에 이미지 사용 */
}

 

이와 같이, CSS의 테두리 속성을 활용하면 요소의 경계와 관련된 다양한 디자인을 적용할 수 있습니다. 이 속성들을 적절히 활용하여 웹 페이지의 레이아웃과 스타일을 풍부하게 만들 수 있습니다.