반응형 CSS2 CSS에서 background 이미지를 비율을 유지한채 사이즈만 줄여보자 안녕하세요, 오늘은 CSS에서 background 이미지를 비율을 유지한채 사이즈만 줄여보도록 하겠습니다. background: url('image.jpg') no-repeat center center / 50px 50px / content-box border-box;위의 구문을 해석 할 수 있다면 굳이 해당 포스팅을 안보셔도 됩니다. 그렇지 않다면 같이 자세히 알아봅시다. CSS의 background 속성에서 '/'를 추가하여 아래와 같은 양식으로 배경 이미지의 위치, 크기, 배경 영역에 채우는 방식을 조절할 수 있습니다. background: / / ; 예시를 들어 값을 적용시켜보겠습니다. background: url('image.jpg') no-repeat center center / 50.. 2024. 11. 14. CSS Animation vs Javascript Animation CSS Animation vs Javascript Animation CSS 에니메이션과 자바스크립트 에니메이션에 대한 성능차이에 대한 고민은 프론트엔드 개발로는 절대로 중요한 사안입니다. 웹 프론트 엔드는 HTML, CSS 및 JavaScript의 세가지로 구축됩니다. HTML, CSS 및 JavaScript는 HTML5 및 CSS3 이후로 특히 겹칩니다. 과거에는 복잡한 애니메이션을 위해서 Javascript에 의존적이었지만, 그리고 여전히 GSAP와 같은 라이브러리가 있지만 요즘에는 Transition을 사용하여 애니메이션을 적용 할 수도 있습니다. 이를 통해 브라우저에서 javascript를 사용하는 몇가지 규칙을 공식화 할 수 있습니다. Javascript를 통한 에니메이션, 포커스 된 상태 대신.. 2023. 11. 7. 이전 1 다음 반응형
