css trick (2) 썸네일형 리스트형 [CSS] position:absolute의 독특한 규칙과 문제(padding-area) position:absolute는 동작이 복잡해서 처음 css를 할 때 상당히 골칫거리다. 이 속성은 크게 3가지다. 1. absolute는 fixed와 더불어, 일반적인 문서의 레이아웃 맥락에서 제거되고 독립적인 맥락을 생성한다. 따라서 width처럼 부모로부터 물려받던 부분들을 새로 설정해야 한다. 2. absolute 요소의 최초 위치는 맥락에서 제거되기 전의 위치다. 하지만 위치 비정 속성(top, bottom, left, right)을 사용하면 가장 가까운 상위의 position:relative 요소, 만약 없다면 body를 기준으로 위치가 설정된다. 3. absolute 요소는 부모의 padding-area 왼쪽 모서리를 기준으로 시작한다. 이는 static 요소가 부모의 content-are.. [CSS] CSS trick: 배경 그라디언트에 애니메이션 넣기 HTML 삽입 미리보기할 수 없는 소스 css에서 background-image는 animation 적용이 불가능하다. 그런데, 배경의 그라디언트에 애니메이션을 적용하려면 어떻게 하면 좋을까. 1. filter 이용하기 filter는 대상에 색조 변경이나 흐림 효과 등의 그래픽 효과를 적용한다. 이는 애니메이션이 가능하기 때문에, 배경 프레임의 그라디언트를 변경하는 애니메이션으로 사용가능하다. @keyframes changeBackground { 0% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(60deg); } 100% { filter: hue-rotate(120deg); } } .background { background-image: linear-.. 이전 1 다음