프론트엔드 개발 취업 아카데미 [4차] 스타벅스 클론코딩/웹접근성/의미있는 파일명

<!-- 벌써 4일 차라니! -->

 

오늘은 30분 일찍 학원에 도착했다. 오는 길에 빽다방 커피를 한 잔 사들고 노션에 작성 해 둔 이번 주 계획표를 다시 확인했다. 오전 강의시간에 스타벅스 홈페이지 메인 클론 코딩을 시작했다. 무심코 지나칠 수 있는 부분들을 강사님께서 정확하고 확실하게 짚어주셨다. 이전에 퍼블리싱을 하며 고려하지 않았던 웹 접근성 부분을 특히 강조하셨다. 아카데미 과정을 수료하고 나면 마냥 쉽게만 생각했던 마크업 작업부터 크게 달라질 것 같다. 

---

<!-- 4일차 수업 필기 -->

 

• 마크업을 작성할때 의미와 구조를 항상 생각하자.
• 시멘틱 태그의 heading태그에는 콘텐츠 영역을 안내하는 문구를 넣자.
• 박스를 그릴 때는 디자인 위주가 아니라 콘텐츠 위주로 그리도록 하자.
• 이미지에 대문자, 소문자 그대로 속성 값 alt에 넣도록 하자.
• 콘텐츠의 작성 순서는 모바일 반응형 디자인을 한 번 확인하고 작성하자.
• 이미지의 파일명은 아이디, 클래스 이름을 반영해서 정하자. 의미가 반영되도록 지어야 한다. 이미지 파일명에 번호를 부여하는 것은 자제하자. 중간에 이미지를 추가해야 하는 경우가 있을 수 있다.
• 데이터로 컨텐츠(텍스트)를 끌고 오는 경우에는 짧은 문장, 긴 문장을 넣어 테스트한다.
• 불필요한 클래스 선언은 굳이 하지 말자. (나 이거 고쳐야 함. 클래스 선언 안 하면 불안해짐)
• 자바스크립트로 클래스 on을 붙이는 경우 title = "선택됨" ; 속성도 추가하도록 하자.
• 이미지에 텍스트가 있는 경우는 백그라운드로 넣지 말고 이미지 태그(콘텐츠 취급)로 넣는다.
• 이미지 태그는 블록 요소로 한 번 감싼다. 
• 숨김 처리(blind, hidden 태그 만들어서)가 되어있는 헤딩 태그가 있으면 웹 표준을 준수하는 느낌을 준다.
• section태그 안의 section은 2 depth까지만 사용하는 것이 전체적인 맥락을 심플하게 가져간다.
• 클론 코딩할 때는 가장 많이 사용되는 것으로 보이는 텍스트의 코드를 확인하고 body에 적용시켜 두자. 이때 될 수 있으면 line-height는 body에 작성하지 말자.
• 웹 접근성 - 탭 tab키 클릭 시 본문 바로가기 가 나타나는 것은 필수다. id명은 skip-nav로. 따로 특별한 스타일이 필요하지 않은 한 앞으로 작업하는 모은 페이지에 동일한 스타일을 주자. (스타벅스 클론 하면서 작성한 거 그대로 사용하면 될 듯) 
  
  본문 바로가기가 여러개 올 수 있기 때문에 position 의 left, top값을 0으로 준다. 평소에는 보이지 않도록 top값을 주어 위로 숨기고, 가상선택자 focus가 붙으면 top값을 도로 0을 주고 본문바로가기가 보이도록 한다. 이때 화면의 가장 위에 (앞에) 위치해야 하므로 z-index값을 크게 주도록 하자. (1000000)
• overflow: hidden; 은 요소를 블록 요소로 바꾼다. 요소에 position값을 주면 인라인 블록 요소가 된다.
• 플로팅으로 띄운 요소는 vertical: middle; 이 안 먹는다. line-height값을 주어 세로 정렬을 하자.
• input 태그는 고유의 패딩 값, 보더 값을 가지고 있다. 
• input 태그에 {font-family: inherit;} 스타일을 주자.
• header작업할 때 - 대 메뉴 사이에는 간격을 1px이라도 넣어줘야 한다. (다닥다닥 붙어있지 않고, 중간에 마우스가 포인트 모양이 나오도록)