반응형
Background-effect
CSS Reference2019. 6. 28. 14:23Background-effect

Background Property Sample Description background background: #000 url(background.gif) no-repeat top center 배경 속성 단축형 background-image background-image: url(이미지 경로) 배경 이미지 설정 background-repeat background-repeat: no-repeat 배경 이미지 반복 여부 설정 background-attachment background-attachment: fixed 배경 고정 여부 설정 background-color background-color: #fff 배경색 설정 background-position background-position: top 배경 이미..

Blend effect
CSS Reference2019. 6. 28. 14:22Blend effect

Background-blend-mode normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity Porperty Description normal 배경색의 기본 값을 정의합니다. multiply 더 어두운 색으로 변경됩니다. screen 더 밝은 색으로 변경됩니다. overlay 원래 색상의 농도와 밝기를 변경합니다. darken 어두운 색으로 변경됩니다. lighten 밝은 색으로 변경됩니다. color-dodge 기본 색상을 밝게 합니다. saturation 채도의 변화로 색상이 변경됩니다. color 색을 통해 색상을 변경합니다. luminosity 밝기를/ 통해 색상을 ..

Border-radius
CSS Reference2019. 6. 28. 14:19Border-radius

border-radius border-radius : [border-top-left-radius] [border-top-right-radius] [border-bottom-right-radius] [border-bottom-left-radius] border-radius border01 border02 border03 border04 border05 border06 border07 border08 border09 border10 .border01 { border-radius: 0; } .border02 { border-radius: 5px; } .border03 { border-radius: 10px; } .border04 { border-radius: 15px; } .border05 { border-r..

Box-shadow
CSS Reference2019. 6. 28. 12:59Box-shadow

box-shadow box-shadow : [h-shadow] [v-shadow] [blur] [spread] [color] [inset] / none; 속성 설명 h-shadow 그림자의 수평(X)축 거리를 나타냅니다. v-shadow 그림자의 수직(Y)축 거리를 나타냅니다. blur 그림자의 흐림 정도를 나타냅니다. spread 그림자의 거리를 나타냅니다. color 그림자의 색을 나타냅니다. inset 그림자의 효과를 내부로 나타냅니다. box-shadow shadow01 shadow02 shadow03 shadow04 shadow05 shadow06 shadow07 shadow08 shadow09 shadow10 .shadow01 { box-shadow: 0px 0px 5px rgba(0, 0, ..

반응형
image