1만 시간의 법칙 웹 페이지를 클론 코딩함
클론 코딩 후 html 웹 표준 검사와 css 검사를 해보고 오류를 수정하여 웹 접근성을 높이는 법을 배움.
일만 시간의 법칙을 미리 코딩해보고 강사님이 몇 분의 코드를 리뷰해보는 시간을 가졌다. 텍스트 이미지를 사용했을 때 alt 값에 그 내용을 전부 작성해줬는데 이미지로 텍스트가 전부 드러나고 있으니 굳이 alt 값을 주지 않아도 괜찮은 상황이라고 하셨다. 이해가 가는데 약간 안 간다.. 아직도 생각 중... 아 그리고 뭘 제출하거나 포트폴리오를 만들 때 꼭 웹표준 검사를 해야겠다.
section
나눌 때 h1~6 태그를 잘 사용하지 않았는데, 구획을 나눴을 때 그것을 식별하기 위한 용도로 각 section의 내용을 정의하는 h1~6 태그가 있다면 더 의미론적인 코드가 된다는 걸 다시 배웠다. 뭔가 배울수록 마크업이 참 어렵다.
미디어 쿼리를 사용해서 반응형 웹으로 구현하라고 하셨다. 아이폰을 고려하고 싶어서 시리즈 최대 width인 414px을 기준으로 잡았다. 그런데 input
을 감싸고 있는 p
가 화면이 414px 이하부터는 나뉘어서 보여야하는데 이걸 어떻게 작성해야 하는지 고민이 됐다. 결국엔 다 조각내서 p
로 묶었는데 강사님은 input
의 display를 block으로 바꿔서 강제 개행을 시켰다. 아하..!~! 쉬운 길도 어렵게 가는 나란 녀석👀
어제 기업들의 컨벤션을 보면서 z-index에 대해서 10 단위로 쓴다는 것을 알게됐다. 왜 굳이 10 단위로 써야하는지 싶었는데 css도 들여쓰기 안 하는데 뭐... 그런데 오늘 어떤 분 코드를 강사님이 리뷰 해주시다가 겹친 이미지 중에서 z-index를 통해 이미지의 쌓임을 제어하는 부분이 있었는데, 더 큰 값을 주지 않아서 이미지가 제어되지 않았었다. 그래서 해주신 말씀이 10 단위로 사용을 하라는 것이다. 처음부터 1,2,3···으로 사용하다 보면 어디까지 값을 준지 헷갈려서 제대로 제어하지 못하는 경우가 생길 수 있다고 하셨다. 오늘 실습을 통해 되게 많은 것을 알아가는 것 같다. 역시 직접 해보는게 짱.
h태그를 무조건 넣긴하는데.. 어떤식으로 작성할지 아직 감이 잘 안잡히네요😅