본문 바로가기

전체 글

 (166)
스타벅스 클론(11) - 3D 애니메이션 지난 편에 했던 거 처럼 스크롤을 해도 배경은 그대로 고정되어 있습니다. 그리고 가운에 로고에 마우스대면 3d애니메이션 효과가 나옵니다. html 설명 안 하겠습니다. 우선 배경 이미지가 고정 되 있는 background-attachment과 size를 설정했습니다. medal 요소를 가운데 정렬했습니다. front를 180deg 돌리면 시각적으로 안 보여야 하며, back은 처음부터 안 보이다가 180deg 돌아와서 보여야 합니다. 그래서 .front에 맨 처음에 0deg 설정하고, 마우스 데면 180deg를 돌리는 씩으로 했습니다. back은 처음에 -180deg였다가, 마우스 데면 0deg로 돌아 옵니다. 둘 다 뒷면을 가려야 함으로 backface-visibility가 hidden여야 합니다. 모..
스타벅스 클론(10) - 고정 이미지 배경 이번에 작업할 것은 위와 같은 효과를 나타날려고 합니다. 1. 각 요소 배치 2. 기존에 유튜브 영상 구역에 있는 짤린 icon요소를 위로 꺼내주기 3. 컵 배경 이미지는 그 위치로 고정 고정 이미지 배경 위에 gif를 보셔도 알겠지만 크게 3개 덩어리로 나눠져 있습니다. 이중 지난번 유튜브 영역때문에 짤린 icon을 바로 하단에 있는 season-product 영역 안에 넣으면 더 이상 가려지지 않습니다. 이 두 파트는 설명해야할 것 따로 없을 것 같습니다. 컵 배경이미지 고정을 중점적으로 보겠습니다. background-attachment속성을 이용해서 fixed을 했습니다. 즉, 스크롤하더라도 요소는 뷰포트 상대로 고정되어 있다는 겁니다. background-size속성에 cover값을 부였했습니다..
youtube iframe api 유튜브에 있는 동영상을 내 사이트에 삽입해주는 api입니다. youtube iframe api 참조 지원하는 매개변수 설명 참조
스타벅스 클론(9) - 유튜브 영상배경 유튜브 영상을 페이지에 올려보도록 하겠습니다. 동영상 위에 뜨 있는 무언가도 작업할 예정입니다. 유튜브 영상 삽입 우선 동영상 비율부터 만들어보겠습니다. 동영상 비율이 흔히 16:9죠. 요소 두개로 간단하게 만드는 방법이 위와 같습니다. 부모요소인 .container에는 너비만 입력합니다. 자식요소인 .item은 부모요소의 너비를 100%를 이어받으며, 높이는 0입니다. 그리고 padding-top 위의 내부여백으로 56.25%를 입력하면 시각적으로 16:9 비율이 나옵니다. 동영상 삽입한 공간을 만들어봤습니다. css도 어느정도 다듬고 진행해보겠습니다. 기본 틀을 다 만들고 youtube iframe api를 사용해서 유튜브 동영상 삽입해보겠습니다. youtube iframe api 사용 참조 js파일..
스타벅스 클론(8) - 리워드 위에 리워드 영역을 분석해보겠습니다. 일단 가운데 이미지 파일이 있습니다. 왼쪽은 bg-left영역으로 뻗어나가고, 오른쪽도 마찬가집니다. 그리고 회원가입등 버튼들로 구성했습니다. html부분은 비교적 쉽습니다. 회원가입 버튼에 btn--reverse를 넣은 이유는 전에 전역 버튼을 다 미리 만들어놨기에, 좀 쉽게 사용할려고 넣었습니다. 위 효과를 그대로 나타낼려고 하는 거라 딱히 설명이 없습니다. .btn-group는 position이 있는데 부모요소인 .inner에 position속성값이 안 보입니다. 이게 전에 모든 .inner속성에 공통적으로 position속성을 넣어서 별도 추가할 필요가 없습니다.
스타벅스 클론(7) - 요소 슬라이드(2) - 프로모션 위에 보시면, 프로모션 이미지는 항상 가운데에 위치하며 밑에는 숫자아님 선택할 수 있고, 화살표로도 다른 이미지를 선택가능합니다. 또한 프로모션 버튼 클릭시 전체영역 숨겨집니다. 요소 이미지 가운데 배치 html에서 기본적인 틀을 만들어 봤습니다. 여기도 전 편에 사용했던 swiper 라이브러리 사용할 겁니다. css에서 너비를 calc()함수 사요할 수 있습니다. 자동으로 계산해주는 거죠. position left에서 50%를 떨어지고, margin-left에서 전체 너비의 반만 여백을 하라는 겁니다. 근데 주의할 점은 이미 position left에서 50%에 떨어진 상태에서, 요소를 정 가운데로 배치하려면 margin-left는 음수, 즉, -(minus)가 붙어야됩니다. 프로모션 슬라이드 img를..
JS - Swiper 라이브러리 swiper 라이브러리는 공지사항처럼 한 영역에서 글이 위로 혹은 아래로 이동하면서 나오는 요소를 제어하는 라이브러리입니다. swiper참조 js코드 같이 사요해야 됩니다. 위에 링크를 타고 들어가서 확인하시면 됩니다. new Swiper(선택자, 옵션);
스타벅스 클론(6) - 요소 슬라이드(1) - 공지사항 swiper 이 부분을 보시면 왼쪽 오른쪽 색상이 다르며 왼쪽 공지사항에 위로 자동으로 굴러 가고 있습니다. html파일은 어렵지 않아서 설명 생략하겠습니다. swiper-container은 공지사항 중 위로 굴러가는 영역을 지칭했는데 아직 내용을 추가하지 않았습니다. css입니다. 기본적인 position, display:flex, justify-content등등 설명을 안 해도 될 것 같습니다. swiper-container는 내용이 없어서 위치등 확인하기 어렵기에 속성을 넣어본 겁니다. 지금부터 swiper영역을 제작해보겠습니다. swiper 참조 위에 div에 swiper-container 클래스를 부여한 것이 swiper 6버전 전입니다. swiper 7버전부터 swiper로 간략해졌고 기타내용은 크게 달라..
스타벅스 클론(5) - 순차적 애니메이션 위 gif보시면 배경 이미지에 요소들이 하나씩 순차적으로 나타납니다. 각 요소를 html에 넣어줍니다. 전역 버튼 스타일 위 html에서도 보이다시피 "자세히 보기"의 클래스는 btn입니다. 즉, 버튼의 약자이고요. 본 프젝 중 btn 클래스를 많이 사용될 것이며 미리 다 css를 지정해 놓겠습니다. css에서 다 지정해 놓고 다시 html파일로 돌아가 "자세히 보기" 요소 클래스에 btn--brown을 추가하겠습니다. (이미지는 생략하겠습니다.) visual 부분의 css 파일입니다. 주로 위치를 지정한 것입니다. 여기서 주의할 게 있습니다. .visual의 margin-top이 120px를 부여했습니다. 이게 header부분이 120px이기때문입니다. 이래야 visual가 header때문에 가려지지 ..
JS - gsap 라이브러리 gsap 라이브러리는 자연스럽게 요소를 제어할 수 있는 라이브러리입니다. html 요소에 애니메이션을 추가할 수 있습니다. gsap cdn 페이지 링크 gasp.to(요소, 지속시간, 옵션); 지속시간은 초(s)단위로 계산합니다. 옵션은 객체 데이터 { } 를 넣어줍니다.

티스토리툴바