CSS 튜토리얼)Part3. CSS 기본문법 - 테두리

Part3. CSS 속성 기초

텍스트 스타일링 글꼴, 색상, 크기 배경 색상, 이미지 박스 모델 마진, 패딩, 테두리, 너비, 높이

중에 테두리에 대해. 알아보도록 하겠습니다!

테두리(Border)

---

📍border-style:

테두리의 스타일을 지정합니다.
이 속성은 테두리가 어떻게 보일지 결정합니다.

스타일	설명
none	테두리 없음.
solid	실선 테두리. 일반적으로 가장 많이 사용됩니다.
dotted	점선 테두리. 점들이 일렬로 연결되어 있습니다.
dashed	파선 테두리. 짧은 선들이 일렬로 연결되어 있습니다.
double	이중선 테두리. 두 줄의 실선으로 구성됩니다.
groove	요철이 있는 테두리. 테두리가 들어간 것처럼 보입니다. 효과는 색상에 따라 다르게 보일 수 있습니다.
ridge	요철이 있는 테두리. 테두리가 튀어나온 것처럼 보입니다. 효과는 색상에 따라 다르게 보일 수 있습니다.
inset	요철이 있는 테두리. 요소가 들어간 듯한 효과를 줍니다. 테두리와 배경색의 대비에 따라 더 두드러질 수 있습니다.
outset	요철이 있는 테두리. 요소가 튀어나온 듯한 효과를 줍니다. 테두리와 배경색의 대비에 따라 더 두드러질 수 있습니다.

---

📍border-width:

border-width는 테두리의 두께를 지정하는 속성입니다.
이 속성은 각 테두리면(상단, 우측, 하단, 좌측)에 대해 개별적으로 또는 일괄적으로 값을 설정할 수 있습니다

속성 값:

• 특정 값(예: px, em 등)
• 각 테두리면에 대한 값을 개별적으로 설정(예: 1px 2px 3px 4px는 상, 우, 하, 좌 순으로 적용)

사용예시

.example {
  border-width: 2px; /* 모든 면에 동일하게 적용 */
  border-width: 1px 0.5em 2px 1%; /* 상, 우, 하, 좌 순으로 적용 */
}

---

📍border-color:

border-color 속성은 테두리의 색상을 설정합니다.
각 테두리면에 대해 개별적으로 색상을 지정할 수도 있습니다.

속성 값:

• 색상 코드(예: #000000, rgb(255, 255, 255), red 등)
• 개별 색상 설정(예: red green blue yellow는 상, 우, 하, 좌 순으로 적용)

사용예시

.example {
  border-color: black; /* 모든 면에 동일하게 적용 */
  border-color: red green blue yellow; /* 상, 우, 하, 좌 순으로 적용 */
}

---

📍border:

border는 테두리의 스타일, 두께, 색상을 하나의 선언으로 지정하는 단축 속성입니다.
이 속성은 전체 테두리에 대해 일관된 스타일을 적용하거나 각 면에 대해 개별적으로 설정할 수 있습니다.

속성 값:

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

사용예시

.example {
  border: 2px solid black; /* 모든 면에 동일하게 적용 */
}

---

border-radius:

border-radius 속성은 테두리의 모서리를 둥글게 만듭니다.
이 속성은 모서리를 부드럽게 하여 요소의 디자인을 더 부드럽고 친근하게 만듭니다.
각 모서리에 대해 개별적으로 값을 설정할 수 있습니다.

속성 값:

• 단일 값(예: 10px는 모든 모서리에 적용)
• 각 모서리에 대한 개별 값 설정(예: 10px 20px 30px 40px는 왼쪽 상단부터 시계 방향으로 적용)

사용예시

.example {
  border-radius: 10px; /* 모든 모서리 둥글게 */
  border-radius: 5px 10px 15px 20px; /* 왼쪽 상단부터 시계 방향으로 적용 */
}

---