반응형

'CSS'에 해당되는 글 4건

  1. 2014.08.22 box-shadow 속성.
  2. 2014.08.21 배경색과 배경 이미지
  3. 2014.08.21 크기 값 단위.
  4. 2014.08.21 속성 선택자

box-shadow 속성.

CSS 2014. 8. 22. 10:14
반응형

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
Posted by 컴스터
,

배경색과 배경 이미지

CSS 2014. 8. 21. 23:25
반응형

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;

}



반응형

'CSS' 카테고리의 다른 글

box-shadow 속성.  (0) 2014.08.22
크기 값 단위.  (0) 2014.08.21
속성 선택자  (0) 2014.08.21
Posted by 컴스터
,

크기 값 단위.

CSS 2014. 8. 21. 12:13
반응형

크기 값 단위

단위

 설명

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%


반응형

'CSS' 카테고리의 다른 글

box-shadow 속성.  (0) 2014.08.22
배경색과 배경 이미지  (0) 2014.08.21
속성 선택자  (0) 2014.08.21
Posted by 컴스터
,

속성 선택자

CSS 2014. 8. 21. 10:29
반응형

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


반응형

'CSS' 카테고리의 다른 글

box-shadow 속성.  (0) 2014.08.22
배경색과 배경 이미지  (0) 2014.08.21
크기 값 단위.  (0) 2014.08.21
Posted by 컴스터
,


반응형