box-shadow: 수평거리 값 | 수직거리 값 | blur 값 | 확장거리 값 | 색상 값 | inset;
div {
box-shadow:2px 2px 3px 0 black; /* 수평거리 2px, 수직거리 2px, blur 3px, 확장거리 0, 색상 검은색 */
}
'CSS' 카테고리의 다른 글
배경색과 배경 이미지 (0) | 2014.08.21 |
---|---|
크기 값 단위. (0) | 2014.08.21 |
속성 선택자 (0) | 2014.08.21 |
box-shadow: 수평거리 값 | 수직거리 값 | blur 값 | 확장거리 값 | 색상 값 | inset;
div {
box-shadow:2px 2px 3px 0 black; /* 수평거리 2px, 수직거리 2px, blur 3px, 확장거리 0, 색상 검은색 */
}
배경색과 배경 이미지 (0) | 2014.08.21 |
---|---|
크기 값 단위. (0) | 2014.08.21 |
속성 선택자 (0) | 2014.08.21 |
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;
}
box-shadow 속성. (0) | 2014.08.22 |
---|---|
크기 값 단위. (0) | 2014.08.21 |
속성 선택자 (0) | 2014.08.21 |
크기 값 단위
단위 |
설명 |
em |
해당 글꼴의 대문자 M의 너비를 기준으로 합니다. |
ex |
x-height 해당 글꼴의 소문자 x의 높이를 기준으로 합니다. |
px |
픽셀 모니터에 따라 상대적인 크기가 됩니다. |
pt |
포인트, 보통 문서에서 많이 사용하는 단위입니다. |
브라우저 기본 글꼴 크기 비교.
포인트(pt) |
픽셀(px) |
em |
퍼센트(%) |
10pt |
13px |
0.8em |
80% |
10.5pt |
14px |
0.875em |
87.5% |
11pt |
15px |
0.95em |
95% |
12pt |
16px |
1em |
100% |
13pt |
17px |
1.05em |
105% |
box-shadow 속성. (0) | 2014.08.22 |
---|---|
배경색과 배경 이미지 (0) | 2014.08.21 |
속성 선택자 (0) | 2014.08.21 |
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. [속성 *= 값] : 사용자가 지정한 속성 값이 앞이나 뒤, 또는 중간 등 어느 위치에 있든지 해당 값이 포함되어 있으면 스타일이 적용.
box-shadow 속성. (0) | 2014.08.22 |
---|---|
배경색과 배경 이미지 (0) | 2014.08.21 |
크기 값 단위. (0) | 2014.08.21 |