[Wecode 사전 스터디] 자기소개 페이지 (1)

김동하·2020년 9월 6일
0

wecode

목록 보기
1/25

나를 소개하는 페이지

wecode 사전 스터디 첫 번째 과제를 받았다. 자기소개 페이지를 만들어야 한다. 추후 javascript를 추가하겠지만 우선은 html와 css로 틀을 짜야한다. html과 css는 코드를 바로 시각적으로 확인할 수 있어 재밌지만 뜬구름 잡는 것 같아 배워도 배우는 느낌이 나지 않는다. 기분만 좋은 영역이랄까...

css가 제일 어려워

혼자 레이아웃을 만드는 것은 무리라고 판단하여 레퍼런스를 찾았다. 그냥 평범한 페이지보다는 감각적이고 보는 사람이 아름다움을 느낄 수 있는 그런 페이지를 만들고 싶었다. 마냥 스크롤 내리는 페이지는 제외하고 left/right가 나뉜 페이지 중 left는 fixed로 고정되고 오른쪽만 스크롤을 내릴 수 있는 느낌의 페이지 위주로 찾았다. 예전에 들었던 nomadcoder의 css 강의 중 괜찮은 사이트가 있어 참고하기로 했다.

navination bar 의 경우 예전에 만들었던 sticky(정확한 용어가 맞는지 모르겠음) 기능이 있는 navination bar로 정했다. 이유는 그냥 세련돼서. 스크롤을 내릴 때마다 번쩍번쩍하며 transition이 나오는 게 멋있다... 멋있는 게 최고야...

html/css를 안 한 지 반년이 된 거 같은데 벌써 다 기억이 나질 않는다. 이 영역은 도대체 어떤 영역인지 모르겠다. 이것저것 계속 하다가 때려 맞추는 느낌이다. 그런 기분 좋아하지 않는데... 이번 주에 css 헷갈리는 부분을 다 정리해야지.

공부해야 할 것

  1. position relative랑 absoulte 정확히
  2. grid 다시
  3. width,heigt 이미지 넣을 때... 아니 width는 자꾸 나를 짜증나게 해
  4. flex와 그 친구들 다시

순서

  1. 레이아웃 구상 -

직접 그려서 업로드하기

  1. 레퍼런스 찾기 -

http://www.besthorrorscenes.com

  1. 추후 추가할 것

toggle bar
소개글 하나씩 나오는 js

profile
프론트엔드 개발

0개의 댓글