외곽선(Border)

Border는 요소의 외곽선(경계선)을 의미합니다.

CSS border 속성을 사용하면 요소 경계선에 선을 그리고, 이 선의 스타일, 두께, 색상을 지정할 수 있습니다.

border 스타일

경계선을 실선, 점선, 이중선 등으로 지정할 수 있습니다.

예시 코드:

CSS

.box {
  border-style: solid; /* 실선 */
}

다른 스타일로는 dotted (점선), dashed (파선), double (이중선) 등이 있습니다.

border 두께

border-width로 경계선의 두께를 조절할 수 있습니다.

예시 코드:

CSS

.box {
  border-width: 5px; /* 두께 5픽셀 */
}

border 색상

border-color로 경계선 색상을 "red"와 같은 텍스트나 rgb, hex코드로 지정할 수 있습니다.

예시 코드:

CSS

.red-box {
  border-color: red; /* 빨간색 경계선 */
}

.green-box {
  border-color: #00ff00; /* 초록색 경계선 */
}

.blue-box {
  border-color: rgb(0, 0, 255); /* 파란색 경계선 */
}

각 경계선마다 다르게 설정하기

상자의 네 변 각각에 다른 종류나 색상의 테이프를 붙일 수 있죠? CSS에서도 이렇게 각 변마다 다르게 border를 설정할 수 있습니다.

예시 코드:

CSS

.box {
  border-top: 3px solid blue; /* 상단은 3픽셀 두께, 파란색 실선 */
  border-right: 5px dashed green; /* 우측은 5픽셀 두께, 초록색 파선 */
  border-bottom: 2px dotted red; /* 하단은 2픽셀 두께, 빨간색 점선 */
  border-left: 4px double purple; /* 좌측은 4픽셀 두께, 보라색 이중선 */
}

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!

강의 등록하기로그인하기