[HTML] border-lefr/top/right/bottom 사용방법

이번 글에서는 html 에서 태두리의 색과 크기를 결정하는 속성인 CSS border 속성에 대하여 다루겠습니다.

 

 

# border 속성 정의

  우리가 보는 웹페이지들은 각각의 영역들을 차지하는 정보들로 구성되어 있습니다. 그리고 우리는 각각의 영역에 특정한 서식을 적용하여 '꾸밉니다.' 이번 글에서는 이 border 속성을 통하여 우리가 지정해 놓은 영역에 우리가 원하는 색깔과 크기의 테두리를 출력하는 방법에 대하여 다루었습니다.

• border는 px 과 solid라는 속성과 함께 사용되며 px은 테두리의 크기를, solid 는 테두리의 색상을 지정합니다.
• border는 각각의 4방위 left / top / right / bottom 을 접두어로하여 border-bottom : 원하는 px slolid 원하는 색과 같이 사용합니다.

 

 

# border 사용방법

  아래 사진에 3개의 링크로 이루어진 웹페이지의 header 부분을 가져왔습니다. 이 header는 배경색이 노란색이기 때문에 타 영역과 구분성이 확연하지 않습니다. 이러한 경우에는 border 속성을 활용하여 테두리를 넣어줌으로서 독립적인 영역임을 확연히 보여줄 수 있습니다.

html 사진 1

border-bottom 만을 설정하겠으며, 다른 방향의 테두리 설정도 아래와 동일합니다.

#header {
  background-color : yellow;
  height: 50px;
  max-width: 500px;
  border-bottom: 10px solid red;
 }

#gnb ul li {
  display: inline;
  margin : 10px;
  font-size: 1.7em;
}

  여기서 저는 빨간색 테두리를 넣기 위하여 위와 같이 red 속성을 solid에 지정하였지만 더 원하는 색깔이 있을 경우에는 일련의 코드를 적용함으로서 더욱 복잡한 색깔까지 적용이 가능합니다.

html 사진 2

 

여기까지 html 에서 태두리의 색과 크기를 결정하는 속성인 CSS border 속성에 대하여 다루었습니다.