강사님 코드리뷰

• 컨테이너 요소 (가장 외곽에 있는 요소)에는 class를 다 붙여주는 것이 좋다

• css 선택자를 사용할 때, class 가 있는 요소더라도 나중에 css 요소가 추가될것을 고려해 외곽에 있는 container 부터 타고 가는 것이 좋다

• 모달을 만들 때

  article : 무난하게 좋다

  dialog : 모달을 위해 새롭게 나온 태그 (https://developer.mozilla.org/ko/docs/Web/HTML/Element/dialog)

  div : 의미가 없으므로 사용을 지양하는 것이 좋다

  section : 연속적인 요소들을 표현할 때 사용하는게 좋다

• .a11y : 화면에서는 사라지지만 브라우저는 인식할 수 있도록 설정

  .a11y {
      display: inline-block;
      position: absolute;
      overflow: hidden;
      width: 1px;
      height: 1px;
      border: none;
      clip-path: inset(50%);
  }

• width : viewport의 크기가 줄어들어도 크기가 고정된다

• max-width : viewport의 크기에 맞춰서 줄어든다.

• css 선택자는 최대 3~4개까지만 사용한다.

• 가상 요소 선택자에 반드시 들어가야 하는 것
  • content
  • display : block or inline-block
    • 나중에 넓이나 높이값을 반영하기 위해

• position : absolute를 주면, display : inline-block으로 바뀌게 된다.

• 구현 순서

1. html 태그 넣기

2. common css

3. 위에있는 요소부터 css 적용

4. JS
   • 바로 flex를 사용하지 말자
   • 꼭 필요할때만 사용

• 같은 요소가 3개이상 사용되는 경우, 리스트를 사용하는것이 좋다.

• 우아한 성능저하

• 점진적 향상