웹 사이트 클로닝을 통한 HTML과 CSS (실습)

<웹 사이트 클로닝을 통한 실전 공부>

 

 

position: fixed 를 통한 요소의 배치는 브라우저에 뷰포트를 기준으로 배치하겠다는 의미이다.

 

 

width, height는 기본값이 auto이다. (기본값은 외워두는 게 좋다 !)

따로 width, height 값을 명시하지 않으면, 기본값인 auto 값을 갖게 된다.

 

 

position: fixed와 position: absolute로 배치하면 

가로 너비(width)가 최소한으로 늘어나려고, 즉 최대한 내용만큼만의 너비로 줄어든다 !

cf. 원래 블록 요소는 가로 너비가 최대한으로 늘어나려는 성질을 갖고 있다.

width: 100%로 주면 최소한으로 줄어들어 화면이 보여지려 하는 것을 정상적으로 보이게 해 준다 !

 

 

 

lodash 라이브러리

https://cdnjs.com/libraries/lodash.js

lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

 

lodash 설명

https://lodash.com/

Lodash

 

 

 

 

scroll 이벤트로 작업을 할 때 자주 같이 사용되는 기능으로 throttle(로대쉬 라이브러리에 있음)이 있다 ! 

scroll 이벤트에 걸려있는 익명 함수가 작동할 때 너무 자주 이벤트가 일어나 프로그램에 부하가 걸릴 수 있으므로, 

일정 시간마다의 텀으로 함수가 작동되도록 하는 기능이다. 인수로는 작동할 함수와 작동할 시간 텀을 넣어준다.

-.throttle(작동할 함수, 작동할 단위 시간(밀리초))

 

 

스크롤 이벤트 발생시 scollY를 로깅해보면 0.3초마다 오른쪽과 같이 스크롤바 내리는 동안의 위치를 확인할 수 있다.

 

 

 

 

 

 

gsap 라이브러리

https://cdnjs.com/libraries/gsap

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

gsap은 자바스크립트 애니메이션을 처리해 줌

 

 

gsap.to(애니메이션 처리를 할 요소, 애니메이션 지속 시간(단위:초), 옵션(방식))

어떤 요소에 애니메이션을 넣을건지 그리고, 몇 초에 걸쳐 전환할건지, 그리고 어떤 내용으로 할 건지 CSS 속성과 값들을 인수로 넣어 실행한다.

이 때, 옵션에 opacity:0을 사용하게 되면 눈에 보이지는 않게 되지만 요소가 그 자리에 존재는 하고 있어 display:'none'(JS 파일에서 작성)을 함께 작성해줘야 보이지 않더라도 그 위치를 클릭했을 때 작동하지 않게 할 수 있다 !

다시 화면에 보이게 할 때 옵션에 opacity:1을 사용하고 같이 display:'block'을 적용해주면 문제없이 사용할 수 있다.

 

 

CSS에서 선택자를 작성할 때 아래와 같이 중간에 중복되는 선택자들을 생략하는 것도 가능하다 !

 

 

 

 

 

아이콘의 기본 크기는 24px이다.

 

align-items의 기본값은 stretch이다.

 

 

 

 

 

스와이퍼 자바스크립트 라이브러리

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

 

swiper(스와이퍼를 동작시킬 선택자, 옵션({객체}형으로 작성))

{객체}형 ex.

{ direction(방향): 'vertical',

  pagination(페이지 번호): {

    el(요소): '.swiper-pagination',

    clickable(클릭이 가능한지 여부): true,

  }

} 

 

 

swiper는 css와 js 파일이 둘 다 있어야 작동 가능하다 !

 

 

스와이퍼 HTML 형식은 다음과 같다. 

class명이 swiper로 변경되었다 주의 !! (swiper 7/ 8 버전)

 

 

 

 

레이아웃 배치할 때,

정가운데에 아이템을 배치하고 싶으면 

CSS에서 left : 50%를 한 뒤, 아이템 너비의 반을 margin-left : -(아이템 너비의 반)px로 설정해주면 된다 ! 

right : 50%를 하게 되면, margin-right : -(아이템 너비의 반)px로 설정해주면 위와 마찬가지인 배치가 된다 ! 

 

 

 

 

 

위에 개발자 도구의 초록색 박스 안의 내용과 같이 swiper에는 기본적으로 설정되어 있는 css 값이 있다.

그래서, 초록색 점선 박스에 설정한 코드와 같이 따로 position을 작성하지 않아도 되는 이유이다 !

 

 

 

 

 

클래스명 swiper-pagination으로 작성하면서 자동적으로 만들어진 swiper-pagination-bullet 요소는 span 태그로 작성되어 있으며 글자 요소이기 때문에, 블록요소처럼 박스 형태로 사용하기 위해 display 속성을 inline-block으로 설정되어 있다.

다만 swiper-pagination은 글자요소의 특성이 베이스이기 때문에, text-align으로 수직정렬을 설정한다.