CSS 속성(3) - 테두리(border) 와 색상 & 모서리 둥글게(border-radius)

테두리 선(border)

border은 요소의 테두리 선을 지정하는 단축 속성입니다.

* 요소의 크기가 늘어납니다!

단축 속성이어서 개별 속성으로 나눠져 있습니다.

각각 선-두께(border-width), 선-종류(border-style), 선-색상(border-color)입니다.

 

border 속성의 기본값이 있습니다.

두께는 medium이고, 종류는 none이며, 색상은 black입니다.

종류의 기본값이 none이라 출력되지 않습니다.

 

여기서 4px 두께를 넣었고 solid 실선을 넣어서 위 예시처럼 나옵니다.

 

테두리 선의 두께

border-width는 요소 테두리 선의 두께을 지정하는단축 속성입니다.

border-width은 medium란 기본값(중간 두께)이 들어 있으며,

너비 지정시, px, em, %등 단위로 지정할 수 있습니다.

thin(얇은 두께)과 thick(두꺼운 두께) 값도 있습니다.

 

border-width는 아래 특징을 갖고 있습니다.

border-width:  top, right, bottom, left  ;

border-width:  top, bottom   left, right  ;

border-width:  top   left, right   bottom  ;

border-width:  top   right   bottom   left  ;

 

테두리 선의 종류

border-style는 요소 테두리 선의 종류을 지정하는단축 속성입니다.

border-style은 none란 기본값(선 없음)이 들어 있습니다.

solid(실선, 일반 선), dashed(파선)을 자주 사용됩니다.

dotted(점선), double(두 줄 선),

groove(홈이 파여있는 모양), ridge(솟은 모양, groove의 반대),

inset(요소 전체가 들어간 모양), outset(요소 전체가 나온 모양)이 있지만

자주 사용되지 않습니다.

 

border-style는 아래 특징을 갖고 있습니다.

border-style:  top, right, bottom, left  ;

border-style:  top, bottom   left, right  ;

border-style:  top   left, right   bottom  ;

border-style:  top   right   bottom   left  ;

 

테두리 선의 색상

border-color는 요소 테두리 선의 색상을 지정하는단축 속성입니다.

border-color은 black란 기본값(검정색)이 들어 있습니다.

각 색상을 적용할 수 있으며,

transparent란 투명도도 부여할 수 있습니다.

 

css에서 색상 표현하는 방식

색상 이름	브라우저에서 제공하는 색상 이름	red, tomato, royalblue
Hex 색상코드	16진수 색상(Hexadecimal Colors)	#000, #FFFFFF
RGB	빛의 삼원색	rgb(255, 255, 255)
RGBA	빛의 삼원색 + 투명도	rgba(0, 0, 0, 0.5)
HSL	색상, 채도, 명도	hsl(120, 100%, 50%)
HSLA	색상, 채도, 명도 + 투명도	hsla(120, 100%, 50%, 0.3)

색상 이름은 각 브라우저 공급사가 조금씩 다르게 표현할 수 있습니다.

그래서 연습할 때는 색상 이름으로 사용해도 되지만,

정식 서비스를 런칭할 때는 Hex 색상코드 사용을 권장합니다.

실무에서도 Hex 색상코드와 RGB를 가장 많이 사용되며,

HSL와 HSLA 사용이 많지 않습니다.

 

테두리 선을 지정하는 기타 속성들이 아래와 같습니다.

border-방향

border-방향-속성

border-top: 두께 종류 색상 ;

border-top-width: 두께;

border-top-style: 종류;

border-top-color: 색상;

 

모서리 둥글게(border-radius)

border-radius는 요소의 모서리를 둥글게 깎아줍니다.

border-radius은 0란 기본값(둥글게 없음)이 들어 있으며,

너비 지정시, px, em, vw등 단위로 지정할 수 있습니다.

 

border-radius는 아래 특징을 갖고 있습니다.

border-radius:  top   right   bottom   left  ;