![]()
🔟 고정 이미지 배경.pick-your-favorite { background-image: url('../images/favorite_bg.jpg'); background-repeat: no-repeat; background-position: center; /* scroll시 배경화면이 멈춰있도록 하는 속성 => Parallax */ background-attachment: fixed; background-size: cover;}background-attachment를 통해 배경이미지를 viewport를 기준으로 출력하도록 설정한다.background-attachment: fixed로 설정하면, 스크롤시 배경화면이 멈춰있도록 스타일링할 수 있다.(Parallax) 1️⃣ 3D 애니메이션메달..
![]()
6️⃣ 순차적 애니메이션 - 전역 버튼 스타일Sementic Tag의 사용Sementic Tag란?sementic이란 의미론적, 의미론적인을 뜻한다.즉, sementic tag란 의미를 부여하기 위한 역할의 태그라고 할 수 있다.이전에 header 영역을 작업할 때에도 태그가 아닌 태그를 사용한 것 처럼, 의미가 없는 대신 해당 영역이 하나의 문서(컨텐츠 그룹)라는 의미를 부여하기 위해 이라는 태그를 사용하였다. ... ... 아래 MDN문서를 참고해보면 시멘틱 태그에는 와 말고도 다양한 의미를 부여할 수 있는 태그들이 존재한다는 것을 알 수 있다. Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MD..
![]()
3️⃣ 헤더와 드롭메뉴 - 검색Input이 blur될 경우 스타일링 하기box-sizing: border-box; 를 통해 테두리를 기준으로 크기를 정한다.width: 36px;로 설정해서 blur되었을 때 input의 크기를 최소화한다.transition의 width값만 변경되었을 경우 0.4초로 default easing function인 ease로 애니메이션 처리를한다. transition - CSS: Cascading Style Sheets | MDNThe transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-functi..
![]()
🏁 스타벅스 예제 시작하기favicon.ico 프로젝트 루트경로에 favicon.ico있으면 브라우저가 자동으로 인식하여 브라우저 탭의 아이콘으로 설정한다. reset.css 브라우저의 기본 스타일을 초기화 하기 위한 css코드이다.reset.css을 구글링하면 다양한 브라우저 초기 스타일링을 제거하는 코드들을 찾아볼 수 있다. jsDelivr - A free, fast, and reliable CDN for JS and Open SourceOptimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per mont..
