CSS border, HTML 요소 테두리 모양과 스타일을 만드는 속성

BORDER란?

CSS border 속성을 사용하면 HTML 요소를 둘러싼 테두리 모양과 스타일을 내 마음대로 민들 수 있습니다. 너비, 색상, 두께 등을 말이죠.

 

사용법

div {
  border: 1px solid #000000;
}

• div는 element의 한 예시입니다
• border: 뒤에 선의 두께(width), 모양(style), 색상(color)을 차례대로 씁니다
  • 두께(width) : 픽셀 단위로 입력하는 게 일반적이지만, thin, medium, thick으로 사전에 정의된 두께를 입력할 수도 있어요
  • 모양(style) : none, dotted, solid 등 모양을 정할 수 있습니다
  • 색상(color) : 사전에 정의된 색상 이름, RGB, HSL 등을 이용할 수 있어요

 

세 가지 속성을 모두 쓸 필요는 없어요.

border: solid;

border: 2px dotted;

border: outset #f33;

세 가지 속성값을 모두 작성하지 않은 예시입니다.

• 모양만 작성한 경우
• 두께와 모양만 작성한 경우
• 모양과 색상만 작성한 경우

두께의 기본값은 3px, 색상의 기본값은 black이지만, 사전에 정의된 기본값이 있으면 그걸 따를거에요.

 

어떤 모양(style)이 있을까?

총 10가지의 스타일이 있다고 해요. 보통은 solid 또는 dotted를 많이 쓰는 것 같습니다.

 

더 자세한 내용은 아래 링크를 참조하세요.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#values

border-style - CSS: Cascading Style Sheets | MDN

 

다른 사용법

.my-box {
  border-width: 1px 2px 3px 4px;
  border-style: solid;
  border-color: #333333;
}

border의 속성 세개를 나누어서 작성할 수도 있습니다.

• border-width : 테두리 두께만 따로 지정하는 속성입니다. 위의 경우는 위쪽 1px, 오른쪽 2px, 아래 3px, 왼쪽 4px로 설정했네요
• border-style : 테두리 스타일만 따로 정하는 속성입니다
• border-color : 테두리 색상만 따로 정하는 속성입니다

 

CSS에서 테두리 속성은 요소의 프레임을 정하고 강조 표시할 수 있는 필수도구라고 합니다.