[React] 이미지 슬라이드 - 2. HTML & CSS

공부 시작

 

슬라이드의 기본 구조

 

위의 이미지가 슬라이드로 사용될 기본 구조이다. 

좌우의 버튼과 오른쪽 하단의 일시 정지, 재생 버튼의 아이콘을 사용하기 위해서 폰트어썸 패키지를 설치해준다. 

 

https://fontawesome.com/

Font Awesome

 

 

폰트어썸을 사용하는 방법에는 여러가지가 있지만 이번에는 npm을 통해 설치하기로 했다. 

아래의 명령어를 작성해서 패키지를 설치해준다. 

 

npm install --save @fortawesome/fontawesome-free

 

그 다음, style.css에 import로 폰트어썸 css를 추가해준다. 

경로는 패키지가 설치된 node_modules 폴더에서 @fortawesome/fontawesome-free를 찾고 css 폴더에서 all.min.css 를 찾아 경로를 복사한다. 

복사된 경로는 다음과 같이 정리해줄 수 있다. 

 

@import url(~@fortawesome/fontawesome-free/css/all.min.css);

 

 

슬라이드 이미지를 불러올때 사용할 웹팩 설정을 해준다. 

webpack.config.js 파일에서 module 부분을 찾고, rules 배열 안에 새로운 객체로 설정을 넣어준다. 

넣어줄 코드는 다음과 같다. 

 

{
    test: /\.jpeg$/,
    type: 'asset/inline',
    // .jpeg 파일을 읽어들일때 웹팩에 내장된 로더로 읽어들일것임
},

 

이 코드는 확장자가 .jpeg인 파일들을 웹팩에 내장된 로더로 읽어들이겠다는 뜻이다. 

 

 

프로젝트의 타이틀을 lodash 문법으로 설정했듯이 이미지들의 주소도 lodash 문법으로 바꾸어주었다. 

바꾸어준 코드는 다음과 같다. 

 

<img src="<%= require('./src/image/red.jpeg') %>" />

 

모든 코드를 수정해준 뒤 npm run dev 명령어를 사용해 서버를 띄워 확인한다. 

그러면 최상단의 이미지처럼 잘 정리된 슬라이드 틀이 나오게 된다! 

 

 

 

 

html 구조

 

슬라이드의 모든 요소를 감싸고 있는 slider-wrap 안에 이미지 슬라이더와 다음, 이전 버튼, 인디케이터, 그리고 자동재생버튼이 들어있다. 

ul.slider 안에는 7개의 li들이 들어있고, css에서 float:left를 설정해줌으로서 한줄로 길게 정렬되어있다. 

슬라이더를 움직이게 할 스크립트는 대략적으로 다음과 같이 쓰여질 것이다. 

slider-wrap 안의 ul.slider를 이미지들의 크기만큼 버튼의 방향으로 움직이게 한다. 

예를 들어서 다음 버튼을 누르게 된다면, 이미지들의 크기인 1000px만큼 ul.slider를 왼쪽으로 움직이게 하는 것이다. 

 

 

다음 강의에서는 우선 다음버튼과 이전버튼을 클릭했을때 슬라이더가 움직이게 하는 내용을 구현해볼 것이다. 

 

 

 

 

**********************************************

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

 

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발
#패캠인강후기 #패스트캠퍼스후기 #오공완 #30개프로젝트로배우는프론트엔드withReact