모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.
문제시, 비공개로 전환하겠습니다.
- 배경 -
CSS를 이용하면 엘리먼트의 배경을 지정할 수 있다. 배경과 관련된 중요속성들을 알아보자.
background-color : red
background-image : url("bg.png")
background-repeat : repeat, no-repeat, repeat-x, repeat-y
background-attachment : scroll, fixed
background-position : left top or x% y% or x y
background-size : 100px 100px or cover or contain
w3schools.com
background.html |
<!doctype> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> div{ font-size:100px; border:5px solid gray; /* background-color:tomato; */ background-image:url('tokyo.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-size: 500px 100px; /*width first, height later*/ background-position: center bottom; } </style> </head> <body> <div> Hello World </div> </body> </html> |
background 속성은 다음과 같이 축약해서 사용할 수도 있다.
background: tomato url('run.png') no-repeat fixed center ;
<필터>
필터는 이미지에 다양한 효과를 추가하는 방법이다.
참고: CSS-TRICKS - filter
filter.html |
<!doctype html> <html> <head> <style media="screen"> img{ transition: all 1s; } img:hover{ filter: grayscale(0%); } h1{ filter: blur(10px); } </style> </head> <body> <h1>Mountain</h1> <img src="sample.mt.jpg" alt=""> </body> </html> |
- Blend -
블랜드는 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법이다.
background-blend-mode: 배경 그래픽-간의 브랜드 효과
blend_1.html |
<!doctype html> <html> <style> blend{ height:400px; border:5px solid; background-color: rgba(255,0,0,0.5); background-size:cover; background-image:url('sample.mt.jpg'); background-blend-mode: saturation; transition:background-color 10s; } .blend:hover{ background-color: rgba(255,0,0,1); transition:background-color 5s; } </style> </head> <body> <div class="blend"> </div> </body </html> |
mix-blend-mode: 컨텐트와 배경 사이의 블랜드 효과
blend_2.html |
<!doctype html> <style> body{ background-image: url(sample.mt.jpg); } .blend{ font-size:2rem; font-weight: bold; color:red; mix-blend-mode:screen; } </style> </head> <body> <div class="blend"> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, maiores!</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam quibusdam cupiditate, necessitatibus ratione illum asperiores sint voluptate vel ex esse vero culpa. Totam aliquam minus eum sequi commodi vitae numquam officia placeat repellat, alias dignissimos. Commodi optio ipsam illum culpa voluptatum, obcaecati veritatis rem similique molestiae fugit autem, animi. </div> </body> </html> |
transform은 element의 크기, 위치, 모양을 변경하는 속성입니다.
transform은 아래와 같은 형식이 있다.
transform의 속 |
/* Keyword values */ transform: none;
/* Function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0); transform: translate3d(12px, 50%, 3em); transform: translateZ(2px); transform: scale3d(2.5, 1.2, 0.3); transform: scaleZ(0.3); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: perspective(17px);
/* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px);
/* Global values */ transform: inherit; transform: initial; transform: unset; |
transform_1.html |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> h1{ background-color: deepskyblue; color:white; display:inline-block; padding:5px; font-size:3rem; margin: 100px; transform: /* scaleX(0.5) scaleY(0.5); */ scale(0.5,0.5); } </style> </head> <body> <h1>Hello Transform!</h1> </body> </html> |
svg는 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준이다.
SVG 자체는 CSS가 아니지만 CSS를 이용해서 다양한 효과를 줄 때 SVG를 활용하는 경우가 많다.
thenounproject.com => 다양한 icon을 제공한다.
svg_1.html |
<!doctype html> <html> <head> <style> img{ width:400px; } .svg{ height:400px; background-image: url(sample_vector.svg) } </style> </head> <body> <h1>Bitmap(png)</h1> <img src="sample_bitmap.png" alt=""> <h1>Vector(svg)</h1> <img src="sample_vector.svg" alt=""> <h1>background svg</h1> <div class="svg"></div> </body> </html> |
svg로 그림 그리기
svg_sample.svg |
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210" height="210"> <rect x="5" y="5" width="200" height="200" style="fill:red; stroke:black; stroke-width:10px"></rect> </svg> |
svg_2.html |
<!doctype html> <html> <body> <h1>file</h1> <img src="svg_sample.svg" alt=""> <h1>htmls</h1> <svg width="210" height="210"> <rect x="5" y="5" width="200" height="200" style="fill:red; stroke:black; stroke-width:10px"></rect> </svg> </body> </html> |
댓글