STUDY/기록

프론트엔드 개발 취업 아카데미 [8, 9차] 필기 / 기아자동차 클론 코딩 반응형(HTML / CSS)

홀로수키 2022. 1. 25. 17:54

<!-- 나 진짜로 프론트엔드개발자로 취업할 수 있을까? -->

 

벌써 프론트엔드개발 아카데미 과정 3주차다. 수업시간에 최대한 집중하고 있고(커피 안 마시면 나가리 되지만), 학원과 청년랩, 카페에서 혼공도 하고 있고. 그러다가 불안해졌다. 이렇게 공부하는게 맞나? 학원 과정은 강사님을 믿고 따라가면 되지만, 혼자서 공부할 때는 어떻게 해야 아깝지 않게 시간을 보낼 수 있는지 모르겠다. 일단 내 재생목록에 담아둔 인강들은 많이 있고, 미니 프로젝트도 만들어야 하고, 포폴에 넣을 클론사이트 작업도 해야 하는데. 게다가 지금은 자바스크립트에 집중하느라 리액트에는 아직 발도 못 담갔다. 혼자 곰곰이 고민하다가 '프론트엔드개발 공부를 도와 줄 사람을 구해볼까' 라는 생각이 번뜩였다. 어떻게 구해야 하지 눈알을 굴리다가. 당근마켓이 떠올랐다. 당근마켓에는 없는게 없으니까!. 이번 주 안으로 선생님을 한 번 구해보고, 안 구해지면 같이 프론트엔드개발자 준비를 하는 동지들을 구할 생각이다. 제발 집 주위에 꿈나무 개발자들이 많이 존재했으면. 제발. 

 

[프론트엔드개발 아카데미 8, 9차 필기]

(계속 실습을 하면서 중간 중간 번뜩일 때만 필기를 하는 관계로 내용에 맥락이 없어 보이는 것 같지만 착각입니다.)

  • 반응형에 무조건 들어간다고 보면 되는 햄버거 메뉴. 지금까지 이미지로 작업했지만, 이번에는 햄버거 모양을 스팬으로 만들고 after, before 선택자를 사용했다.

아래같이 작성하면 햄버거!

#mobile-menu > li a.menu::before {content: ''; position: absolute; left: 50%; top: 0; transform: translate(-50%,0); width: 100%; height: 2px; background-color: #453d3d; border-radius: 3px;}
#mobile-menu > li a.menu span {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 2px; background-color: #453d3d; text-indent: -9999px;}
#mobile-menu > li a.menu::after {content: ''; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); width: 100%; height: 2px; background-color: #453d3d;}

 

클릭이벤트 주면(메뉴에 .close 클래스 붙음) X!

#mobile-menu > li a.menu.close::before {transform: translate(-50%, -50%)  rotate(45deg); top: 50%; width: 120%;}
#mobile-menu > li a.menu.close span {opacity: 0;}
#mobile-menu > li a.menu.close::after {transform: translate(-50%, 50%)  rotate(-45deg); bottom: 50%; width: 120%;}

 

  • CSS transform 도 아래와 같이 여러 속성을 한 번에 작성할 수 있다.
#mobile-menu > li a.menu.close::before {transform: translate(-50%, 0)  rotate(30deg);}
  • transform-origin 은 따로 설정하지 않으면 기준점은 한 가운데가 된다.

  • 브라우저 화면폭에 비례하도록 크기를 조절해야 할 경우! 이미지는 %, 폰트는 vw를 사용하도록 하자.

  • 반응형 작업 중 모바일 CSS 에서는 hover 효과를 빼도록 하자. 어차피 작성해도 소용없음.

  • *클론코딩 할 때 절대적으로 홈페이지를 따라하려고 하지 말고, 내가 개선한 작업물이 낫다 싶으면 그대로 가자. (솔직히 스벅 클론코딩하면서 느낀거지만 대기업 홈페이지를 이렇게 막 만들 수도 있구나 싶었다.)

  • 선생님의 CSS 작성 방법대로 작업할 때 (1024에서 PC, 모바일로 나뉘는) 일단 PC를 모바일CSS 로 옮겨두고, 가로 정렬(특히 플로팅 작업, 가로 사이즈 px 등등) 해 둔것을 다 지운다.

  • UI의 변화가 심한 것은 PC, 모바일 클래스를 붙여서 각각 만들도록 한다. 같은 내용이 두 번 반복되지만..

<!-- 기아자동차 클론 코딩 시작-->

 

원래 현대자동차 홈페이지를 클론코딩 하기로 했는데, 상세페이지의 난이도가 너무 높아 기아자동차로 바뀌었다..

  • webp 확장자! 처음 들어봤는데 구글에서 만든 이미지파일 확장자라고 한다. (gif, jpg, png 등으로 나눌 필요가 없다. webp 이거 하나면 해결 가넝. 게다가 용량도 작다.) 그러나 ie에서 지원을 하지 않기 때문에 아직 현업에 바로 사용하기는 어렵다고 한다. 

  • ir-hidden 클래스로 숨겨둔 헤딩태그에는 컨텐츠 내용을 파악하고 적절히 넣어두자.
  • 블록요소를 감싸는 블럭요소는 불필요할 때 가 많다. (이거 내 습관. 그냥 무조건 쓸데없이 감싸려고) nav같은 경우는 제외!

  • 파비콘의 확장자 ico가 아니어도 상관없다. 32*32 사이즈의 png도 가능

  • 컨텐츠를 브라우저창 탑의 위로 올라가도록 하려면 포지션 bottom 100%, 브라우저 바텀 밑으로 내리려면 top 100%.

  • background 속성에서 left 90% 의 의미는 부모의 left 90% 지점과 백그라운드의 left 90%지점이 맞춰지는 것.

  • 보통 h1에 로고를 넣을 때, 로고 이미지의 크기와 h1의 영역을 반드시 확인하도록 한다. h1은 블럭요소이므로 한 줄 전체를 차지한다. (h1을 포지션으로 띄우고 a, img 태그에 각각 display block을 줬다.)

  • 가로로 정렬되어 있는 버튼 사이에는 1px이라도 간격이 있어야 한다. 사용자들이 영역을 명확하게 구분할 수 있도록 . (이 내용은 웹접근성에도 나와있지만 보통은 제대로 확인하지 않는 부분이라고 함)