본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

border (테두리 스타일)

최초 작성일
최종 수정일
이번 시간에는...
CSS에서 박스 div나 여러 요소에 테두리 스타일을 줄 수 있는 border 속성을 살펴 봅니다. CSS 에서 줄 수 있는 테두리 종류들을 알아보고, border 단축 속성을 통해서 박스 모델에서 스타일 주게 되는 네 방향의 순서도 알아봅니다.

앞서 배경 스타일에 이어서, 이번에는 테두리를(border) 넣는 스타일을 살펴보도록 하겠습니다.

요소의 네 가지 방향

기본적으로 모든 요소는 사각형의 형태를 띄고 있습니다. 그리고 사각형은 말 그대로 네 개의 변이 모여 만든 형태입니다. 그렇기 때문에 요소의 테두리 역시 네 개의 방향을 가지고 있습니다.

위는 top, 오른쪽은 right, 아래쪽은 bottom, 왼쪽은 left입니다.
요소 각 방향의 명칭

위와 같이 시계방향으로 top, right, bottom, left 까지의 방향을 'border-top', 'border-right'와 같은 방식으로 선언해 줄 수 있습니다.

테두리(border)를 구성하는 세가지 요소

이 테두리는 각 변마다 선의 굵기(width), 선의 형태(style), 선의 색상(color)를 지정할 수 있습니다.

선 굵기 (border-width)

선의 굵기는 px이나 em 등의 단위를 쓸 수 있으며, 보통 px를 많이 사용합니다. 만약 맨 위의 테두리 선 굵기를 선언한다면 다음과 같이 작성합니다.

앞에 본 코드와 같이 속성을 작성할 때에는 "border-방향-요소"의 방식으로 작성합니다.

선의 형태 (border-style)

선의 형태는 실선이나, 점선 등으로 바꿔줄 수 있으며, 또는 아예 없앨 수도 있습니다. 다음과 같은 방식으로 작성합니다.

border-style 가능 속성

none
선을 없앱니다. 대부분 요소의 기본 값입니다.
solid
실선의 형태로 적용합니다.
dotted
점선 형태로 적용합니다.
dashed
바느질선 같은 형태의 점선입니다.
double
이중 선의 형태입니다. 굵기가 3px 이상이 되어야 볼 수 있습니다.
groove
입체적으로 선을 홈이 들어간 것처럼 보여줍니다. 최소 2px은 되야 확인 가능합니다.
ridge
groove와 비슷하지만, 음영 값이 반대라 선이 돌출되어 보입니다.
inset
요소 전체가 안으로 들어가 보입니다.
outset
inset의 반대입니다. 요소 전체가 밖으로 돌출되어 보입니다.
inherit
부모의 속성을 상속받습니다.

border-style 예시

none
solid
dotted
dashed
double
groove
ridge
inset
outset

선의 색상 (border-color)

선의 색상을 결정합니다. 보통의 색상 속성과 마찬가지로, 색상 명이나 색상 코드가 들어갈 수 있습니다.

테두리(border) 속성의 조합

만약 여러분이 요소의 상단에 3px 굵기의 빨간 점선을 넣고 싶다면, 다음과 같이 스타일을 지정할 것입니다.

보기에 굉장히 비효율적으로 보입니다. 그나마 위의 선만 스타일을 준 것이라 3개의 속성이지, 만약 네 변 모두 스타일을 준다면 12개의 속성을 선언해야 합니다.

예상 하셨겠지만, 이 border 속성 역시 줄여서 선언할 수 있습니다. 앞서 살펴봤던 코드는 다음과 같이 줄여 쓸 수 있습니다.

네 가지 방향 모두 동일합니다. 그리고 다른 줄임 속성처럼 필요한 값만 선택해서 선언하셔도 상관없습니다.

또한 방향 뿐만 아니라, 형태 요소들도 줄인 속성을 줄 수 있습니다.

앞과 같이 줄 경우 모든 변이 3px의 굵기를 가지게 됩니다. 그렇다면, 만약 각각 다른 굵기를 주고 싶다면 어떻게 주어야 할까요? 다음을 보겠습니다.

네 방향의 조합

네 개의 변을 top, right, bottom, left 순으로 적어주면 됩니다. 이 순서는 top 부터 시작하여 시계 방향으로 정해집니다. 때문에 해당 요소의 선 굵기는 맨 위가 3px, 오른쪽이 2px, 아래쪽 1px, 왼쪽 2px을 가지게 됩니다.

이 방향은 앞으로도 살펴볼 속성들에서도 많이 사용하기 때문에 꼭 숙지하시기 바랍니다.

만약 다음과 같이 4개가 아닌 3개를 적어주면 어떻게 인식할까요?

이럴 경우 각각 "top, (right+left), bottom" 으로 인식합니다. 다시 말해, 위, 양 옆, 아래 가 됩니다. 이는 '3px 1px 2px 1px'과 같습니다.

다음은 2개를 적어줬을 때 입니다. 선 색상으로 적어 봤습니다.

이 경우는 "(top+bottom), (right+left)"로 받아드립니다. 다시 말해, "위아래, 양 옆" 순으로 들어가는 것입니다. 이는 'red black red black'과 같은 수치입니다.

다시 한 번 말씀드리지만, 이러한 방향의 조합은 다른 속성들도 많이 사용하니 꼭 숙지하도록 합니다.

border 속성

앞서 border 속성들의 조합들을 봤습니다. 그리고 마지막으로 가장 줄인 속성인 border를 살펴보겠습니다.

border-top, border-left 등과 같이 지정합니다. border는 모든 변에 동일하게만 적용할 수 있습니다.

요점 정리
  • 박스 모델에 들어가는 단축 스타일의 네 방향의 순서 - 시계방향
  • 단축 스타일에서 값을 4개 입력 시 - 'top' 'right' 'bottom' 'left'
  • 스타일 값 3개 입력 시 - 'top' 'right/left' 'bottom'
  • 스타일 값 2개 입력 시 - 'top/bottom' 'right/left'
  • border-width - 선 굵기
  • border-style - 테두리 형태
  • border-color - 선의 색상
  • border 속성은 border-left, border-left-width와 같은 방식으로 속성명을 조합하여 사용.
  • border 만 선언할 경우 단축 속성

이 글이 유용하셨다면 친구들에게 공유 해주세요.