[Let's TIL✍️] 코딩 18 : 4 Week _ 모바일 청첩장 (1) 뼈대 & 화면 응답 & 캘린더

드디어 기다리던 모바일 청첩장을 실습하는 시간이다..!

이전에 배웠던 부분들을 최대한 활용하고 복습할 것이라 기대

 

 

01. <모바일 청첩장> 뼈대 준비하기

​

1) 뼈대 코드를 강의자료에서 다운로드 받아 준비하고, 이를 이전에 작성한 app.py가 있는 곳에 적용한다.

​

1-1) 먼저 templates 폴더와 static 폴더를 각각 만들어준다.

 

1-2) 드래그를 해서 파일을 옮겨준다 (드래그 앤 드롭)

: index.html은 templates 폴더로 드래그, 나머지 두 파일은 static 아래에 넣는다.

 

 

2) 경로 표현하기

.을 없애고 /static 넣어주기

 

변경하지 않으면 대참사가 일어난다. (실화)

 

3) app.py 에서 이제 text가 아닌 html을 반환해야 하므로, render_templates 함수 사용하기

from flask import Flask, render_template
app = Flask(__name__)
​
@app.route('/')
def index() :
return render_template('index.html')
​
if __name__ == '__main__' :
app.run()

 

 

4) 터미널에서 ctrl+c 눌러서 나온 후에 다시 실행

 

5) 브라우저로 접속해서 확인하기 (http://127.0.0.1:5000/)

​= 코드 snippet 적용이 완료된 것이다!

​

---

​

02. <모바일 청첩장> 화면 응답 만들기

​

html 파일 열어서 코드를 작성할 것인데, 예제 파일과 비교하면서 작성할 예정이다.

​

1) div 첫 태그인 top과 bottom에 텍스트를 추가해보자

 

1-1) 이때 이름은 그대로 넣는데, ♥의 경우 html에서 사용하는 태그를 써보자

&기호로 시작하고 ;(세미콜론)으로 끝나는 기호로 작성하면 된다.

♥=&hearts;

​

1-2) app.py에서 실행 후에 브라우저에 보면 한 줄로 나와있는데, br태그를 사용해 개행을 해보자

<div class="overlay">
<p class="first-top">
김구름 <br>
♥ <br>
이마린
</p>

 

​

1-3) 날짜를 변경하자

<p class="first-bottom">2023.10.14 SAT AM 11:00 </p>

개행 추가 <p class="first-bottom">2023.10.14 SAT <br>
AM 11:00 </p>

 

2) 사진 추가하기

이미지 파일들을 static 폴더로 드래그 앤 드롭하기

사진이 폴더에 들어갔다

2-1) 첫번째 페이지에 세로 사진 적용하기

(css 파일)

중간에 first 부분이 첫페이지이고 여기서 background-color를 이미지로 변경하기

background-image: url(/static/sero1.jpg);

​

2-2) 터미널에서 재실행 후, 브라우저에서 확인 하니 잘 되었음

3) 소개말 넣기 (index.html 파일)

div class를 row2로 변경, 그 아래에 <p> 태그 이용해서 텍스트 입력하기

Ad astra Per aspera,
사랑으로 서로의 역경을 넘고
이제는 하나되는 길에 섰습니다,
저희의 동행을 같이 지켜봐주시고
함께 축복하며 나아갈 자리에 초청합니다.

이 문구는 학생시절 읽었던 책에서 인상깊게 각인된 라틴어 속담을 넣고 미래를 생각하며 쓴 문구. 열심히 작성했다.

​

​

3-1) 브라우저에서 확인하기

: row2를 했기 때문에 배경색이 지정되었다.

 

그런데 문구가 일렬로 있으므로 br태그를 통해 개행하자.

 

3-2) 첫번째 줄 굵게 하기

strong 태그 사용

3-3) br태그를 여러번 사용해서 엔터 만들기

그냥 br옆에 br을 연속으로 붙인다.

 

4) 링크 추가하기 (이미지 넣기)

 

4-1) 이번엔 row를 변경하지 않고 그대로 row로 사용,

: img 태그를 사용하기

<div class="row">
<img src ="/static/garo1.jpeg">
</div>

​TIP🤖 이때 모든 주소,링크는 /static 넣기

그런데 row를 사용하니 내부여백이 있다.

= 이는 css에서 row에 padding을 지정해줬는데, 이 row안에 이미지를 넣었기 때문이다.

​

 

4-2) 여백이 많으므로, row 바깥에 이미지를 넣어보자.

그러면 사진처럼 이미지가 꽉 차서 붙어서 나오게 된다.

 

 

5) table 태그 사용해서 가족 이름 넣기

 

5-1) 이때 data가 아니므로 thead는 필요없고 , tbody를 사용함

<div class="row">
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>

 

5-2) 텍스트 넣기

생각나는대로 넣기

 

​

5-3) 실행후, 브라우저 가서 보니 예쁘지 않으므로 수정한다

 

5-4) table 태그에 class 추가하기

<table class = "intro">

​

5-5) 이제 intro라는 style을 만들자

styles.css로 가서, 맨밑에 intro 태그 만들고 width = 즉 가로 넓이를 최대로 해준다.

.intro {
width : 100% ;
}

점은 꼭!!! 앞에 넣어서 작성한다.

 

​

5-6) css에서 해도 되지만, html 코드로 와서 글자 굵기 등을 바꿔본다.

: <strong>태그와 <small> 태그 사용

 

결과

---

 

6) 아이콘 넣기

​

6-1) material icon design 구글에 검색

​

6-2) https://materialdesignicons.com/ 사이트에 접속

Material Design Icons

​

6-3) 검색창(search)에 필요한 아이콘 검색

​

6-4) 전화기 아이콘 코드 복사하기

</> = 코드라는 뜻, 눌러서 들어가서 나오는 코드를 그대로 복붙해서 쓰면 전화기 아이콘 만들기 가능

 

6-5) 복사한 후 html 코드로 넘어와서 td 안에 붙여 넣어주기

<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z" />
</svg>

​

전화기 코드를 넣은 모습

 

​TIP🤖 svg 태그의 장점

아이콘을 svg 태그로 가져와 사용하게 되면, CSS를 사용해서 색상을 변경할 수 있다.

 

 

6-6) 아이콘을 적용해서 브라우저에서 보니 크기가 크다.

크기 조정하기 & 아이콘을 눌렀을 때 전화가 걸리도록 만들어보자. 

6-7) a 태그 사용하기 (svg 위에 들어감)

<a href ="tel:01012345678">

</a>

닫는 태그는 svg 아래에 가도록 넣어주자.

​

6-8) 크기 조정하기

svg태그 안에서, height 부분을 조정해준다.

<svg style="width:24px;height:14px" viewBox="0 0 24 24">

 

6-9) 재실행 후, 브라우저에서 확인

전화기 버튼을 눌렀을 때 저렇게 작동이 된다면 추후 배포 후에 모바일로 접속하면 전화 걸기가 된다는 뜻이다!

​

​이제 나머지 전화기도 연결해주면, 끝!

​

---

 

03. <모바일 청첩장> 캘린더 만들기

​

방법 1. index에 일일이 날짜 입력하기

방법 2. 백엔드 파이썬에서 어떤 캘린더 정보를 다 만든 다음, 이를 front index.html에서 프로그래밍처럼 작성하는 것

​

(python은 추가강의에서) 우리는 먼저 1번으로 해보고 2번은 추가 강의에서 진행한다.

​

1) html에 작성하기 <table 태그 활용>

: 3번째 row 행에 작성하기

 

달력에는 head가 있으므로 요일을 입력하는 thead 만들기

<table>
<thead>
<tr>
<td>일</td>
</tr>
</thead>
</table>

 

2) 이제 tbody 태그를 작성하는데, 실제 달력을 참고

이때 일요일부터 시작해야 하는 것을 잊지말자!

23년도 10월 날짜 참고

 

이때 7일씩 잘라서 한줄로 들어가게 작성하기

 

 

3) table에 가로 넓이를 길게하기 위해 class 지정해주기

<table class = "calendar">

class 이름은 다른걸로 해도 상관없다. 

 

4) styles.css로 가서 class 속성값 추가

.calendar {
width : 100% ;
}

 

 

5) 브라우저로 확인해 보면 간단한 흰색 바탕에 숫자만 있음

 

6) 이를 이제 css로 와서 class를 지정해서 변경해준다.

.sun {
color : var(--red);
}
​
.sat {
color : var(--blue);
}

 

이렇게 하면 요일별 색깔이 지정된다.

​

 

7) 또한 다른 달이 같이 있는 경우를 위해 회색처리를 할 class를 만들어본다.

​

.out {color : var(--gray);}

이렇게 하면, 요일별 색깔 지정이 끝났다.

​

8) td 태그에 숫자 가운데 정렬 추가

td들을 한번에 지정하기 위해 class 에 td를 넣는다.

 

.calendar td {
text-align : center ;
}

 

9) 이제 html 파일로 돌아와서

모든 일요일에는 sun class를 지정, 토요일에는 sat class를 지정한다.

 

 

 

10) 다시 styles로 가서, thead 부분만 굵게 표시하는 class를 만든다

.calendar thead td {
font-weight: bold;
}

 

 

이렇게 calndar 아래에 thead 안의 td 만 지정하고, 굵게 표시하게 만들어주었다.

​

10-1) calendar에도 padding을 줘서 여백 주기!

​TIP🤖 여백과 크기

여백이나 크기 등을 설정할 때는 완벽한 값을 한 번에 찾는 것보다 임의의 값을 먼저 쓰고, 화면을 보면서 조정하는 것을 추천!

 

​

11) html로 와서 꾸미기

- h3 태그 사용해서 날짜 쓰기
- h5 태그를 써서 시간을 쓰자
- hr 태그를 사용해서 구분선 추가 (calendar 위 아래 넣기, 이때 hr 태그는 닫는 태그 없음)

 

 

 

실행해보니, 예쁘게 잘 만들어졌다.

 

 

12) 이제 남은 시간 계산하는 걸 넣어볼 것이다. (html 코드에 작성)

 

12-1) <p> 태그 넣기, 이름과 문구 넣기

<p>구름♥마린의 결혼식이 XX일 남았습니다.</p>

​

12-2) 이때 xx에 들어갈 날짜를 계산하는 방법은 두 가지이다.

- 자바 스크립트로
- 파이썬으로도 가능

 

​

12-3) app.py (파이썬)으로 가서 작성해보자

- 첫번째 줄에 datetime 패키지 사용 (이 패키지는 파이썬 기본 내장 패키지이다.)

import datetime

​

- 그 다음에 오늘 날짜를 datetime에 datetime.now 함수를 통해서 가져온다

now = datetime.datetime.now()

​

다 점(.)으로 연결하면 now라는 변수에 현재 날짜와 시간 정보가 들어가게 된다.

 

 

- 이제 wedding 변수 안에 날짜를 입력하여 결혼 날짜를 만든다

wedding = datetime.datetime(2023, 10, 14, 0, 0, 0 )

이때 0,0,0은 시간정보를 의미한다.

 

- 우리는 차이를 알고 싶기 때문에, diff라는 변수에 wedding -now 를 하고, .days를 추가한다

diff = (wedding - now).days

이러면 차이가 나온 값을 날짜로 사용한다는 의미가 된다.

 

13) diff 값을 index에 전달해야 한다.

13-1) return render_template('index.html', diff=diff)

diff=diff
왼쪽의 diff는 index.html에서 사용할 값, 오른쪽은 python안에서 만들어진 값
이는 html에서 diff라는 이름으로 이 값(wedding-now)을 사용하겠다는 의미이다.

 

​

13-2) index로 가서, xx라고 한 부분에 {{ diff }} 중괄호를 두번 써서 diff 쓰기

 

<p>구름♥마린의 결혼식이 {{ diff }}일 남았습니다.</p>

​

: python에서 어떤 값을 만들어서(diff), 그 값을 html 코드로 전달해 보았다.

​

14) 간격 조정 마무리

: styles.css로 가서 간격 조정을 해준다.

.calendar {
width : 100% ;
padding : 6px ;
margin : 30px 0 30px 0;

 

위 오른쪽 아래 왼쪽으로 margin을 주었다.

그런데 반복되므로 생략이 가능하다.

margin : 30px 0;

이는 좌우 여백은 없고 , 위 아래 여백만 주겠다는 것이다.

​

 

완성작 

​

​

​

---

​

오늘의 소감 ✍️

 

어제 - 오늘로 넘어오는 시간에 집중해서 만들어보았는데, 진짜 시간 가는 줄을 몰랐다.

중간 중간 워치가 일어나라고 두들겨서 일어나고 눈이 아파서 쉰 걸 제외하면

정말 집중해서, 재밌어서 코딩을 했다.

​

사진을 고르는 것부터 문구를 설정하는 것 까지 나는 역시 문과적 요소가 있어야 집중도 잘 되고 더 재미있는 것 같다.

​

내일 더 달려서 꼭 완성하고, 이를 수정하고

나중에는 누군가에게 선물로 만들어줄 수 있을 만큼의 실력이 되는 게 목표이다!

사실 그러려면 만드는 법 + 배포하는 법을 알아야 하지만 일단 하면 되겠지.