border

1 개요
2 문법
3 예제

개요

border는 다음의 속성을 포함하는 단축 속성으로, 테두리를 만듭니다.

border-width
border-style
border-color

문법

border: border-width border-style border-color | initial | inherit

border-width : 테두리의 두께를 정합니다. 기본값은 medium입니다.
border-style : 테두리의 모양을 정합니다. 기본값은 none입니다.
border-color : 테두리의 색을 정합니다. 기본값은 선택한 요소의 색입니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

border-width에는 다음의 값을 넣을 수 있습니다.

medium | thick | thin | length | initial | inherit

border-style에는 다음의 값을 넣을 수 있습니다.

dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid | initial | inherit

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>CSS</title>
    <style type="text/css">
      div {
        margin: 10px 0px;
        text-align: center;
        font-family: Consolas, monospace;
        font-style: italic;
        font-size: 13px;
      }
      .a {
        border: 4px dashed #bcbcbc;
      }
      .b {
        border: thick dotted #f44336;
      }
      .c {
        border: 5pt groove #3f51b5;
      }
      .d {
        border: 0.4em inset #009688;
      }
      .e {
        border: 5px ridge #ff5722;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <p>border: 4px dashed #bcbcbc;</p>
    </div>
    <div class="b">
      <p>border: thick dotted #f44336;</p>
    </div>
    <div class="c">
      <p>border: 5pt groove #3f51b5;</p>
    </div>
    <div class="d">
      <p>border: 0.4em inset #009688;</p>
    </div>
    <div class="e">
      <p>border: 5px ridge #ff5722;</p>
    </div>
  </body>
</html>

CSS / Reference / background-attachment

background-attachment는 배경 이미지의 스크롤 여부를 정하는 속성입니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / quotes

quotes는 q 태그로 만든 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 속성입니다. 기본값 : 큰따옴표 상속 : Yes 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / box-sizing

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / calc()

calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 다음은 는 글자 크기를 20px로 설정합니다. font-size: calc( 10px + 10px );

CSS / Reference / border-width

border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-width border-right-width border-bottom-width border-left-width

CSS / Reference / list-style-type

목록은 ul 태그 또는 ol 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 어떤 모양의 마커를 사용할지는 list-style-type으로 정할 수 있습니다.

CSS / Reference / caption-side

caption-side는 표(table)의 caption 위치를 정하는 속성입니다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / font-style

font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / background-color

background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / background-repeat

background-repeat는 배경 이미지의 반복 여부와 반복 방향을 정하는 속성입니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1