CSS 테두리 작업 기초

이제 요소에 테두리를 추가하는 방법을 배우겠습니다. 이는 세 가지 속성을 사용하여 수행됩니다: border-width 속성은 테두리의 두께를 설정하고, border-color는 색상을 설정하며, border-style는 테두리 유형을 설정합니다.

처음 두 속성은 명백한 방식으로 작동합니다: border-color는 color 속성과 동일한 형식의 색상을 받아들이고, 테두리 두께는 픽셀 단위로 설정됩니다. 반면에 border-style 속성은 키워드 형태의 값을 받아들입니다. 예를 들어, solid 값은 실선을 설정합니다.

예를 들어, 3 픽셀 두께에 실선 형태의 빨간색 테두리를 만들어 보겠습니다:

html<div id="elem"></div>

css#elem {
  border-width: 3px;    /* 두께 3px */
  border-style: solid;  /* 실선 형태 */
  border-color: red;    /* 빨간색 */
  width: 300px;
  height: 100px;
}

Результат:

다음 강의에서 테두리 작업에 대해 더 자세히 살펴보겠습니다.