[CSS기초] 그래픽 (+ 반응형 웹 단위 )

반응형 웹 관련

 

https://nykim.work/85

반응형 웹 뚝딱 만들기 (2) - vw, vh, vmin, vmax, em, rem 속성

 

 

레이아웃 크기 지정할 때 반응형으로 만들고 싶었는데 px, %,rem 등 단위가 너무 다양해서 글을 찾아보다가 좋은 글을 발견해서 링크를 걸어둔다.

 

아무튼 오늘 해야할거는 바로 그래픽이다! 

 

background color

투명배경이미지와 배경색깔을 같이 하고 싶을 때가 있다. 그럴때는

background 이미지를 url로 받아오면 된다. 

어피치 이미지를  반복해 보려한다. 

background -image:repeat;

++)반복을 원하지 않으면 backgroumd-image:no-repeat;

 

만약 텍스트가 많아지면 세로로 길어지는데 이럴 때 배경이미지 스크롤을 막으려한다.

background-attachment:fixed;

기본값이 scroll이기 때문에 배경이미지도 스크롤 하고 싶으면 그냥 attachment 속성을 안쓰면 된다.

 

어피치 사이즈를 500px 100px로 짜부시켜(?) 보겠다. 그럴때 사용하는게 background-size이다.

 

배경이미지를 조절시켜주면 크기가 작아진 만큼 어피치가 여러개 생길거다. 그렇기 때문에 no-repeat로 지정해주는게 좋다. 

 

background-size에서 화면을 꽉 채우는 방법도 있다. 바로 cover와 contain인데

cover는 그냥 채우는거고

contain은 화면의 크기에 맞게 채운다.

 

#1. contain일때

 

#2.cover일 때

 

배경이미지가 반복되지 않을 때 배경이미지의 위치를 내마음대로 조절하는 방법도 있다. 한마디로 어피치가 반복되지 않을 때 내 마음대로 어피치의 위치를 바꿀 수 있는데 바로 position이다!

 

 

 

filter

 

만약 이미지를 회색빛깔 나게 보정하고 싶으면 filter:grayscale(n%);를 사용하면된다.

 

글씨에도 효과를 줄 수 있는데 blur처리 하고 싶으면 filter:blur(npx)를 하면된다.

 

만약 마우스가 이미지에 가져다 댔을 때 회색으로 바뀌는 효과를 주고 싶으면

hover를 사용하면 된다. 여기다가 색깔이 천천히 바뀌게 하고 싶으면 transition:all ns(n초)

를 사용하면된다. 

보통 transition 은 속성 변경 할 때 애니메이션의 속도를 조절한다. 

 

blend

 

backgroud image와 background color를 혼합하고 싶을 때가 있다. 그때 사용하는게 blend이다. 

background-blend-mode를 사용하면 된다. 

원본

 

hover해서 blend했을 때 

 

그뿐만 아니라 컨텐츠와 배경사이의 blend효과를 주는 mix-blend-mode도 있다. 약간 타이포그래피 비슷한거라 생각하면 된다. 

 

 

오호 느낌있다. 

 

transform

 

엘리먼트의 크기,위치,모양을 변경하는 속성이다.