[패스트캠퍼스] 웹퍼블리싱 강의

[내일배움카드] x [패스트캠퍼스] - 7주차 학습내용

[JavaScript를 활용한 응용 예제 1]

드디어 끝이 보인다-!!!

이번 실습 부터는 js를 사용하는 실습이 진행된다.

파트는 총 3파트!

Chapter 1. (실전) 자동 정렬 기능의 반응형 갤러리 (난이도 중)

Chapter 2. (실전) 시간에 따라 자동으로 변하는 반응형 웹 (난이도 중)

Chapter 3. (실전) 마우스 움직임에 따른 시퀀스 모션 (난이도 중)

중에서 오늘은

'Chapter 1. (실전) 자동 정렬 기능의 반응형 갤러리 (난이도 중)'만 작성하려고 한다.

이번 실습에서는 isotope는 플러그인을 사용한다.

갤러리 같은 레이아웃 반응형을 손쉽게 할 수 있는 플러그인이다.

매번 swiper나 slick으로 또는 pure js로 슬라이드만 써보다가

반응형 플러그인은 처음 써봤다.

이번 실습 또한 js를 그대로 긁어오진 않아서(보통 swiper는 레이아웃 통채로 가져다 쓸 수 있으니까..!)

나중에 따로 실습 해봐야 할 것 같다.

강사님이 짜주신 js는... 모르겠습니다... 😭 저 js마스터 가능할까요ㅠ ㅎㅎ

요즘 scss 자주 써서 좋다.

회사에서는 css만 사용하는데, 강의 때는 거의 80% 이상을 scss 사용하니 만족😝

간단한 scss만 사용하지만.. scss 프로젝트 갈 수 있을까요?ㅎㅎ💜💜

아래 scss 코드는 반응형 코드!!!

max-width 값도 변수 처리하니 아주 좋다구요~~

$web : 1200px; //반응형

$tabletB : 900px;

$tabletM : 800px;

$tabletS : 700px;

$mobile : 470px;

결과물 ↓ ↓

isotope는 앞으로 개인 프로젝트 진행할 때 유용하게 사용할 것 같다.

이번 실습 내용은 조만간 개인 포폴 메인페이지로 활용 해야지-!!! \(@^0^@)/

💜git 구경가기 ↓↓

웹퍼블리셔로 살아남기