[CSS] 테두리 관련 스타일 / 배경 관련 스타일

 

< 테두리 관련 스타일 >

 

- 테두리 스타일

> 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;

}