CSS로 border box 그리기

이번 글에서는 CSS의 border 속성을 이용하여 박스의 테두리를 그리는 방법에 대해 알아보겠습니다. border 속성은 박스의 테두리의 굵기, 스타일, 색상을 지정할 수 있고 상하좌우 각각 다른 값을 줄 수도 있습니다. 또한 outline 속성을 이용하여 테두리 바깥에 추가적인 선을 그릴 수도 있습니다. border box를 그리는 방법을 알아보기 전에 박스 모델에 대해 간단히 설명하겠습니다.

 

박스 모델이란?

박스 모델은 HTML 요소를 사각형의 박스로 표현하는 개념입니다. 박스 모델은 다음과 같은 네 가지 요소로 구성됩니다.

• 콘텐츠(content): 박스 안에 들어가는 텍스트나 이미지 등의 실제 내용입니다. 콘텐츠의 크기는 width와 height 속성으로 지정할 수 있습니다.
• 패딩(padding): 콘텐츠와 테두리 사이의 여백입니다. 패딩은 콘텐츠의 영역을 확장시키며 배경색이 적용됩니다. 패딩의 크기는 padding 속성으로 지정할 수 있습니다.
• 테두리(border): 박스의 외곽선입니다. 테두리는 콘텐츠와 패딩을 감싸며, border 속성으로 굵기, 스타일, 색상을 지정할 수 있습니다.
• 마진(margin): 테두리와 다른 박스 사이의 여백입니다. 마진은 콘텐츠의 영역을 확장시키지 않으며 배경색이 적용되지 않습니다. 마진의 크기는 margin 속성으로 지정할 수 있습니다.

 

border 속성 사용하기

border 속성은 박스의 테두리를 그리는데 사용되는 속성입니다. border 속성은 다음과 같은 세 가지 하위 속성으로 구성됩니다.

• border-width: 테두리의 굵기를 지정합니다. 단위는 px, em, rem 등을 사용할 수 있으며 thin, medium, thick 등의 키워드도 사용할 수 있습니다.
• border-style: 테두리의 스타일을 지정합니다. none, solid, dotted, dashed, double, groove, ridge, inset, outset 등의 키워드를 사용할 수 있습니다.
• border-color: 테두리의 색상을 지정합니다. 색상 이름, 16진수, rgb, rgba, hsl, hsla 등의 방식으로 표현할 수 있습니다.

border 속성은 다음과 같은 방식으로 사용할 수 있습니다.

• border: width style color; : 테두리의 굵기, 스타일, 색상을 한 번에 지정합니다. 예) border: 1px solid red;
• border-width: width; : 테두리의 굵기만 지정합니다. 예) border-width: 2px;
• border-style: style; : 테두리의 스타일만 지정합니다. 예) border-style: dashed;
• border-color: color; : 테두리의 색상만 지정합니다. 예) border-color: blue;

테두리의 상하좌우 각각에 다른 값을 주고 싶다면, 다음과 같은 방식으로 사용할 수 있습니다.

• border-top: width style color; : 위쪽 테두리의 굵기, 스타일, 색상을 지정합니다. 예) border-top: 3px dotted green;
• border-right: width style color; : 오른쪽 테두리의 굵기, 스타일, 색상을 지정합니다. 예) border-right: 4px doubleyellow;
• border-bottom: width style color; : 아래쪽 테두리의 굵기, 스타일, 색상을 지정합니다. 예) border-bottom: 5pxgroove
• purple; border-left: width style color; : 왼쪽 테두리의 굵기, 스타일, 색상을 지정합니다. 예) border-left: 6px ridge pink;

width, style, color 중 하나만 지정하고 싶다면, 다음과 같은 방식으로 사용할 수 있습니다.

• border-top-width: width; : 위쪽 테두리의 굵기만 지정합니다. 예) border-top-width: 7px;
• border-right-style: style; : 오른쪽 테두리의 스타일만 지정합니다. 예) border-right-style: inset;
• border-bottom-color: color; : 아래쪽 테두리의 색상만 지정합니다. 예) border-bottom-color: orange;

 

border 속성을 사용하는 예제를 보겠습니다.

[HTML]

<div class="box1">박스 1</div>
<div class="box2">박스 2</div>
<div class="box3">박스 3</div>

[CSS]

.box1 {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 5px solid red; /* 테두리의 굵기, 스타일, 색상을 한 번에 지정 */
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  border-width: 10px; /* 테두리의 굵기만 지정 */
  border-style: dashed; /* 테두리의 스타일만 지정 */
  border-color: blue; /* 테두리의 색상만 지정 */
}

.box3 {
  width: 100px;
  height: 100px;
  background-color: lightyellow;
  border-top: 3px dotted green; /* 위쪽 테두리의 굵기, 스타일, 색상을 지정 */
  border-right: 4px double yellow; /* 오른쪽 테두리의 굵기, 스타일, 색상을 지정 */
  border-bottom: 5px groove purple; /* 아래 테두리의 굵기, 스타일, 색상을 지정 */

 

결과

위에 있는 html과 css 코드를 구현하면 아래와 같이 나오게 됩니다.

참고하셔서 html에서 박스(box) 그리는데 도움이 되셨으면 좋겠습니다.