명대사 + 사진 그리드 만들기

버튼을 눌러 명대사가 랜덤으로 나오게 하는 기능은 완성했다. 

Alert 창을 바꾸고 싶은데 일단 조금 시도하다가 다음으로 보류했다. 중요한건 기능이지 디자인이 아니기 때문에..

조금 아쉽지만 프로젝트 진행을 위해 다음 기능부터 구현하기로 했다. 

 

명대사와 사진을 같이 보여주는 기능을 쓸꺼다. 

대신, 처음엔 사진만 보이고 마우스를 가져가야만 명대사가 보이는 기능을 구현하려 한다. 

 

이런식으로 대충 스케치를 해봤다. 

 

현재 랜덤으로 나오는 명대사가 22개 이기 때문에 테이블 형식으로 맞출 수 있는 6x4 형태의 테이블을 생각해봤다. 

근데 사진 뭐있나 찾아보다가 예전에 명대사 캡쳐해둔 걸 보고 하나 추가했다. 그래서 현재 23개다..

 

(* 객체에 대사 추가하고 콤마 (,) 안찍어서 코드가 돌아가지 않았었다. 다른거 추가했는데 갑자기 또 명대사 버튼이 안먹혀서 울고 싶었는데 블로깅한거 보고 알아냈다. 블로깅의 중요성을 다시 한 번 깨닫는다)

 

뭐 명대사를 계속 추가하고 싶어질 수도 있을거 같은데 일단은 6*4 형태로 완성할 예정이다. 

 

 

이 작업을 위해서는 

 

1. css 그리드를 활용해야한다. 

-> 이거는 친구 생일기념 홈페이지 만들때 써본 기능이다. 근데 솔직히 좀 많이 귀찮았다. 그래서 시작하는걸 좀 미뤄왔다. 너무 귀찮아서.... 그래도 완성하려면 해야지. 

 

2. 이미지들을 각 사이즈에 맞게 편집을 미리 해둬야 한다. 혹은 각 그리드 사이즈에 100% 맞게 설정하는 법이 있을것 같기도 하다. 

 

3. 마우스 포인터를 가져가면 명대사가 보이는 작업을 실행해야한다. 

-> 이미 명대사를 객체에다 다 담았겠다 이걸 활용해서 기능을 구현하면 좋지 않을까. 

 

 

일단 여기까지 아이디어를 써두고 바로바로 실습을 해보도록 하겠다. 

 

 

역시 구글링 통해 완벽한 설명 사이트를 찾았다. 

 

www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c/

How to create an image gallery with CSS Grid

 

딱 내가 원하는 형태의 갤러리를 만들 수 있을 것 같다. 

 

6*4를 먼저 만들어 볼려고 했는데 예시대로 연습을 하는게 더 빠를 것 같아서 그냥 8*8로 현실과 타협했다.

 

 

일단 css 에서 grid를 만드는 건 그렇게 어렵진 않다. html에서 class를 하나 잡아주고, 그 class의 속성만 바꿔주면 된다.

css 코드는 아래와 같이 짜주면 된다. 

.gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
    grid-gap: 15px;
}

 

display : grid는 이 class 의 속성이 grid 임을 지정해준다. 

grid-template-columns : repaet (   ,    );

여기는 이제 columns 가 각각 몇 칸인지, 크기는 얼마인지 지정해주는건데

ifr은 너비에 맞게 알아서 조정해준다. 

5vw는 viewport width 의 약자래서 대체 viewport가 뭐야 하고 구글링해봤다. 

 

반응형 웹사이트를 만들때 필요하다고 한다. 

지금 레벨에서는 정확한 차이를 모르겠으나, 반응형 웹사이트가 되면 난 좋기 때문에 그냥 이렇게 쓰겠다. 

 

 

이 다음부터는 계속 실습하기 바빠서 실시간으로 블로깅 못했는데 정리해서 쓰도록 하겠다. 

 

그리드 아이템 칸이 몇개 있느냐가 중요하다고 생각했는데.

어차피 사진마다 비율과 사이즈가 다르기 때문에 아이템 하나 하나에 넣으려는건 바보같은 생각이었다. 

그래서 무난하게 10*10칸 짜리 그리드가 있다는 가정하에 아이템(=img)를 채우기 시작했다. 

 

 

 

한칸 한칸 집어 넣는게 아니라 크기가 다르게 들어갈 수 있도록 먼저 그림으로 확인 하고 코드를 짰다. 

 

.container {
  margin-top: 15px;
  margin-left: 100px;
  margin-right: 100px;
  margin-bottom: 15px;

}

.gallery {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 8vw);

}
.gallery__img {
  width: 100%;
  height: 100%;
}
.gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 5;
}
.gallery__item--2 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
}
.gallery__item--4 {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 3;
}
.gallery__item--6 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
}
.gallery__item--7 {
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 3;
    grid-row-end: 4;
}

.gallery__item--8 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 5;
    grid-row-end: 6;
}
.gallery__item--9 {
    grid-column-start: 3;
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 7;
}
.gallery__item--10 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 7;
}
.gallery__item--11 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 6;
    grid-row-end: 7;
}
.gallery__item--12 {
    grid-column-start: 6;
    grid-column-end: 8;
    grid-row-start: 2;
    grid-row-end: 4;
}
.gallery__item--13 {
    grid-column-start: 7;
    grid-column-end: 9;
    grid-row-start: 4;
    grid-row-end: 7;
}
.gallery__item--14{
    grid-column-start: 9;
    grid-column-end: 11;
    grid-row-start: 5;
    grid-row-end: 7;
}
.gallery__item--15{
    grid-column-start: 8;
    grid-column-end: 11;
    grid-row-start: 1;
    grid-row-end: 4;
}

.gallery__item--16{
    grid-column-start: 9;
    grid-column-end: 11;
    grid-row-start: 4;
    grid-row-end: 5;
}
.gallery__item--17{
    grid-column-start: 7;
    grid-column-end: 8;
    grid-row-start: 1;
    grid-row-end: 2;
}

스타일 태그 안에 적어놓은 것들이다. 아이템 별로 column, row의 시작과 끝을 정해주면 된다. 

중요한건 기준이 칸이 아니라 line 이라는거다. 난 처음에 10*10으로 시작해서 라인은 각각 11개씩 있었다. 

 

근데 하다보니 어쨌든 100칸을 채우는건 너무 무리라는 생각이 들었고

 

.gallery {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 8vw);

}

위에서 확인 할 수 있듯이 10*6으로 합의를 봤다. 이 안에 내가 넣고 싶은 이미지들을 구겨 넣는다고 고생좀 했다. 

단순히 이미지를 넣는게 문제가 아니라 크기와 비율을 다 따져가며 넣어야 했기에 구상하는데도 시간이 꽤 걸렸다. 

 

    <div class="container">
    <div class="gallery">
  <figure class="gallery__item gallery__item--1">
    <img src="버디버디.jpg" class="gallery__img" alt="Image 1">
  </figure>
  <figure class="gallery__item gallery__item--2">
    <img src="공공즈.jpg" class="gallery__img" alt="Image 2">
  </figure>
  <figure class="gallery__item gallery__item--3">
    <img src="마이크.jpg" class="gallery__img" alt="Image 3">
  </figure>
  <figure class="gallery__item gallery__item--4">
    <img src="인형동맠.jpg" class="gallery__img" alt="Image 4">
  </figure>
  <figure class="gallery__item gallery__item--5">
    <img src="제노해찬.jpg" class="gallery__img" alt="Image 5">
  </figure>
  <figure class="gallery__item gallery__item--6">
    <img src="우유빙수.png" class="gallery__img" alt="Image 6">
  </figure>
  <figure class="gallery__item gallery__item--7">
    <img src="인순이형.jpg" class="gallery__img" alt="Image 7">
  </figure>
  <figure class="gallery__item gallery__item--8">
    <img src="914.jpg" class="gallery__img" alt="Image 8">
  </figure>
  <figure class="gallery__item gallery__item--9">
    <img src="용기.jpg" class="gallery__img" alt="Image 9">
  </figure>
  <figure class="gallery__item gallery__item--10">
    <img src="기대.jpg" class="gallery__img" alt="Image 10">
  </figure>
  <figure class="gallery__item gallery__item--11">
    <img src="공고.jpg" class="gallery__img" alt="Image 11">
  </figure>
  <figure class="gallery__item gallery__item--12">
    <img src="인생네컷.jpg" class="gallery__img" alt="Image 11">
  </figure>
  <figure class="gallery__item gallery__item--13">
    <img src="폴라로이드.jpg" class="gallery__img" alt="Image 11">
  </figure>
  <figure class="gallery__item gallery__item--14">
    <img src="시궁창.jpg" class="gallery__img" alt="Image 14">
  </figure>
  <figure class="gallery__item gallery__item--15">
    <img src="교복동맠.jpg" class="gallery__img" alt="Image 15">
  </figure>
  <figure class="gallery__item gallery__item--16">
    <img src="공공.gif" class="gallery__img" alt="Image 16">
  </figure>
  <figure class="gallery__item gallery__item--17">
    <img src="바늘.jpg" class="gallery__img" alt="Image 17">
  </figure>
  </div>
  </div>

위에는 html 태그인데 너무 중복도 많고 방대하고 복붙이어서 진짜 보기 싫었는데

이걸 또 지금 당장 반복문을 써서 줄여주자니 그걸 하다가 또 하루가 다 갈 것 같았다. 

 

결과물이 눈에 보이지 않으면 만족하지 못하는 인간이라 그냥 오늘은 그리드 모양으로 사진을 다 띄우는걸 성공한데에 의의를 두기로 했다. 

 

 

 

아 그래서 눈물나는 완성본은 이렇게 생겼다. 

 

 

남들이 보면 이게 뭐가 어렵다고라고 생각하겠지만... 

 

 

 

다음 작업은

 

1. 마우스 포인터를 가져가면 사진과 어울리는 명대사 뜨게 하기

2. 저 보기 싫은 코드를 깔끔하게 정리하는 법 찾기

 

 

정도가 될 것 같다.