Frontend (27) 썸네일형 리스트형 16-4 스타벅스 클론 코딩하기 - Part4 3D 애니메이션 및 그 외 JS 라이브러리 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. 클론 코딩 완성형태 강의의 예제를 따라해보며 스타벅스 클론코딩을 해보았습니다. 한번에 많은 기능을 넣다보니 정리가 필요할 것 같아 파트별로 하나하나 요점들을 적어보려고 합니다. 순서 1. 3D 애니메이션 2. 스크롤 위치 계산 3. 페이지 상단 이동하기 ● 3D 애니메이션 ▷ 고정된 배경 background-image: url("../images/bg.jpg"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; RotateY 3D Anima.. 16-3 스타벅스 클론 코딩하기 - Part3 Youtube 영상 삽입 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. 클론 코딩 완성형태 강의의 예제를 따라해보며 스타벅스 클론코딩을 해보았습니다. 한번에 많은 기능을 넣다보니 정리가 필요할 것 같아 파트별로 하나하나 요점들을 적어보려고 합니다. 순서 1. Youtube 영상 ● Youtube 영상 동영상을 웹페이지에 넣기 전에 알아야 할 내용이 있습니다. video size control example ... codepen.io 부모 요소에서 너비를 지정해주고 자식요소에서 CSS의 padding-top이라는 속성을 잘 이용한다면 영상에서 많이 쓰이는 16 : 9 비율의 영상 사이즈를 조절할 수 있습니다. 위 codepen.io에 나와있는 수치인 56.25%는.. 16-2 스타벅스 클론 코딩하기 - Part2 애니메이션 효과와 슬라이드 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. 클론 코딩 완성형태 강의의 예제를 따라해보며 스타벅스 클론코딩을 해보았습니다. 한번에 많은 기능을 넣다보니 정리가 필요할 것 같아 파트별로 하나하나 요점들을 적어보려고 합니다. 순서 1. 순차적 애니메이션 2. notice 섹션 3. 이미지 슬라이드 ● 순차적 애니메이션 각각의 이미지들을 순차적으로 띄우는 것은 gsap 의 JS 라이브러리를 사용해야합니다. 시간에 따라 출력되는 이미지들을 각각 fade-in이라는 클래스를 가진 div 태그로 묶은 후 CSS에서 fade-in 클래스들을 opacity:0 으로 처리해 주어야 합니다. 그 후에 JS로 작업해주면 됩니다. const fadeEls .. 16-1 스타벅스 클론 코딩하기 - Part1 헤더와 드롭다운 메뉴 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. 클론 코딩 완성형태 강의의 예제를 따라해보며 스타벅스 클론코딩을 해보았습니다. 한번에 많은 기능을 넣다보니 정리가 필요할 것 같아 파트별로 하나하나 요점들을 적어보려고 합니다. 순서 1. 헤더로고 2. 드롭 다운 메뉴 3. BEM 4. 전역 배지 ● 헤더 로고 ▷ 헤더로고 좌측상단에 배치하기 헤더 안에 inner 클래스를 따로 설정해 두어 영역을 나눠 줍니다. 그리고 CSS를 통해 헤더와 inner의 부분을 색깔로 구분해주면 보기 쉽습니다. inner의 스타일은 가로. 세로 길이를 설정하고 margin : 0 auto;의 값을 통해 가운데 정렬을 할 수 있습니다.(auto는 컴퓨터가 뷰 포트.. 15. HTML 오픈 그래프란 무엇인가 fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다. 일상생활에서 자신이 흥미로웠던 페이지의 링크를 복사하여 SNS 상(카카오톡, 페이스 북, 트위터 등)에서 게시할 때 많이 접해봤을 것입니다. 오픈그래프란 : 웹 페이지가 소셜 미디어로 공유 될 때 우선적으로 활용되는 정보를 모아서 보여주는 것인데, 위의 사진처럼 해당 사이트의 필수 정보만을 모아 보여주는 것을 오픈그래프라고 합니다. 그럼 HTML 내에 위 정보들은 어디에 있을까요? 해당 정보는 태그 내에 meta 태그에 위치하여 있습니다. 관리자 도구로 확인해보면 이렇게 확인이 가능하네요. 그럼 각각의 속성이 무엇을 의미하는지 살펴 보도록 할게요. property og:type : 페이지의 .. 14. 웹 개발에 필요한 구글 무료 웹 폰트 사용하기 웹 개발할 때 가장 필수적인 것은 바로 글자(font)를 빼먹을 수 없습니다. 이 또한 구글에서 무료로 제공하고 있습니다. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 해당 사이트를 들어가서 원하는 폰트를 검색하여 사용할 수 있습니다. 예를 들어 나눔 폰트를 사용하려고 한다면, 이렇게 폰트를 검색해준 후 자신이 원하는 폰트를 선택해 줍니다. 저는 나눔 고딕 폰트를 선택하였습니다. 자신이 원하는 폰트를 선택한 후 우측 창에서 CSS를 연결해 주어야 합니다. 참고로 regular 400, Bold 700, Extra-bold 800 이라는 숫자는 글자의 굵기를 의미합니다. .. 13. 웹 개발에 필요한 구글 무료 웹 아이콘 라이브러리 사용하기 - Material icons 웹 개발에 필요한 아이콘들을 구글에서 무료로 사용할 수 있습니다. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 우선 사용하기 전에 CSS를 연결해 주어야 합니다. material icons CSS 연결에 대해 더 자세한 정보가 필요하다면 아래 사이트를 참고해주세요. Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experi.. CSS 복습 - Overwatch 보호되어 있는 글입니다. 이전 1 2 3 4 다음
