[HTML/CSS] div 테두리 그리기 (border, outline)

 

CSS의 속성을 이용하여 div의 테두리를 그리는 방법을 정리하였습니다.

 

1. border
2. border-style, border-width, border-color
3. border-top, border-right, border-bottom, border-left
4. outline
5. outline과 border의 차이점

 

1. border

 border 속성 사용하기 1 

<div>
  안녕하세요?
</div>

div {
  width : 100px;
  height: 100px;
  background-color: #f5d682;
  border: 1px solid red;
}

 

 

 

 

 

CSS의 border속성을 정의하여 div의 테두리를 그려주었습니다.

 

 border 속성 사용하기  2 

<div id='dotted'>
  dotted
</div>
<div id='red'>
  red solid
</div>
<div id='thick'>
  6px solid
</div>

div {
  width : 50px;
  height: 50px;
  background-color: #f5d682;
}

#dotted {
  border: dotted;
}

#red {
  border: solid red;
}

#thick {
  border: 6px solid;
}

 

border 속성은 border-style, border-width, border-color 속성을 한번에 정의하는 단축 속성입니다.

위 3개의 값중 1개 이상의 속성을 정의하면 되는데, 

순서는 상관 없습니다.

 

 

 

2. border-style, border-width, border-color

 border-style, border-width, border-color 

<div id='dotted'>
  dotted
</div>
<div id='red'>
  red solid
</div>
<div id='thick'>
  6px solid
</div>

div {
  width : 50px;
  height: 50px;
  background-color: #f5d682;
}

#dotted {
  border-style: dotted;
}

#red {
  border-style: solid;
  border-color: red;
}

#thick {
  border-width: 6px;
  border-style: solid;
}

 

위와 같이 border-width, border-style, border-color 속성을 직접 선언하고, 지정해 줄 수도 있습니다.

 

 border-style  : 테두리의 스타일을 정의합니다.

 - none, hidden, solid, dotted, dashed, double, groove, ridge, inset, outset 값을 가질 수 있습니다.

 border-width  : 테두리의 굵기를 정의합니다.

 border-color  : 테두리의 색깔을 정의합니다.

 

 border-style 속성 값 

다음은 border-style 속성값 예제입니다.

<div id='none'>
  none
</div>
<div id='hidden'>
  hidden
</div>
<div id='solid'>
  solid
</div>
<div id='dotted'>
  dotted
</div>
<div id='dashed'>
  dashed
</div>
<div id='double'>
  double
</div>
<div id='groove'>
  groove
</div>
<div id='ridge'>
  ridge
</div>
<div id='inset'>
  inset
</div>
<div id='outset'>
  outset
</div>

div {
  width : 150px;
  height: 50px;
  background-color: #f5d682;
}

#none {
   border: none 10px;
}

#hidden {
   border: hidden 10px;
}

#solid {
   border: solid 10px;
}

#dotted {
   border: dotted 10px;
}

#dashed {
   border: dashed 10px;
}

#double {
   border: double 10px;
}

#groove {
   border: groove 10px;
}

#ridge {
   border: ridge 10px;
}

#inset {
   border: inset 10px;
}

#outset {
   border: oustset 10px;
}

 

 4개 테두리에 다른 스타일 적용하기 

<div id='dotted'>
  dotted none
</div>
<div id='red'>
  red green blue
</div>
<div id='thick'>
  6px 10px 2px 20px
</div>

div {
  width : 150px;
  height: 50px;
  background-color: #f5d682;
}

#dotted {
  border-style: dotted none;
}

#red {
  border-style: solid;
  border-color: red green blue;
}

#thick {
  border-width: 6px 10px 2px 20px ;
  border-style: solid;
}

 

border-style, border-width, border-color 속성에 최대 4개의 값을 지정하여

위, 오른쪽, 아래, 왼쪽 테두리의 너비, 스타일, 색상을 지정할 수 있습니다.

 

 속성값 1개 

 - 위, 오른쪽, 아래, 왼쪽 4면에 모두 같은 테두리 속성을 지정합니다.

 속성값 2개 

 - 첫번째 값은 위, 아래의 테두리 속성을 지정합니다.

 - 두번째 값은 왼쪽, 오른쪽의 테두리 속성을 지정합니다.

 속성값 3개 

 - 첫번째 값은 위쪽의 테두리 속성을 지정합니다.

 - 두번째 값은 왼쪽, 오른쪽의 테두리 속성을 지정합니다.

 - 세번째 값은 아래쪽의 테두리 속성을 지정합니다.

 속성값 4개 

 - 순서대로 위, 오른쪽, 아래, 왼쪽의 테두리 속성을 지정합니다.

 

 

 

3. border-top, border-right, border-bottom, border-left

 테두리 속성 각각 정의하기 1 

<div id='my_div'>
  4면이 모두 다른 테두리
</div>

div {
  width : 150px;
  height: 50px;
  background-color: #f5d682;
}

#my_div {
  border-top: dashed 3px red;
  border-right: solid 3px green;
  border-bottom: dotted 3px purple;
  border-left: double 3px blue;
}

 

테두리의 위치를 기준으로 width, color, style을 지정할 수도 있습니다.

 

 테두리 속성 각각 정의하기 2 

<div id='my_div'>
  4면이 모두 다른 테두리
</div>

div {
  width : 150px;
  height: 50px;
  background-color: #f5d682;
}

#my_div {
  border-top-style: dashed;
  border-top-width: 3px;
  border-top-color: red;
  
  border-right-style: solid;
  border-right-width: 3px;
  border-right-color: green;
  
  border-bottom-style: dotted;
  border-bottom-width: 3px;
  border-bottom-color: purple;
  
  border-left-style: double;
  border-left-width: 3px;
  border-left-color: blue;
}

상하좌우의 테두리의 color, width, style 각각을 

아래와 같이 각각의 속성을 이용해서 정의할 수도 있습니다.

- border-top-style, border-top-width, border-top-color

- border-right-style, border-right-width, border-right-color

- border-bottom-style, border-bottom-width, border-bottom-color

- border-left-style, border-left-width, border-left-color

 

4. outline

CSS의 outline 속성을 사용해서도 테두리를 그려줄 수 있습니다.

outline 속성도, 

border 속성과 마찬가지로,

속성값으로 outline-color, outline-style, outline-width를 정의할 수 있습니다.

물론 outline-color, outline-style, outline-width 속성값들을 직접 선언하고, 값을 지정할 수도 있습니다.

 

 outline 사용 예제 

<div id='outline'>
  outline
</div>

div {
  width : 100px;
  height: 50px;
  background-color: #f5d682;
}

#outline {
  outline : solid 15px red;
}

 

 

5. outline과 border의 차이점

<div id='border'>
  border
</div>
<div id='border'>
  border
</div>
<div id='outline'>
  outline
</div>
<div id='border'>
  border
</div>

div {
  width : 100px;
  height: 50px;
  background-color: #f5d682;
}

#border {
  border : solid 15px;
}

#outline {
  outline : solid 15px red;
}

 

 outline 속성은 테두리의 두께에 따라 주변 레이아웃을 변형시키지 않습니다. 

 

위 예제에는,

높이가 50px인 div가 4개 있고, 

이중 일부에는 border 속성이 적용되어 있고, 세번째 div에는 outline 속성이 적용되어 있습니다.

그리고 테두리의 두께는 모두 15px입니다.

 

먼저 border 속성이 적용된 div를 살펴보겠습니다.

div의 높이는 50px이지만,

border-width를 15px로 작성하여 적용하였기 때문에,

이 div는 화면에서 실제로는

"15px + 50px + 15px"(위쪽 border 높이 + div 높이 + 아래쪽 border 높이) 만큼 공간을 차지하게 됩니다.

그리고, 그 다음에 오는 div는 그만큼 뒤로 밀려서 화면에 그려지게 됩니다.

그래서 border를 적용하여 레이아웃을 디자인하면, 

div 자체이 높이, 너비 뿐만 아니라, border의 크기까지 고려해서 

레이아웃을 디자인해야합니다.

 

이번에는 outline 속성이 적용된 div를 살펴보겠습니다.

border 속성이 적용된 div와 마찬가지로,

outline 속성이 적용된 div도 화면에서 

"15px + 50px + 15px"(위쪽 border 높이 + div 높이 + 아래쪽 border 높이) 만큼 공간을 차지합니다.

하지만, outline 속성을 사용하면 그 다음에 오는 div의 위치가 더 뒤로 조정되지 않습니다.

원래 div의 높이(50px)만큼 더해진 위치에 다음 div가 오는 것입니다.

따라서, outline 속성을 사용하면, outline 값이 변경되더라도,

다른 div의 위치에 영향을 주지 않습니다.

 

 

 outline 속성으로는 위, 오른쪽, 아래쪽, 왼쪽의 테두리 모양을 각각 다르게 지정할 수 없습니다.  

outline 속성은 상하좌우 테두리의 모양을 각각 다르게 지정할 수 없습니다.

 

---

 

테두리의 모양, 굵기, 색깔을 정의할 수 있는

다양한 CSS 속성들을 알아보았습니다.

 - border
 - border-style, border-width, border-color
 - border-top, border-right, border-bottom, border-left
      - border-top-style, border-top-width, border-top-color
      - border-right-style, border-right-width, border-right-color
      - border-bottom-style, border-bottom-width, border-bottom-color
      - border-left-style, border-left-width, border-left-color
- outline
- outline-style, outline-width, outline-color

크게 border와 outline을 사용하는 방법을 알아보았고,

그 차이점도 알아보았습니다.