< 테두리 관련 스타일 >
- 테두리 스타일
> border-위치-style : none / dotted / dashed / solid / double / groove* / ridge* / inset* / outset*;
* groove : 패인 액자 느낌
* ridge : 튀어나온 액자 느낌
* inset : 들어간 박스 느낌
* outset : 튀어나온 박스 느낌
#test4 {
border-style:groove; /* 패인 액자 느낌*/
border-width: 10px;
border-top-left-radius: 30px;
}
#test5{
border-style: ridge; /* 튀어나온 액자 느낌*/
border-width: 10px;
border-bottom-right-radius: 50px;
}
#test6{
border-style: inset; /* 들어간 느낌 */
border-width: 10px;
}
#test7{
border-style: outset; /* 튀어나온 느낌 */
border-width: 10px;
}
![]() |
![]() |
![]() |
![]() |
- 테두리 두께
> border-위치-width : 테두리 두께 px;
- 테두리 색상
> border-위치-color : 테두리 색상;
- 테두리 모서리를 동그랗게
> border-위치-radius : 숫자 px; (위치 생략 시 모든 모서리가 동그랗게 바뀜)
- 박스에 그림자
> box-shadow : 가로(x) 세로(y) 흐림정도 번짐정도 색상; (공백으로 구분)
< 배경 관련 스타일 >
> background-color / background : 배경색을 지정하고자 할 때 사용
> background-clip : 배경색을 적용시키고자 하는 범위를 지정할 때 사용
[ 표현법 ]
선택자 {
background-clip : border-box / padding-box / content-box;
}
- 배경을 이미지로 지정할 때 사용할 수 있는 속성
[ 표현법 ]
선택자 {
background-image : url(이미지경로);
background-repeat : repeat / repeat-x / repeat-y / no-repeat;
background-size : auto / contain / cover / 숫자(px/%);
background-position : left / right / center 중 1
top / bottom / center 중 1
background-attachment : scroll / fixed;
}
'개발 > Front-end' 카테고리의 다른 글
[JavaScript] 자바스크립트 개요 / 장단점 / 작성 방식 (0) | 2022.10.29 |
---|---|
[CSS] 레이아웃 관련 스타일 - width, height / display / position / z-index / float (0) | 2022.10.29 |
[CSS] 영역 관련 스타일 / 여백 및 간격 관련 스타일 (0) | 2022.10.28 |
[CSS] 텍스트 관련 스타일 / 목록 관련 스타일 (0) | 2022.10.25 |
[CSS] 글꼴 관련 스타일 (0) | 2022.10.25 |