css

구체성(명시도) ID 선택자 > 클래스 선택자,가상 선택자 > 태그 선택자 > 전체 선택자 > 부모에게 상속받은 속성전체 선택자 태그 선택자 class 선택자 (& 가상 선택자) id 선택자 (& 가상 선택자) !important우선순위를 무시하고 가장 최상위 우선순

viewport 화면 크기를 viewport 라고 함. ex) 1200px x 920px 인 경우 > 10vw => 1200 x 0.1 = 120px > 50vh => 920 x 0.5 = 460px > 100vw => 1200 x 1 = 1200px ** 반응

어떤 요소의 클릭이나 hover와 같은 이벤트를 줄 때 자연스럽게 UI가 바뀌게 해주는 것 어떠한 속성(property)에 transition을 적용할 것인지 지정한다. transition-property : color, transform transition에 걸리는

변형 시킨다는 의미 요소에 이동, 회전, 확대축소, 비틀기 등의 변형 효과를 줄 수 있다. translate(x,y) scale(x,y) skew(x-angle, y-angle) rotate(angle) 요소의 좌표를 움직일 수 있다. x축으로 x축만큼 , y축으로 y

예시) linear-gradient : 선형 그라데이션예시) radial-gradient(pink, yellow) : 원형;예시 ) conic-gradient( pink, yellow) : 콘형;배경 이미지는 2개 이상 사용 가능 먼저 선언한 배경 이미지가 보여지게 됨

: 여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 하는 기법 특정한 이벤트를 기점으로 작동한다 ( hover 등 ) 시작하기 위한 이벤트가 필요없다. 시작, 정지, 반복까지 제어할 수 있다. @keyframes로 애니메이션을 정의하고, 정의한 애니메이션을 불

요소의 속성을 grid로 변경https://velog.velcdn.com/images/yaejin9503/post/2e235827-a26b-423b-9e48-37eb22f81994/image.pnggrid의 행의 개수 및 크기를 지정할 수 있다.fr❓funct