Airbnb 회고(SCSS)

Airbnb 후기(SCSS)

해당 과제는 scss를 이용하여 원하는 home page를 0부터 만들어 보는 것입니다.
(많은 JS는 들어가지 않았습니다.)

우선.... css를 자유롭게 다루지 못하고 이론만 엄청 공부한 상태 였습니다. 그래서 미리미리 잠을 줄여가며 진행을 하였고 뭔가 빠른 시간 내에 빠르게 제작을 해봐라 라는 의미가 있는 과제인 것 같아 심플하고 명확하게 작성하도록 노력했습니다.

재미있게 봐주세요!!!
아하 저는 🛫Airbnb 사이트를 만들었습니다.🛬

* 맨 마지막에 영상도 있으니 마지막까지 ㅋㅋㅋㅋ *

이 사이트를 선택한 이유는 여행에 관심이 많고 사이트가 엄청 이뻤습니다.
그리고 초반 공유 경제가 뜰 때 관심이 많아서 사업도 할려고 했었다는 무서운 이야기 👹

🤡  1.  어디까지 js❓

js기능을 우선시 하지 않고
html 구조, scss에 초점을 맞추어 과제를 진행하여야 합니다.

그래서 scss가 어디까지 할 수 있는지 확실한 구분선이 필요했습니다.

그런데...

거의 다 된다.....

출처: 지브리

 

그래도

기준을 잡아야 진행을 잘 할 수 있을 것 같아 js 에서 addEventListener로 해야 되는 것들을 배제

하고 진행을 하도록 하였습니다.

🤡  2.  큰 틀 (html 구조)

아직 많은 경험이 없어 감이 잘 잡히지 않았습니다.
그래서 그냥 다른 프로그래밍 할 때 처럼 해보자 !!!
라는 생각으로 시작을 했습니다.

👾 1. 큰 구조만 짜자 (부분 나누기)

그래서 chrome fn + f12 를 이용한 엄청난 기능인 이것!! 이름을 잘 모르겠네...

그래서 다음과 같이 큰 틀만 짜게 되었습니다.

<header></header>
<div class="ukraine"></div>
<div class="booking"></div>
<div class="next-trip"></div>
<div class="experience"></div>
<div class="shop"></div>
<div class="hosting"></div>
<div class="getaways"></div>
<footer></footer>

이젠 채워가야죠 !!

👾 2. 나눈 부분을 하나씩 만들어 나가자!

이젠 차근차근 하나씩 만들기 시작했고 만들면서 이젠 문제가 조금씩 조금씩 발생했습니다.

🤡  3.  icon, font ❓❓

처음에 .png로 icon, 사진을 다 저장해서 <img>를 이용했지만 너무 이상하다는 생각이 들었습니다.

분명 이런 귀찮은 작업을 개발자 분들이 가만히 나뒀을 리가 없다!!! 그래서 물어봤습니다. ㅋㅋㅋㅋㅋ

그랬더니 icon다운 받아서 많이 사용한다는 좋은 답을 얻고 더 찾아본 결과 google 에서 제공하는 icon 사이트, font 사이트 를 통해 문제를 해결 하게 되었습니다. !!!

*사실 font 부분을 사용할 때 맨 위에다가 font-family를 선언하고 자식 요소에서 font-weight: 값을 통해 여러 값을 쉽게 이용할 수 있는데 !!

일일이 font-family를 써주는 바보같은 일도 했습니다. :)

 

🤡  4.  Scroll header ❓❓❓

Scroll을 내려서 header 부분이 바뀌는 것이 js를 이용해서 해야 하지만 이 부분만은 하고 싶었습니다.

뭔가 너무 끌리는❓

그래서 해당 부분에 관한 것을 영어로 Searching 하는데 잘 못 찾았었습니다.

결국 scroll header transition이라는 키워드를 통해 찾기는 했지만 이 과정에서

> 정말 넓게 한번 다 훑는 것도 좋겠다

> 개발자들이 많이 사용하는 영어 단어를 찾아보고 싶다.

라는 생각도 가지게 되었습니다.

그리고 사진 fit 맞추기, text gradient 등등 여러 문제가 있었지만 구글링과 전에 익혔던 개념으로 완성을 할 수 있었습니다.!!!

번외 편으로

🤡  5.  width, height, margin, padding... ❓❓❓

이 부분을 사실 눈👀 때중으로 맞춰가며 해서 굉장히 불편했습니다....

그래서 다음에는

> 공통된 것을 정리 <

를 해서 사용하는 식으로 진행을 해볼려고 합니다.

🤡  5.  코드 정리 ❓❓❓

여기는 4번 문제로 인해.... 하...

❗️❗️❗️꼭 공통된 부분 check 하자 ❗️❗️❗️

 

영상 보고 마치며

.gif로 변환해서 넣을 려고 했는데 용량이 너무 큽니다. ㅜㅜ

다른 사이트를 보며 그대로 제작을 하는 데도 약간씩 다른 요소가 있었습니다.
개인적으로 최악의 완성도인 것 같아 정말 아쉽고 제 실력에 화가 많이 납니다. 🔥
하지만 해당 Page를 진행하면서 뭔가 개인적인 생각이지만 빠르게 배우고 빠르게 적용할 수 있는 장점과 디자인 적인 감각이 살짝 있는 것 같은?(Page 선택을 잘해서) 망상을 하면서 마칩니다. ㅎㅎㅎ 디테일을 많이 살리지 못해 아쉬운 점이 많았지만 여기에 너무 머무를 수 없어 다음에는 더 멋깔나게 만들어야겠습니다. :0

 

REF

https://www.airbnb.com/
https://fonts.google.com/icons?selected=Material+Icons&icon.query=search
https://fonts.google.com/specimen/Poppins#type-tester
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://velog.io/@neulhan/css-%EB%A1%9C-%ED%85%8D%EC%8A%A4%ED%8A%B8%EC%97%90-gradient-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

css 로 텍스트에 gradient, 이미지 적용하기 (feat. githubuniverse, hex2rgba)

https://www.ghibli.jp/info/013344/