힐링 ASMR 과 프로그래밍

box-shadow: 수평거리 값 | 수직거리 값 | blur 값 | 확장거리 값 | 색상 값 | inset;

div {

box-shadow:2px 2px 3px 0 black; /* 수평거리 2px, 수직거리 2px, blur 3px, 확장거리 0, 색상 검은색 */

}

body {

background-color:#ff0000;                         /* #ff0000, rgb(255, 0, 0), red */

background-image:url(background.jpg);

background-repeat:repeat;                          /* repeat, repeat-x, repeat-y, no-repeat */

background-position:50% 50%;                 /* 50px 50px, left top, right bottom */

background-attachment: fixed;                 /* scroll */

background-size: auto;                               /* auto, contain, cover, 크기값, 백분율 */

background-clip:border-box;                    /* padding-box, content-box */

background-origin:border-box;                /* padding-box, content-box */

}

또는

body{

background: url(background.jpg) repeat 50% 50% fixed;

}

크기 값 단위

브라우저 기본 글꼴 크기 비교.

1. [속성 = 값] : 주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용한다.

input[type="text"]{

width: 150px;

background-color:red;

border:1px solid #000000;

}

2. [속성 ~= 값]: 비교할 값이 여러 개일 경우 그중 하나만 일치해도 스타일을 적용합니다.

h2[title ~= "목차"]{

color: red;

font-weight:bold;

}

3. [속성 ^= 값]: 지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용합니다.

h2[title ^= "목차"] {

background: url(item.png) no-repeat;

padding: 5px 30px;

}

4. [속성 $= 값] : 지정한 문자로 끝나는 속성에 대해서만 스타일을 적용.

a[href $= ".hwp"]{

background: url(hwp_icon.gif) center right no-repeat;

padding-right:25px;

}

5. [속성 |= 값] : 속성이 지정한 값으로 시작하면 스타일을 적용.

6. [속성 *= 값] : 사용자가 지정한 속성 값이 앞이나 뒤, 또는 중간 등 어느 위치에 있든지 해당 값이 포함되어 있으면 스타일이 적용.