[Self Study] 모바일 청첩장 코드 톺아보기, 오류 해결하기

이전에 가장 재미있었던 프로젝트인

모바일 청첩장을 손보는 중이다. 

 

JS를 다루는 비중은 거의 없고,

HTML과 CSS가 압도적인 코드인 만큼 

즉각적으로 눈에 보이는 것도 많고 

이것저것 고칠만한 것도 많아서 지난 주말에 공부도 할 겸 시작하게 되었는데

 

역시나 코드를 수정하면서 여러가지 문제들을 맞닥뜨렸다.

 

---

1) ModuleNotFoundError: No module named 해결

 

가장 기초적인 과정으로

이전에 했던 코드를 홈페이지에 돌려본 다음 뜯어보려고 했더니

(지금은 돌아가게 다 바꿔놨다)

 

넷째 줄의 flask_pymongo가 그냥 하얀 글씨인 것이다.

이때 식은땀이 슬쩍 나기 시작했는데 

구글링을 통해 해결했다.

 

구글링에서는 flask_pymongo에 대한 직접적인 해결책은 없었는데,

패키지 업데이트나 새로 받아오기를 통해 해결하는 것을 보고 

어? 그냥 설치하면 그게 되는건가? 

이랬는데 그게 통했다.

 

파이썬 오류 No module named 'telegram' 해결 방법

 

pip install flask_pymongo

 

쉽게 해결돼서 참 다행이던 오류

 

---

2) 글씨체 변경하기 (css)

 

CSS HTML | 폰트이야기 | 상업용 무료 웹폰트 사용법 | @Font-face | @import

글씨체 사이트 :

눈누

 

기존에 있었던 글씨체는 예쁘지만, 작아서 좀 더 큰 글씨를 원했다.

폰트 변경은 의외로 쉬웠다.

 

css

css에 위와 같이 입력하면 적용완료.

@font-face {

  font-family: 'Happiness-Sans-Title';

  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/Happiness-Sans-Title.woff2') format('woff2');

  font-weight: normal;

  font-style: normal;

 

---

3) 다음의 문제는 바로 map을 적용하는 것이었다. 

 

사실 이미 map을 해봤기도 하고, 다시 적용하는 게 무리가 없을 거라 생각했는데..?

처음에 오류가 났다. (아예 안뜸)

 

그랬는데 어이없게도 map 코드를 싹 지우고 다시 넣으니 작동해서... 해결법이라 보기엔 민망하다.

 

지도(map) 추가하는 법 :

[Let's TIL✍️] 코딩 18 : 4 Week _ 모바일 청첩장 추가 실습 (1) & 스터디

---

 

4) 글씨 색상 변경 (HTML)

각각의 글씨 색상 변경을 원해서, HTML에 style을 지정해서 변경해주었다.

        <div class="row2" style="color:#28a76ba6">

 

그리고 글씨 색상 추천 사이트도 있길래 참고.

HTML 색 배경, 글자색, 테두리색 및 색상코드 목록 - dasima

---

 

5) 이미지 투명도 조절 (opacity)

 

사실 opacity를 통해서 0-1로 조절하면 끝나는 문제이건만...

글씨마저 다 연해지는 것 때문에 골머리를 앓았다. 

 

그렇게 방법을 찾았지만 다 해보니 내가 추구하던 방향과 좀 달라서 그냥 이미지를 변경했다.

그런데 이미지를 변경할 수 없는 경우라면, 밑의 두 가지 방식으로 배경화면만 투명하게 만드는 것을 추천.

 

1) CSS opacity

[CSS]배경이미지에만 OPACITY 적용(multiple효과)

 

 

[HTML, CSS] opacity로 요소, 배경화면 투명하게(흐리게)하는 방법, 자식 요소에 같이 적용되는 문제

 

2) RGB 컬러 조절 (not image, only color)

css 배경 색만 투명하게 하기

---

 

이렇게 하니 HTML , CSS 그리고 app.py가 돌아가는 문제들까지 얼추 해결 완료,

계획했던 것처럼 새로운 프로젝트를 만들 수 있었다.

 

BUT 마지막 관문이 남았으니... [배포]는 다음 글에서 만나보도록 하자.