[HTML+CSS][CSS 박스모델] 02 - 테두리 관련 속성들

 

[HTML+CSS][CSS 박스모델] 01 - CSS와 박스모델

 

텍스트 단락뿐만 아니라

그림이나 표, 양식 등에 표현할 수 있는

테두리에 대한 관련 속성들에 대해서 알아보자.

 

 

---

 

 

border-style 속성 : 테두리 스타일 지정

 

 

 

 

---

 

 

border-width 속성 : 테두리 두께 지정

 

border-width는 테두리의 두께를 지정하는 것으로

해당 속성을 이용해 한꺼번에 표시할 때 속성 값이 2개라면 위아래와 좌우를 묶어 지정하고

4개라면 시계방향으로(top→right→bottom→left) 적용한다.

 

 

---

 

 

border-color 속성 : 테두리 색상 지정

 

 

 

 

---

 

 

border 속성 : 테두리 스타일 묶어 지정

 

테두리 스타일와 두께, 색상 등

테두리의 여러 속성들을 묶어서 표현할 수 있다.

 

 

 

 

---

 

 

border-radius 속성 : 박스 모서리 둥글게 지정

 

각 위치에 따라 모서리의 둥글기 정도를 다르게 설정할 수 있다.

 

만약, 네 모서리를 다르게 조절하고 싶다면

border-top-left-fadius(왼쪽 위), border-top-right-radius(오른쪽 위),

border-bottom-left-radius(왼쪽 아래), border-bottom-right-radius(오른쪽 아래) 속성을 사용해

각 모서리의 반지름 값을 따로 정해줄 수 있다.

 

 

 

 

- 타원 형태로 둥글게 만들기 -

기존에 원의 형태가 아닌 타원 형태로 둥글게 만들고 싶다면

가로 반지름 크기와 세로 반지름 크기를 함께 지정해 주면 된다.

 

 

 

 

---

 

 

border-shadow 속성 : 그림자 효과

 

box-shadow 속성에서 수평 거리와 수직 거리는

반드시 지정해야하는 필수 속성이다.

 

 

 

 

---

 

 

박스 모델은 단지 내용의 틀을 잡기 위한 것이라고 생각했는데

이렇게 다양한 속성들이 있고 이러한 속성들로 꾸며주니

테두리의 중요성이 꽤 크다고 생각했다.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※