웹개발 일지 12일차 (20.11.08)

전에는 카드의 내용 9개를 전부 html에 정적으로 삽입한 다음, 단순히 불러오는 방식으로 웹페이지를 구현하였는데, 카드를 추가한 후에 동적으로 카드가 생성되도록 만들기 위해 find.php의 코드를 수정해 보았다.

 

처음에는 아래의 사진과 같이 9개의 카드가 코딩되어 있는 것을 알 수 있다.

 

이거하고 팝업 내용 쓰느라 진~짜 고생했다 ㅜ

각각의 id에 맞춰서 미리 저장되어 있던 내용을 팝업으로 출력시키는 방식으로 코딩을 했는데, 이번에는 DB에 저장되어 있는 idx를 이용해서 하나의 div를 여러 개 자동으로 만들어주게끔 php 코드를 작성하였다.

 

class가 card-form인 div의 내부를 php의 echo로 동적으로 채워주는 부분이다.

간단하게 말하자면, DB와 연결 후 search 파라미터가 설정되지 않았을 경우 모든 카드를 SELECT문으로 가져오고, mysqli_fetch_array로 데이터를 하나씩 가져와서 html에 출력해 주는 것이다.

 

만약 search 파라미터가 설정된 경우에는 검색 쿼리를 반영하여 SQL문을 전송하기 때문에 원하는 단어(대소문자 구분 X)가 들어간 카드를 선택할 수 있다. (이거 때문에 굳이 검색 때문에 추가 php파일이 필요 없다는 것을 알게 되었다.)

 

다음과 같은 코드로 GET방식으로 받은 데이터를 검색창에 다시 띄워주었다. (아래 2번째 그림 참조)

 

다음과 같이 검색 기능도 잘 작동되는 것을 알 수 있다.

 

다음과 같이 작성한 후, DB를 깨끗이 비우고 find_new.php 페이지에서 추가하면 하나하나씩 카드가 잘 출력되는 것을 볼 수 있다.

 

결과 화면

다음과 같이 db에 적혀 있는 idx의 순서대로 카드가 생성된 것을 확인할 수 있다.

여기서 또 하나 문제점이 발생하였는데, 처음에 card-form이라는 class의 세팅의 display 옵션이 flex-wrap으로 되어 있어서 한줄당 한 카드만 있을 경우 자동으로 가운데 정렬이 되는 것이었다.

 

다시 말해서, 이렇게 세 카드가 없었을 경우 그냥 위와같이 가운데 정렬이 자동으로 되었다.

그래서 구글 검색으로 찾아보다가 알아낸 것이 "display: grid" 였다. grid는 다음 그림을 보면 어떤 느낌인지 알 수 있다.

 

내가 구현하고 싶은 것은 2차원 평면에 3X3개의 카드를 놓고 싶었기 때문에 Grid 레이아웃이 가장 적합하였다.

따라서, find.php의 디자인을 책임지는 find_style.css의 card-form과 card-box class의 속성을 grid 식으로 변경해 주었다.

 

before

after

(하나 알아낸게 있는데, margin을 auto로 설정하면 자동으로 자신의 영역을 상위 태그의 가운데로 맞춰준다고 한다.)

 

이렇게 수정하고 나면, 위의 결과 화면과 같이 잘 정렬된 상태로 나오게 된다.

 

grid를 활용하여 영역을 3X3으로 미리 세팅을 해둔 상태이다. 개발자 도구(F12)를 사용하여 영역을 확인해보면 다음과 같이 나뉘어져 있다.

다음 개발의 목표는 카드를 누를 때 제목에 알맞은 내용을 팝업으로 띄우는 것으로 하겠다.

오늘은 여기까지.