프론트엔드 개발 취업 아카데미 [6차] 스벅 클론코딩 드디어 끝?!

<!-- 스벅홈페이지클론코딩드디어끝나는가 -->

 

오늘은 평소보다 15분을 더 자고 일어나, 수업시간 10분 전에 도착했다. 또 커피를 준비하지 못했다. 무조건 마셔야만 했는데.. 오늘로 스벅 홈페이지 마크업, CSS 클론 코딩이 마무리되었다. 웹 접근성에 맞게 작성하는 것.. 생각보다 쉽지 않다. '구조와 의미를 페이지에 담자. 주석을 사용해 코드를 보기 편하게 정리하자. 클래스를 남발하지 말고 공통되는 스타일을 찾아 모듈화 하자' 계속 생각하기. 점심은 컵라면과 삼각김밥. 음료는 테이크얼라이브블러드오렌지뭐시기. 내일은 꼭 커피를 준비해오자.

---

[프론트엔드개발 아카데미 6차 강의 필기]

 

• 페이지의 파일명 룰을 정할 때 대메뉴-소메뉴 이름을 참고한다. 반드시 관련지어 정한다.
• 페이지마다 body의 클래스이름을 각각 짓는다. 메뉴 이름을 포함한다.
• title을 정확하게 작성하도록 하자. 
  ex) <title>스타벅스 원두 | 커피 | COFFEE | Starbucks Coffee Korea</title>
• 모든 페이지는 고유한 이름의 타이틀을 가지고 있어야 한다.
• description 디스크립션도 페이지마다 소개를 잘해놓아야 한다. 콘텐츠적으로 중요한 부분이다.
  ex) <meta name="description" content="Starbucks Coffee Korea 스타벅스 원두 상품 안내" />
• 상세페이지마다 페이지의 경로를 표시하는 부분. 주로 상단 오른쪽에 위치하는데 빵부스러기라고도 부른다.(브레드뭐시기)
• 개발자적인 접근으로 코드를 짜도록 한다.
• 카드형 디자인인 많이 생기다 보니, a태그는 transparent 형태로 바뀌었다. a는 인라인 요소다. a안에 블록 요소를 넣어야 할 때는 a를 감싸고 있는 부모 태그의 속성을 파악하면 된다. a의 부모가 블록 요소면 가능하다. a를 span 등 인라인 요소가 감싸고 있다면 a안에 블록 요소는 들어올 수 없다.
• height의 높이를 측정할 수 없는 상태에서는 transition 스타일이 통하지 않는다. height auto에서도 안 먹는다. 하이트 값을 강제로 줘야 한다.
• 생각! 안 되는 부분은 무조건 원인을 직접 찾아내서 수정하자. 문제 해결 능력을 키워야 한다.
• background 스타일을 작성할 때, 포지션 값을 right 10px로 지정하면 오른쪽에서 10px 떨어진 곳에 백그라운드 이미지가 위치한다. 생각보다 유용한 스타일!
• position의 기준점이 되는 곳을 잘 확인하자.
• 이미지를 저장할 때 참고할 팁! 색이 많은 이미지인데 투명하다면 png 24로 저장, 색이 몇 개 안되는데 배경이 없으면 png 8로 저장, 색이 너무 많은 이미지는 jpg로 저장!
• 반복! 하나의 홈페이지를 익숙해질 때까지 여러 번 반복해서 클론 코딩해보자. 

---

점점 필기 내용이 짧아지는 것은.. 기분 탓일 거야.. 

스벅클론코딩. 솔직히 너무 지루하다! 하지만 '중요한 기초영역을 제대로 다지고 있다' 생각하며 집중하자.