커리까지

hello transform! 옆으로 나란히 써야 효과가 먹힌다. h1{ background-color: deepskyblue; color: white; display: inline-block; padding: 5px; font-size: 3rem; margin: 100px; transform: scale(0.5, 0.5); } 혹은 scale를 안에다 같이 써준다. 전 후

Blend is awesome! mix-blend-mode 블랜드를 주고 싶은 이미지와 요소를 섞는 것

rgba(255,0,0,0.5) : 맨 뒤에 a를 붙이면 투명도를 조절할 수 있다. hover를 줘서 마우스가 올라왔을 때 다른 효과를 줄 수 있다. transition을 줘서 부드러운 효과를 줬다. hover에 준 건 마우스가 올라갔을 때 부드러운 효과를 주고, 그냥 클랴스에 준건 마우스를 밖으로 둘때 주는 효과이다.

뭔가를 혼합하는 기능 필터는 하나의 이미지에 효과를 주는 것 블랜드는 2개 이상의 이미지를 혼합해서 결과를 만들어준다.

원본 이미지를 그대로 유지하면서 효과로 조절 펭하 filter가 여러가지 인 이유는 filter 가 아직 들어온지 얼마 안 되서 브라우저마다 지원이 다르다. 그래서 크롬이나 사파리, 다른 것들을 적용하기 위해서 앞에 장식자를 붙여준 것이다. transiton은 바뀌는 시간을 주는 것이다.

Hello world Hello world Hello world Hello world Hello world Hello world background-repeat : 배경 반복 여부 no-repeat : 반복 안 함 repeat-x : 가로로 반복 repeat-y : 세로로 번복 background-attachment : 배경을 고정할 것인지 아니면 같이 움직일 것인지 background-size : 배경 크기 background-position : 배경 위치 background: url(https://img.hankyung.com/photo/201910/AKR20191001176700005_03_i.jpg) no-repeat fixed center; 이렇게 축약도 가능하다.

레이아웃 잡을때도 많이 사용한다. 요즘은 flex로 많이 잡는다. 펭하 펭하 펭하 clear이랑 float랑 같아야지 적용된다. 일일이 확인하기 번거로워서 both를 사용한다.

미디어에따라 보여지는 것 반응형의 심장과 같은 존재 500px가 되면 body의 색상을 레드로 바꾼다. 500px 이하가 되면 실행된다. 500px이상일 때 실헹된다. ~500px: red 501~600px green 601px~ : blue 500px이하에서 브라우저는 첫번째와 두번째가 같다면 나중에 나오는게 우선순위가 높다. ~500px: red 501~600px green 601px~ : blue

초월 lllllllllllllllllllllll column-count 컬럼의 개수를 지정한다. column-width 크기를 지정한 후 이 크기를 유지할 수 있는 만큼 컬럼이 생긴다. 200px이하면 한 개의 컬럼만 그 이상이 되었을때 2개, 3개, 등등 생겨난다. column-gap 컬럼과 컬럼 사이의 간격 column-rule-style 컬럼과 컬럼사이의 간선이 생긴다. column-rule-width 간선의 넓이 column-rule-color 간선의 색상 column-span 컬럼에 상관없이 본인의 위치를 찾을 수 있다.

wrap 컨테이너보다 아이템이 크다면 다음줄로 넘어간다. stretch 아이켐이 컨테이너 높이만해진다. flex-end, start 아이템 본인만의 크기가 된다. justify-content 정렬하기 align-content 같은 행에 있는 것들을 한 그룹으로 본다. order 순서를 바꿀 수 있다.