가이드라인

외곽선(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픽셀 두께, 보라색 이중선 */ }

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

가이드라인

AI 튜터

배포

디자인

업로드

수업 노트

즐겨찾기

도움말