celine

[CSS] position: sticky - 스크롤이 되었을 때 화면에 고정되는 요소를 만들고 싶을 때 사용할 수 있는 CSS 속성입니다. - position: sticky; top: 100px; 의 의미는 스크롤을 한 후 position:sticky를 적용한 요소가 스크롤이 되어 보이는 순간, viewport 기준 top: 100px; 위치에 fixed 가 됩니다. - position:sticky를 적용한 요소의 부모요소를 넘어가면 position:sticky를 적용한 요소의 fixed가 풀립니다. - 반드시 top, bottom, left, right 속성 중 하나는 입력을 해줘야 작동을 합니다. 입력 하지 않으면 작동 X - sticky 속성의 경우, 부모 또는 조상 노드에 overflow 설정이 ..

[요구사항] 1. 배너에 마우스를 올리면 배경이 생깁니다. 2. 배너 클릭 시 하얀색 하트가 빨간색 하트로 변경됩니다. 3. 배너 클릭 시 배너 color가 변경됩니다. [이슈사항] *제이쿼리를 최소한으로 이용하고 css로 처리하는 방법입니다. 1. 광고배너와 배경 배너를 같은 위치로 마크업을 해줍니다. 2. 배경 배너를 position: absolute; 처리하여 광고배너와 위치를 맞춰줍니다. 3. 제이쿼리로 광고 배너 클릭 시 addClass : geryBanner 해 줄 예정입니다. - geryBanner라는 클래스가 생겼을 시 변하는 color들을 css로 처리 해 줍니다. .newsLike.greyBanner { border: 1px solid #e1e4e6; } .likeBannerWrap.g..

[css 애니메이션] animation 속성의 하위 속성은 다음과 같습니다. animation-name (en-US) 이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙을 이용하여 기술합니다. animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다. animation-direction 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다. animation-duration 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다. 재생 시간의 기본값은 0초이므로, 재생할 시간을 명시하지 않으면 아무런 효과도 나타나지 않을 것입니다. animation-iteration-count (en-US) 애니메이션이 몇 번 반복될지 ..

[조건] 1. 버튼 클릭 시 url 이 복사됩니다. 2. 버튼 클릭하는동안 버튼의 배경색에 opacity가 들어가야합니다. 3. 복사와 함께 복사되었습니다. 라는 토스트 팝업이 잠시 나왔다가 사라집니다. [html] 1. 링크복사 버튼은 css로 모양을 만들어줄 예정입니다. 2. 토스트 팝업은 잠시 숨겨둘 예정입니다. 링크복사 링크가 복사되었습니다. [css] 1. 버튼에 :active를 활용하여 클릭하는 동안 배경색에 opacity를 적용합니다. * : active :: 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다. [참고] https://developer.mozilla.org/ko/docs/Web/CSS/:active :active - CSS: ..