[멋쟁이 사자처럼 프론트엔드 스쿨] 7일차 4L - HTML, CSS

   어제 설문조사 내용을 잠깐 볼 수 있었는데, 진도가 너무 느리다는 분들이 계셨어서 그런지 오늘 진도가 정말 정말 빨랐다. 한 챕터를 채 이해하기도 전에 넘어가서 그걸 붙잡고 있으면 다음 것도 놓칠 것 같아서 "일단 보류" 상태의 챕터가 쌓였다. 오늘 회고조 회의를 했는데, 이제부터 TIL을 작성해서 서로 공유하기로 했다. 그래서 그 정리는 일단 노션에 올리고, 거기서 핵심만 뽑아서 블로그에 정리를 할까 한다. 

  내가 학교 수업 때 HTML/CSS를 들었고, 따로 인터넷 강의도 들었음에도 나에게 생소한 태그들을 많이 알게 되었다. 내가 그 동안 배웠던 건 그냥 모방에 불과했음을 알게 되고... 접근성을 고려한 코드를 항상 고민해야함을 되새긴다. 

  내일은 특강날이라 피그마를 배운다는데, 한 번도 배워본 적이 없어서 너무 기대된다!

---

🍮 좋았던 것(Liked)

• 드디어 CSS 파트로 넘어간 것?(좋으면서도 천천히 진도를 나갔으면 하고...)

🍰 배운 것(Learned)

• CSS(Cascading Style Sheet) - 마크업 언어가 실제로 표시되는 방법을 기술하는 언어
  • 선택자(selector)와 선언부(declaration block)으로 이루어짐
• <picture>요소 - viewport의 너비에 따라 서로 다른 기기에서 해당 viewport에 맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해줌. HTML5에서 새롭게 추가된 요소임.
  • <img>필수 요소. picture의 자식 요소 중 가장 마지막에 위치해야 함. 명시된 <source>요소가 모두 조건을 만족하지 못했을 경우 사용됨.
  • <source>: 다중 미디어 자원(multiple media resources) 정의 시 사용. 광범위한 브라우저와의 호환성을 제공하기 위해 여러 파일 형식으로 동일한 미디어 콘텐츠를 제공하는 데 사용됨. => type, src, srcset(이미지 URL, 선택적 너비 설명자-"w", 선택적 픽셀 밀도 설명자-"x"), sizes 속성: 이미지의 최종 렌더링 너비를 설명하는 소스 크기 목록 지정.
  • 다양한 기기에서 확인 방법: chrome 개발자 도구 -> Toggle device toolbar -> Add device pixel ratio 선택
• 비디오 관련 속성 - controls, autoplay, muted. 스크린 리더에서 읽어주는 내용을 인지하기 어려울 수 있어서 autoplay 지정 시 음소거 상태로 재생되도록 함.
  • iframe - 인라인 프레임 정의 시 사용. allowfullscreen(전체 화면 허용), title(접근성 측면에서 중요. 여러 비디오가 있을 때 어떤 비디오가 있는 지 알 수 있어야 함.)
  • title보다는 aria-label 속성 권장. aria-label은 접근 가능한 이름이기 때문.
• 이미지 맵 관련 요소 - usemap, map, area.
• 테이블 관련 요소 - thead, tbody, tfoot, th(scope 속성 가질 수 있음. 행or열 방향인지).
• 폼 관련 요소 - interactive contents. action(서버의 주소), method(방법론), fieldset(같은 용도끼리 묶어주는 역할)
  • 모든 form 서식은 반드시 1대1로 대응되는 label을 가져야 함!
• 인터렉티브 요소 - 사용자와 상호작용을 할 수 있도록 제공. details, summary, dialog(모달창 - 접근성 측면에서 이점 ::backdrop, aria-labelledby
• async와 defer
• 유저 인터렉션 - 사용자와 상호작용 할 수 있도록 만들어 주는 속성. tabindex, accesskey, contenteditable
• CSS 스타일 시트 - 외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 시트

🧀 부족했던 것(Lacked)

• 필기를 핵심만 간단히 하는 걸 못 하는 것 같다. 전부 캡처하려고 하고, 그러다 진도를 놓치고. 그래서 오늘은 캡처는 포기하고 글로 모두 필기를 해두려고 노력했다. 
• 왜 그렇게 캡처하려고 하는지 생각해 보니 => 내가 필기 내용을 다시 볼 때 이게 어떤 코드였는지, 탭의 어느 메뉴였는지 등 모를까봐 해두는 거다. 근데 그런 건 내가 검색해 가면서 할 수 있을 것 같다.

🍪 바라는 것(Longed for)

• 필기는 핵심만. 키워드 써두고 자세한 건 내가 따로 공부해도 되니까! 다 적으려고 하지 말자!
• 저녁 시간 잘 활용하기... 어제 저녁 시간도 공부를 너무 조금 했다. 운동 시간, 공부 시간 모두 확보 하고싶다.

---

참고:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source