html과 css에 너무 약하다는 생각이 들어서 오랜만에 유튜브에서 맘에 드는 영상을 찾아 클론 코딩을 해보았다.
다시 해보니까, 요즘 또 마구잡이로 하던 CSS 클래스 네이밍이라던가, 웬만하면 거의 div로 했던 나쁜 습관들을 느낄 수 있었다. 예전에 처음 html, css를 공부하며 할 땐 딱히 구조같은 걸 이해한다기보다는 정말 생각없이 따라쓰는 것이였어서 느끼지 못했었음. BEM을 써보려고 하는데, 일단 기능 먼저 구현!!!! 이게 머릿속에 잡혀있다보니 네이밍의 중요성을 잘 깨닫지 못하고 있었다....
어쨌든 클론 코딩하면서 느낀 점은
1. CSS 네이밍을 신경쓰자. (BEM?)
2. 반응형 제대로!
3. Mobile First
사실, 여태 뭔가를 만들면서 그냥 당연하게 데스크탑을 우선으로 하고 그 다음 모바일 버전을 수정하면서 CSS를 작성했었다. 영상을 보면서 왜 포트폴리오 사이트면서 모바일을 우선으로 만들지? 하는 생각이 들었는데, 그냥 내가 정말 아무것도 모르는거였다. 정말 대충 검색해보니 그 이유가 나옴.
왜냐면 구글이 인덱싱을 mobile-first로 하기 때문이다...
크롤링한 페이지의 데스크탑 버전이 모바일 버전과 많이 다를 경우, 모바일 유저들은 찾기가 힘들어지기 때문에 어쩌고... 어쨌든 모바일 친화적으로 만들기를 권장하고 있다는 내용. 심지어 저 글은 2018년 글... 18년에 첫 공개! 했다고 하니 지금은 더더욱 모바일 유저들을 위해 바뀌었을 것이다.
물론 해당 웹사이트의 트래픽이 모바일보다 데스크탑이 훨씬 높을 경우엔 다를 것이다.
데스크탑 버전이 훨씬 더 많은 콘텐츠나, 더 유려한 디자인?이 필요하기도 하고... 그래서 모바일 퍼스트인 웹들은 기능성에 초점을 맞춘다함.
그런데 회사가 아니라 내가 만드는 포폴같은 건 그래도 데스크탑이 우선이어야 되지 않을까???
어쨌든 모바일은 깨지지만 않으면 돼! 였던 나의 생각이 많이 바뀜.
최근 티스토리를 만들고 쓰면서 구글 서치 콘솔을 몇 번 만지작거리고 왜 내 글은 검색이 되지않을까? 라는 생각이 들었었는데(ㅋㅋㅋㅋ) 아 이래서 SEO에 정말 많이 신경을 써야되는구나 느꼈다. 블로그 글쓰기의 장점인가...
내 사진은 못 넣겠어서 강아지 사진을 넣었다.
애니메이션 몇 개만 넣어도 뭔가 있어보인다. js도 별로 필요없고...
모바일 버전은 gif 다시 넣기가 귀찮다... 네이버 블로그는 10mb이상도 그냥 들어가던데 티스토리는 왜 이렇게 엄격한거야 ㅠ 여튼 사진 귀여운 거 넣으니까 귀여워서 좋았다.
클론코딩보다는 내가 만들고 싶은 걸 만들어야해!! 이런 생각으로 내걸 만드는 거에 집중했었는데, 기초가 부족하다면 다시 유튜브에서 클론 코딩을 몇 번 해보는 게 도움이 확실히 되는 것 같다.
맨날 react로만 쓰다가 바닐라로 만들어보니 엉 생각보다 그렇게 복잡한 느낌은 아닌데? 생각이 들었다. 전에는 바닐라는 너무 귀찮은 것 같아서 하기가 싫었었다. 이건 물론 js를 별로 안써서 그런걸 수도 있긴 함. 여튼 결과물이 깔끔하고 예뻐서 재밌었다.
Reference
이 영상을 따라했다! 다른 건 다 너무 길기도 하고... 너무 긴 영상은 클론하기 힘들었는데 적당히 편집돼있어서 좋았음.
'Front' 카테고리의 다른 글
| netlify 배포 에러 (0) | 2021.12.06 |
|---|---|
| justify-content가 적용이 안될 때 (0) | 2021.04.18 |
| [CSS] Grid layout 공부 (0) | 2021.01.30 |
