스스로에게 재미있다고 생각하는, 모바일 청첩장 코드를 마저 해보기
01. 코드 스니펫 살펴보기
1) 색상 정의해서 사용하기 (.root)
1-1) 이렇게 css에서도 color를 마치 변수처럼 설정할 수 있음
이는 필요한 색상이 많아지고
웹사이트가 성장할수록,
각 코드를
#ffffff
이렇게 입력하는 것보다 변수명으로 쓰는 것이 좋기 때문이다.
1-2) 이를 쓰려면 var함수를 이용해서 사용한다.
TIP🤖 Var 함수
var 함수를 이용하여 CSS 앞부분에 선언한 값을 변수로 사용할 수 있다.
2) 글꼴 사용 (font-face)
글꼴을 사용하고 싶을 때 쓰는 css 문법이다.
- font-family : 이 폰트를 적용할 때 사용할 이름
- src : 그 폰트의 경로 (주소에 파일이 들어가 있다.) 만약 내가 가지고 있는 font 라면, /static을 입력해서 쓰면 된다.
- font-weight : 폰트 굵기
- font-style : 밑줄 등 스타일
2-1) 이렇게 class 안에서 font-family 지정
= 이 폰트를 가져다 쓸 수 있게 된다
3) 단위 vh (높이 등에 사용한다.)
%, px 를 쓸 수도 있지만,
height (높이)에서 vh는
우리가 보는 화면에 세로를 가득 채운 길이
(= 세로 길이의 전체 길이)
: 왜 그냥 100%로는 안쓸까?
우리 생각처럼 작동하지 않기 때문이다.
즉, 100%= 높이에서는 100vh라 써야 정상작동
- 즉 이렇게 썼다면 가로 세로로 화면을 꽉 채우게 쓴 것이다.
4) background 살펴보기
background-position: center center;
= 위치가 가운데
background-size: cover;
사이즈는 px이런 단위가 아닌
cover (덮거나) contain (들어가게)
background-repeat: no-repeat;
position: relative;
5) 태그는 겹치는 일이 없었으나, image의 경우 겹쳐서 쓸 수도 있다.
이 경우에 first 그리고 first .overlay를 만들고
position: relative;
.first .overlay {
position: absolute; (절대값)
top: 0;
left: 0;
이렇게 설정을 해두었다.
absolute
이 first 네모 안에서 (100%/100vh의 값) overlay는
마음대로 위치를 지정하겠다는 의미
즉 top과 left가 0,0 인 overlay를 맨 위로 올리고
width: 100%;
height: 100%;
크기는 동일하게 100%로 맞추어서 겹쳐졌다.
first 안에서 firstoverlay가 움직이는데,
마음대로 위치를 지정하는 absolute 를 가지고,
0,0 = 맨 위로 가게 되고,
크기가 100%로 동일하므로 first와 겹치게 되는 이미지
02. <모바일 청첩장> 방명록 page 나누기
(=pagination 만들기)
TIP🤖페이지네이션을 위해서는 limit과 skip을 활용한다.
1) 백엔드 코드 수정 _ limit과 skip
limit : 몇 개만 가져오겠다
guestbooks = mongo.db['wedding'].find().limit(3)
이렇게 하면, 3개만 가져오게 된다. 즉 3개로 개수를 제한해서 페이지네이션을 하는데,
건너뛰는 부분도 필요하다.
skip : 건너뛰는 함수
즉 몇 개는 건너뛰고, 몇 개는 제한해서 가져올 것인지 limit과 skip 함수를 사용하여 표현한다.
1-1) 그런데 이때 limit은 고정이지만 skip은 페이지가 넘어갈 수록 쌓여가기 때문에
1page =3 , 2page = 6, 3page=9 ...
즉 skip(0), skip(3), skip(6) ...
각각의 limit과 skip에 변수를 설정해야 한다.
1-2) 이를 토대로 변수를 만든다. page는 3개라고 가정하고,
page = 3
limit = 3
skip = (page - 1) * limit
이렇게 작성한 후에, limit과 skip에 변수를 넣어주면 된다.
2) 이제 가정했던 page말고 진짜 page를 '입력'받아보자.
이때 사용할 것 : Query string
네이버에서 fast campus를 검색했을때 나오는 주소
https://search.naver.com/search.naver?where=nexearch&sm=top_sug.pre&fbm=0&acr=2&acq=fastca&qdt=0&ie=utf8&query=fast+campus
= 이 주소에 접속할 때 이런 data
(?where=nexearch&sm=top_sug.pre&fbm=0&acr=2&acq=fastca&qdt=0&ie=utf8&query=fast+campus)를
전달하고 싶다는 뜻
우리는 여기서 /?page=1 이런식으로 값을 받는 방법을 살펴본다.
2-1) page 바꿔보기
page = request.args.get('page', 1)
- request : 사용자의 요청을 다뤄주는 변수
- args 안에서 꺼내오기
- 그런데 page가 없는 경우를 대비해 기본값으로 1page를 넣어준다 ('page', 1)
이는 사용자가 요청한(request한) 그 주소에 page라는 데이터가 있으면 가져오고, 그게 아니면 1을 사용한다
: 이렇게 하면 페이지네이션 끝!
but, 문자형이 기본값이라 숫자형으로 변환해줘야 한다.
TIP🤖 페이지 번호를 숫자형으로 변환하기
페이지네이션을 위해 쿼리로 페이지번호를 받을 경우,
전달받은 해당 값은 "문자열str"이기 때문에 "숫자형int"으로 변환해야 한다.
2-2) int 넣어서 변환
3) 저장 후에, 브라우저로 가서 page 주소에 따라 살펴본다
주소 표시줄에 입력한 page에 따라서 바뀌는 것을 볼 수 있다.
03. <모바일 청첩장> 방명록 pagination 버튼 만들기
1) index.html에 가서 table 바로 아래에 입력하기
<div class="pagination"></div>
2) class 안에 page 링크 만들기
- 링크를 만들고, 현재 주소로 이동을 하는데 <a href ="링크">
- 이때 Query string 추가
필요한 만큼 page 추가
전체 data를 알아야 page를 표시할 수 있으므로
app.py 즉 python에서 전체 data가 몇 개 있고, pagination은 어떻게 표현해야 하는지에 대한
정보를 전달해줘야 한다.
2-1) 전체 개수 가져오기
mongo.db['wedding'].find()
find를 복사해서 개수 가져오기
count_documents 함수 사용
이 안에 몇 개가 들었는지 개수를 가져옴
TIP🤖 find 함수와 달리, 모든 값을 세기위해 빈값{} (빈 딕셔너리 변수) 넣어주기
이제 max_page 번호를 계산해서 list로 전달해보자
max_page = count / limit
원래 페이지를 limit 으로 나누면 되는데 문제는 이렇게 작성하면 3의 배수가 아닌 경우 버림 처리가 된다.
이를 방지하기 위해 올림으로 계산하려면 어떻게 할까?
: 이를 계산하기 위해 math라는 파이썬 패키지를 가져온다.
import math
max_page = math.ceil(count / limit)
반복문 사용에 나왔던
range 함수를 이용해 page 리스트 만들어보기
TIP🤖 범위 지정
우리가 알던 range는 range(10)이면 0-9 까지 나왔는데
range(1,10)
이렇게 쓰면 시작범위를 지정해주고, 이는 1-10이 아닌!!! 1-9까지가 나오게 된다.
(= 입력한 10 미만으로 나온다는 뜻)
이를 활용해보면,
pages = range(1, max_page + 1)
이렇게 우리가 원하는 값으로 만들 수 있다.
2-2) 이제 만든 값을 전달해주자
앞서 만든 diff 처럼 pages=pages 이렇게 쓰면 전달!
그런데 이게 반드시 같지는 않아도 된다는데.. 이해가 필요한 부분이다.
2-3) 앞서 만든 html 부분을 for문으로 만들기
{% for p in pages %} {% endfor %}
p를 변수로 했고, 이걸 사용해서 넣으면 된다.
<a href="/?page={{ p }}">{{ p }}</a>
이제 반복하면서 a 링크가 쭉 생성될 것임
2-3) 이제 실행 후 브라우저를 보면, 페이지 링크가 밑에 생성된다!
3) 이제 링크 css 적용하기
.pagination a {} 태그 사용
.pagination a {
color : var(--black);
padding : 5px;
border-radius: 5px;
background-color: #fff;
margin: 5px;}
글씨 색상 : 블랙
내부여백과 둥글게 하기 지정 (5px) >> 내부여백이 있게 해서 버튼처럼 보이게 한다.
배경색 : 흰색
외부여백 : 5px 지정!
.pagination {
margin-top: 20px;
}
= 페이지네이션 자체 외부여백도 적용
마지막으로
padding 의 가로 부분도 10px 적용한 모습
padding : 5px 10px;
버튼만들기 끝!
부록 강의
01. <모바일 청첩장> 아코디언 만들기
아코디언 기능을 통한 계좌번호 안내 만들기
(with. 부트스트랩)
아코디언이란?
: 접었다 폈다 할 수 있는 버튼을 제공해주고 하나만 펼쳐지게 하는 기능
1) 부트스트랩에 접속
componant 밑에 collapse로 들어와서, Accordian example 아래의 sample 코드 복사하기
2) VScode에서 index.html 파일에 붙여넣기
새 div row행 만들기 (div 태그)
<div class="row2"></div>
그 안에 복사한 코드 붙여넣기
2-1) 코드 정리하기
TIP🤖 자동 formatting하기
ctrl + A 하면 전체가 선택되고
여기서 Shift + Alt + F 누르면 자동으로 formatting !
브라우저에서 확인하니 우리가 원하는 형태와 다르다.
그 이유는? 부트스트랩 설치를 아직 안했기 때문이다.
3) 부트스트랩을 설치해준다
3-1) 부트스트랩 4. 버전에서 css와 JS를 복사해서 붙여넣고 들여쓰기 맞추기
그런데, 브라우저에서 확인하니, 다른 부분들이 이동하거나 변화되었음
그 이유는?
우리가 사용중인 class row는 사실 부트스트랩에서도 사용하는 class 속성이라서, 부트스트랩을 가져오기 전에 내가 만든 row는 괜찮았지만 지금 row가 또 적용되는 상황 (두 row가 같이 적용)
TIP🤖 css 이름 작성하기
부트스트랩에서 사용중인 CSS 클래스 명과 내가 작성한 CSS 클래스 명이 충돌되지 않도록 주의해서 작성한다.
해결
기존의 row 이름을 변경 row1
html, css에서 모두 변경해준다.
3-2) 부트스트랩 글자크기가 적용되었으므로 이부분도 변경
기존의 h2에서 > h4로 작아지게 함
<h4>방명록 남기기</h4>
4) 아코디언 부분 수정
계좌 필요한 두 개 남기고 하나는 삭제 (기본값 : 3개)
계좌 이름 변경, 은행과 번호 넣기
제목 넣어주기
전체 변경
일단 완성!
오늘의 소감 ✍️
코딩을 너무 오랜 시간 했더니 눈이 빠질 것 같...지만
어쨌든 확실히 청첩장이 좀 더 재밌다 (사진+꾸미기가 들어가서 그런듯하다.)
자율 스터디에선 방장님을 주축으로해서
직접 당당마켓 코드를 다시 짜봤는데....
이거 너무 어렵기도 하고 오류가 정말 많이 일어났다 ㅋㅋㅋㅋㅋㅋㅋ
코드 복붙이나 수정 잘하는 것도 정말 능력이다 싶었다.
'[부트캠프] IT 코딩 부트캠프 후기 > [Let's TIL😶🌫️] FastCampus' 카테고리의 다른 글
| [Let's TIL✍️] 코딩 18 : 4 Week _ 모바일 청첩장 추가 실습 (1) & 스터디 (0) | 2022.09.03 |
|---|---|
| [Let's TIL✍️] 코딩 18 : 4 Week_ 추가 강의 : 당당마켓 마무리 (4&5) (2) | 2022.09.03 |
| [Let's TIL✍️] 코딩 18 : 4 Week _ 당당마켓 & 스터디 (0) | 2022.08.31 |
| [Let's TIL✍️] 코딩 18 : 4 Week _ 모바일 청첩장 (2) (0) | 2022.08.31 |
| [Let's TIL✍️] 코딩 18 : 4 Week _ 모바일 청첩장 (1) 뼈대 & 화면 응답 & 캘린더 (2) | 2022.08.31 |
