미미 공부/취미방

4주차.Chapter 3 원근감을 갖고 번갈아 회전하는 도형 회전할 두 도형을 동일한 부모 요소 내부에 넣는다. position: absolute로 도형 중 1개의 요소를 다른 층으로 옮겨 두 요소가 겹쳐지게 한다. 요소 중 1개를 transform : rotateY(-180deg);로 뒤집고 backface-visibility: hidden;으로 보이지 않게 설정한다. 두 요소와 동일한 크기로 부모의 크기를 설정한다.(그렇지 않으면 도형 바깥 영역에 hover 했을 때도 tranform이 동작한다.) 부모 요소에 perspective를 줘서 회전이 자연스러워 보이게 만든다. 스크롤이 내려가면 나타나는 요소 ScrollMagic은 뷰포트에 특정 지점과 요소를 지정해 놓으면, 지정 요소가 그 지점에 도달했..

4주차.Chapter 1 이미지 시간차로 나타나기 애니메이션 라이브러리 사용 forEach로 선택한 4개의 .fade-in요소에 익명 함수 코드를 반복한다. 라이브러리에서 제공하는 delay 속성으로 fade-in 1은 0.7, fade-in 2는 1.4, fade-in 3은 2.1, fade-in 4는 2.8초 뒤에 순서대로 opacity가 1로 바뀐다. 공지사항 공지사항 자동으로 넘어가기 swiper 라이브러리 https://swiperjs.com/get-started Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing na..

3주차.Chapter 5 스타벅스 예제 - 배지 position: fixed로 고정하기 와 같이 fixed 하기 위해 내부에 배지를 자식으로 넣고 header { position: fixed;}를 해서 브라우저에 고정 ( 스크롤을 움직여도 해당 위치에 고정되서 따라다님) position: fixed/absolute를 적용하면 인라인 요소처럼 영역이 최소한으로 줄어든다. 그림자 주기 box-shadow 단축속성 box-shadow: x축 y축 블러정도 색상; 자바스크립트 scroll 이벤트 스크롤을 내리면 배지가 자연스럽게 사라지게 하기 위해 scroll 이벤트를 사용. //배지 변수 const badgeEl = document.querySelector(‘.badges’); //스크롤 이벤트 //windo..

3주차.Chapter 03.5 ~ 4 스타벅스 예제 헤더 시작! 영역을 알려주는 태그 태그가 의미 없이 사용되는 것과 반대로 처럼 의미를 갖고 사용되는 태그들이 많이 있다. 이런 태그들은 해당 코드가 어떤 영역을 위한 것인지 알 수 있게 도와주는 역할을 한다. 내가 의도한 영역을 나타내는 태그가 존재하지 않는다면 class 등으로 영역을 명시해도 된다. 예. 요소에 배경색을 줘서 작업 요소의 영역이 어디서 어디까지인지, 정확히 어디에 위치해 있는지 등을 쉽게 알 수 있게 배경에 색상을 주면 작업하는데 도움이 된다. margin : 0 auto 중앙 정렬 요소의 가로 값이 명시된 상태고 display: block;인 상태에서 margin: 0 auto; (위아래 0, 좌우 auto)를 추가하면 브라우저가 ..

3주차.Chapter 03 Starbucks 예제 시작 https://flamboyant-lumiere-482a1e.netlify.app/ 스타벅스 커피 코리아 스타벅스 커피 코리아 starbucks.co.kr favicon.ico 파일 (favourite icon) 루트 폴더에 'favicon.ico'에 넣으면 자동으로 브라우저 탭에 아이콘이 등록돼서 보인다. favicon.ico는 화질이 좋지 않아서 따로 head에 png파일로 link를 걸어줄 수 있다. 오픈 그래프 (The Open Graph protocol) 웹페이지가 소셜 미디어로 공유될 때 보이는 정보 (사이트 이름, 설명, 로고, 등) 기본적인 오픈 그래프 속성 og:type : 페이지의 유형(E.g. website, video.movie..

3주차.Chapter 02 DOM API (Document Object Model, Application Programming Interface) HTML의 요소들 //방법 2. 'defer'라는 단어를 추가해 준다. //script는 '정보'에 해당하는 내용이니 document.querySelector('요소'); 요소.addEventListener('이벤트', function() {}); 요소.classList.메소드('이름'); 해당 요소(box)에 addEventListener로 1. 지정한 이벤트(click)가 발생하는지 지켜보고/듣고있다가 이벤트가 발생하면 2. 익명 함수(function () {})로 적어 놓은 코드가 동작한다. (document.querySelector('.box')는 제일..