css border 속성의 이해

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