🟢 CSS 초안 구상
⚡ 디자인 컨셉
- 과거 학창 시절 받았던 가정통신문(갱지 혹은 똥종이..?) 느낌이 나도록 디자인 컨셉을 정함
- 가정통신문 느낌을 살리기 위해 전체적인 색감은 그레이(회색) 톤으로 결정
- 폰트 역시 레트로 느낌을 위해 미래로 글꼴로 결정
미래로글꼴 폰트 정보
⚡ 디자인 초안 그리기
- 디자인 초안을 위해 FIGMA라는 웹 애플리케이션을 사용하였다.
- 완전히 처음 사용해보는 앱이라 모르는게 있을때마나 구글링, 유튜브를 참조하였습니다..
- 토론하는 이미지는 Freepick 사이트의 rawpixel.com 작가님의 자료를 사용하였습니다.
- 컨셉에 맞게 영어 대신 한글을 사용함(사실 미래로글꼴 폰트 영문자가 이쁘지 않았음ㅎ)
피그마를 이용한 디자인 초안 ver.1
- 실제 웹 CSS 적용시에는 갱지느낌을 살리기 위해 꾸깃꾸깃한 종이 배경을 사용할 예정임
- ver.1의 밋밋한 느낌을 개선하고 컨셉 디테일을 살리기 위해 일부 수정하였음
디자인 ver.2
⚡ CSS 완성본
- 위에 제목에 해당하는 부분은 display: grid를 적용하고,
- 나머지 부분은 display: flex 속성을 이용하여 화면을 구성하였습니다.
- 간단할 줄 알았는데 피그마로 목업한거와 실제 코딩과는 천지차이 라는 것을 깨달았습니다..
- GIT 배포 URL
FIGMA 목업을 바탕으로 css를 적용한 웹 화면
🟢 HTML / JavaScript
