본문 바로가기
개발 일지/한라열쇠 홈페이지(Web)

2021.04.15 navigation bar 수정 및 갤러리 페이지 만들기

by 빛밤하늘 2021. 4. 15.
반응형

2021.04.11 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.11 한라열쇠 홍보용 웹페이지

2021.04.12 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.12 메인 페이지 만들기

2021.04.13 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.13 오시는 길 페이지 만들기

2021.04.14 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.14 서비스 페이지 만들기

 

2021.04.14 서비스 페이지 만들기

2021.04.11 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.11 한라열쇠 홍보용 웹페이지 2021.04.12 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.12 메인 페이지 만들기 2021.04.13 - [개발 일지/한라열쇠..

brightnightsky77.tistory.com

 

 

 

갤러리 페이지를 만들기 이전에,

부모님께서 제품 목록이 사이트에 들어가면 문제가 될 수도 있다고 하셔서 빼고 만들기로 했습니다.

따라서 navigation bar에 있는 제품 링크를 모두 삭제했습니다.

메인 페이지의 navigation bar에서 제품 링크 삭제
나머지 페이지들의 navigation bar에서 제품 링크 삭제

 

 

 

예전에 HTML이랑 CSS를 공부할 때 책에서 보고 신박하다는 생각이 들게 만든 것이 있었는데,

바로 Masonry 라이브러리입니다.

사진과 관련된 사이트들 중에서 종종 이 Masonry 라이브러리로 꾸며놓은 게 있던데 이뻐보이더라구요.

 

밑은 Masonry 라이브러리 공식 사이트입니다.

 

Masonry

Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower:  bower install masonry --save Install with npm:  npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works o

masonry.desandro.com

Masonry 라이브러리로 만든 레이아웃들

 

 

 

 

 

 

 

 

저는 일단 Masonry 사이트에서 있는 예제를 그대로 사용했습니다.

이미지를 넣은 레이아웃
012
Masonry 라이브러리를 적용하고 한라열쇠 사진들을 넣은 결과

 

 

 

※ 궁금한 부분, 이상한 점 및 오타는 댓글에 부탁드립니다.

 

 

 

다음 글:

2021.04.16 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.16 갤러리 페이지 수정

 

2021.04.16 갤러리 페이지 수정

2021.04.11 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.11 한라열쇠 홍보용 웹페이지 2021.04.12 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.12 메인 페이지 만들기 2021.04.13 - [개발 일지/한라열쇠..

brightnightsky77.tistory.com

반응형

댓글