앞 뒤 .container { width: 100px; height: 100px; perspective: 300px; position: relative; } .container .item { width: inherit; height: inherit; border: 4px solid red; font-size: 40px; box-sizing: border-box; backface-visibility: hidden; transition: 1s; } .container .item.front { position: absolute; transform: rotateY(0deg); } .container:hover .item.front { transform: rotateY(180deg); } .container .i..

.pick-your-favorite { background-image: url("../images/favorite_bg.jpg"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; } background-attachment로 배경이미지를 고정하고 콘텐츠만 움직이도록 할 수 있다.(개인적으로 좋아하는 효과!)

Youtube iframe API 16:9의 화면 만들기 .container { width: 500px; background-color: royalblue; } .container .item { width: 100%; height: 0; padding-top: 56.25%; } https://developers.google.com/youtube/iframe_api_reference?hl=ko iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google Developers 애플리케이션에 YouTube 플레이어를 삽입합니다. developers.google.com var tag = document.createElement("scrip..

Swiper.js 슬라이드 효과를 주기 위한 라이브러리 swiper, 강의에서 나온 6.8.4 버전을 사용했다. 사용법은 다음과 같다. 1 2 3 // new Swiper(선택자, 옵션) new Swiper(".notice-line .swiper-container", { direction: "vertical", // 기본값은 horizontal autoplay: true, loop: true, }); 요소 가운데 배치 화면의 크기가 달라지더라도 요소를 가운데로 배치하기 위해서 쓰는 방법 .notice .promotion .swiper-container { width: calc(819px * 3 + 20px); height: 553px; background-color: orange; font-size: 3..

전역버튼 스타일 요소를 배치할 때, 배치되는 요소가 다른 요소와 묶음이라고 판단된다면 묶음을 기준으로 안에서 배치할 수 있게 만들자. 자세히 보기 .visual .title { position: absolute; top: 88px; left: -10px; } .visual .title .btn { position: absolute; top: 259px; left: 173px; } 순차적으로 요소 보이기 const fadeEls = document.querySelectorAll(".visual .fade-in"); fadeEls.forEach(function (fadeEl, index) { gsap.to(fadeEl, 1, { delay: (index + 1) * 0.7, opacity: 1, }); })..

로고 글자에 비유되는 인라인 요소는 글자가 앉아있는 선(baseline)을 기준으로 배치된다. img 역시 인라인 요소이기 때문에 이처럼 불편..한 상황이 생길 수 있다. 블록 요소로 바꾸어 공백을 없애자! img { display: block; } 요소 정렬 .blue { background-color: aqua; width: 400px; height: 300px; position: relative; } .orange { background-color: orange; width: 100px; height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; } .blue { background-color: aqua; width: 400px; h..

Assets https://github.com/ParkYoungWoong/starbucks-vanilla-app GitHub - ParkYoungWoong/starbucks-vanilla-app: 스타벅스 랜딩 페이지(+로그인) 예제 for FastCampus 스타벅스 랜딩 페이지(+로그인) 예제 for FastCampus. Contribute to ParkYoungWoong/starbucks-vanilla-app development by creating an account on GitHub. github.com 📁 images, 📄 favicon.ico, 📄 favicon.png 다운로드 What is Favicon? favicon(favorites + icon)은 웹 브라우저의 주소창에 표시되는 아..