html,css 3주차

1. 반응형으로 개발할 때 실 디바이스로 테스트가 중요하다.

   • 크기를 1px단위로 확인하면서 반응형으로 짤려면 엄청 힘들다.

2. img에서 srcset를 사용하여서 해상도에 따라 image의 크기를 바꿔줄 수 있다.

   • 높은 해상도에서 이미지의 픽셀이 깨지는 것을 방지한다.

   • css에서도 방지할 수 있지만 html에서 사용하면 성능면에서 좋다.

     • <a href="./index.html"><img src="./images/image-1x.png" alt="웹카페"
             srcset="./images/image-2x.png 2x,
             ./images/image-3x.png 3x"/></a>

     • /* 1.25 dpr */
             @media 
             (-webkit-min-device-pixel-ratio: 1.25), 
             (min-resolution: 120dpi){ 
                 /* Retina-specific stuff here */
             }
       
             /* 1.3 dpr */
             @media 
             (-webkit-min-device-pixel-ratio: 1.3), 
             (min-resolution: 124.8dpi){ 
                 /* Retina-specific stuff here */
             }
       
             /* 1.5 dpr */
             @media 
             (-webkit-min-device-pixel-ratio: 1.5), 
             (min-resolution: 144dpi){ 
                 /* Retina-specific stuff here */
             }

3. aria에는 속성과 상태가 있다.

   1. role는 속성으로 바뀌지 않는다.
   2. pressed, haspopup같은 경우는 바뀔 수 있는 상태이다.

4. calc

   1. 단위와 상관 없게 계산을 하게 해준다.
   2. ex) width : calc(100% - 30px)

5. table

   • scope로 제목의 방향 설정

   • thead, tfoot은 한번만 나오지만 tbody는 여러번 나온다.

   • id/headers로 제목과 본문을 연결 가능하다.

   • ul 태그는 display: table이 되고 li태그는 display: table-cell이 된다.

   • legend태그도 normalize를 적용하면 display : table로 되기 떄문에 원하는 크기가 제대로 나오지 않는다.

     • why? normalize change table
     • Edge와 IE에서 legend에서의 텍스트를 래핑이 불가능해서(버그) table로 만든다.
     • table로는 레이아웃하지말자 gird를 쓰자

6. filter

   • 다양한 효과를 낼 수 있다.

   • 그림의 뒤에 줄려면 backdrop-filter을 쓴다.

7. 반응형 이미지 처리

   • max-width를 사용하자

   • 작아지면 화질이 떨어져요

8. video같은 경우에는 다양한 포맷때문에 크로스 브라우저를 생각해서 다양한 포맷을 지정하기도 한다.

   1. 최근 웹 사이트는 mp4를 대부분 지원한다.
   2. 웹 접근성을 위해 자막을 넣어주자.
      1. 자막의 종류조는 오픈자막과 클로즈 자막이 있다.
      2. 클로즈는 영상 안 오픈은 따로 파일로 제공한다.
      3. 오픈자막은 vtt포맷이다.

9. iframe는 높이를 가지지 못한다.

   1. 그렇기 때문에 반응형으로 만들려면 div로 감싸줘야한다.
      1. 그 후 width와 padding-bottom으로 높이를 줘야한다.
   2. 높이가 너비를 기준으로 줄어들게 하고싶다.
      1. padding에서 hight를 주면 width에 따라 hight가 줄어든다.
   3. iframe을 안에 넣고 pos:a으로 offset는 left:0 top:0으로 해준다.
   4. div를 pos:r을 해주고 크기를 100%를 준다.

10. ul 앞에 있는 숫자를 바꾸고 싶을 때

    1. list-style을 지워주고
    2. before안에 content에 counter-increment로 각 li에 숫자를 넣고 꾸며주면 된다.

11. css에서도 변수를 사용할 수 있다.

    1.  :root {
               --main-bg-color: pink;
             }
       
       body {
           background-color: var(--main-bg-color);
       }

12. 반응형은 감싸는 박스의 크기가 고정이여도 안쪽 요소를 가변적인값을 주면 반응형으로 만들기 쉽다.

bbc코리아 사이트 가서 웹 접근성을 확인해보자 잘 지킨 사이트이다.