티스토리 뷰

css 테두리 속성들

css의 border 속성을 사용하면 요소(element) 테두리의 스타일, 너비색상을 지정할 수 있습니다. 지난 css 문법을 다시한번 복습하면 css 구문은 선택자(selector)와 선언블록으로 구성되고 각 선언블록은 속성(property)과 (value)로 구성된다고 하였습니다. 다시말해 border란 속성은 선택자의 테두리 모양을 지정합니다.

border-style 속성

border-style 속성은 4면의 테두리에 어떤 종류의 테두리를 표시할지 지정합니다. 만약 개별 면에 스타일을 주고자 하는경우 border-[각면]-style라고 속성을 지정하면 됩니다. 예를 들어 윗면의 스타일을 지정할 경우 border-top-style의 속성값을 지정하면 됩니다. 예: border-top-style: dotted; 쓸 수 있는 속성값은 다음과 같습니다.

  • dotted - 점선 테두리를 정의합니다.
  • dashed - 점선 테두리를 정의합니다.
  • solid - 단색 테두리를 정의합니다.
  • double - 이중 경계를 정의합니다.
  • groove - 3D 그루브 경계를 정의합니다.
  • ridge - 3D ridged border를 정의합니다.
  • inset - 3D 삽입 테두리를 정의합니다.
  • outset - 3D 시작 테두리를 정의합니다.
  • none - 테두리 none 정의
  • hidden - 숨겨진 테두리를 정의합니다.

border-width 속성

border-width 속성은 네 개의 테두리의 너비를 지정합니다. 너비는 특정 크기(px, pt, cm, em 등) 또는 미리 정의된 thin, medium 또는 thick 중 하나를 사용하여 설정할 수 있습니다. 마찬가지로 만약 개별 면에 너비를 지정하고자 하는경우 border-[각면]-width라고 속성을 지정하면 됩니다. 예를들어 border-bottom-width 처럼 말이죠.

  • border-width: 5px;
  • border-width: medium;
  • border-width: 2px 10px 4px 20px;

border-color 속성

border-color 속성은 네 개의 테두리 색상을 설정하는 데 사용됩니다. 색상은 다음과 같이 설정할 수 있습니다.

  • name - "red"와 같은 색상 이름을 지정합니다.
  • 16 진수 - "#ff0000"과 같이 16진수 값을 지정하십시오.
  • RGB - RGB 값을 지정합니다 (예 : "rgb (255,0,0)").
  • transparent

마찬가지로 만약 개별 면에 색상을 지정하고자 하는경우 border-[각면]-color라고 속성을 지정하면 됩니다. 예를들어 border-bottom-color 처럼 말이죠.

border 속성

테두리를 처리 할 때 고려해야 할 많은 속성이 있습니다. 따라서 코드 단축을 위해 border 속성에 모든 개별 테두리 속성을 한꺼번에 지정할 수도 있습니다. border-style (필수), border-width, border-color를 한꺼번에 적는거죠. 예: border: 6px solid red; 마찬가지로 만약 개별 면에 너비를 지정하고자 하는경우 border-[각면] 이라고 속성을 지정하면 됩니다. 예를들어 border-bottom 처럼 말이죠.

border-radius 속성

border-radius 속성은 둥근 테두리를 요소에 추가하는 데 사용됩니다. 예: border-radius: 5px;

css 관련 포스팅

여기까지 css테두리에 관해 알아보았습니다. 좀 더 이해를 돕기위해 css 관련 글을 차례대로 정리한 학습목록을 참조하시기 바랍니다.

'잉고래의 티스토리' 카테고리의 다른 글

css padding 강좌  (0) 2017.03.15
css margin의 이해  (0) 2017.03.12
티스토리 글 1000개 수정 도전기  (7) 2017.03.03
css background 변경  (0) 2017.02.25
네이버 블로그 api 쓸 때 주의사항  (0) 2017.02.23