12+DAY_멋사 프론트엔드 부트캠프 14기_TIL

What I Learned Today

오전에는 Custom Properties에 대해 배웠고 지금까지 배운것들로 실습을 했다.

• 사용자 지정 속성은 저작자가 정의하는 개체로 문서 전반적으로 재사용할 임의의 값을 담을 수 있다.
  • 변수는 부모 선택자 안에서 "--변수명 : 속성값" 이렇게 정의한다.
  • 변수는 자식 선택자에서 "var(--변수명)" 이렇게 사용한다.
  • 전역으로 사용하고 싶으면 ":root" 선택자 안에 정의하면 된다.
  • 변수 이름을 정할때는 용도에 맞게 정해야한다.
  • 사용자 지정 속성 안에 또 사용자 지정 속성을 넣고 사용할 수 있다.

오전 실습은 일단 마크업만 했다.

오전 마크업 결과

 

오후에는 오전에 마크업한 html 파일을 css로 스타일링 했다. 그리고 주말 과제의 피드백 시간을 가졌다.

스타일링 결과

그리고 회고시간을 얻어내서 마크업 연습을 했다.

 

The Problem I Faced

 

What I Tried to Do

 

How I Solved It

 

So

 

Aha Moments

지금까지는 정리한것들을 읽으며 복습을 했는데 실습을 하면서 복습하는게 이해는 훨씬 빠른것같다.

aspect-ratio : 요소의 크기가 변경되더라도 비율을 유지하고 width나 height중 하나만 지정해도 된다. 반응형 디자인에 탁월하다.

화면에서 숨기는 sr-only 선택자와 display:none 속성의 차이는 스크린리더가 읽느냐 읽지 않느냐의 차이다.