css border 속성의 이해

2017.03.10 01:00

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 관련 글을 차례대로 정리한 학습목록을 참조하시기 바랍니다.

신고

댓글이 0개 달렸습니다.

관심분야

분류 전체 (1572)
티스토리 공부 (65)
잉고래 (477)
컴퓨터 (162)
문화연예 (173)
먹고 놀기 (76)
정보 (608)

블로그 방문수

  • 전체 : 6,895,431
    오늘 : 231
    어제 : 1,499
Statistics Graph

티스토리 툴바