c03. CSS 테두리 프로퍼티

CSS 테두리 프로퍼티

CSS 테두리 프로퍼티 (border property) 는 태그의 테두리 색상, 폭, 및 스타일을 지정합니다.

테두리-스타일 프로퍼티 (border-style property) 로는 테두리의 종류를 지정합니다.

border-style: dotted; //도트 ......
border-style: dashed; //데시 ------
border-style: solid; //실선 ______
border-style: double; //이중선 ======
border-style: inset; //들어간 3차원
border-style: outset; //돌출된 3차원
border-style: none; //없음
border-style: hidden; //숨겨짐

---

일단 테두리-스타일 프로퍼티 (border-style property) 가 적용되면 테두리에 대한 다른 프로퍼티 들도 설정할 수 있습니다.

테두리-색상 프로퍼티 (border-color property) 로 테두리의 색상을 지정합니다.

border-style: solid; border-color: green;

녹색 실선을 지정하는 구문입니다.

테두리-색상 (border-color) 을 설정하지 않으면 태그의 색상을 상속 받습니다.

---

여러 개의 테두리 프로퍼티 (border property) 를 한 줄로 표현할 수 있습니다.

<style>
div {padding: 5px; margin: 5px;}
div.myDashed {border: 1px dashed blue;}
div.myDotted {border: 1px dotted blue;}
div.mySolid {border: 1px solid blue;}
</style>

<div>테두리 두께, 선 모양, 테두리 색상 순서로 프로퍼티를 적어줍니다</div>
<div class="myDashed">테두리 두께, 선 모양, 테두리 색상 순서로 프로퍼티를 적어줍니다</div>
<div class="myDotted">테두리 두께, 선 모양, 테두리 색상 순서로 프로퍼티를 적어줍니다</div>
<div class="mySolid">테두리 두께, 선 모양, 테두리 색상 순서로 프로퍼티를 적어줍니다</div>

테두리 두께, 선 모양, 테두리 색상 순서로 프로퍼티를 적어줍니다

테두리 두께, 선 모양, 테두리 색상 순서로 프로퍼티를 적어줍니다

테두리 두께, 선 모양, 테두리 색상 순서로 프로퍼티를 적어줍니다

테두리 두께, 선 모양, 테두리 색상 순서로 프로퍼티를 적어줍니다

---

[광고] Udemy 동영상 강의로 보기