[TIL-9] 생활코딩 WEB2 CSS-12~15(완강)

12. 미디어 쿼리 소개

• 반응형 웹 : 화면의 크기에 따라 웹페이지 요소들이 반응하여 동작.
• 미디어 쿼리 : CSS 영역 안에 반응할 조건 설명(@media) 후, 반응할 내용 씀.
  • @media(min-width:800px) {
        div{
           display:none;
        }
    }
  • 화면의 크기가 최소 800px(800px 이상)일 때 모든 div 태그가 화면에 표시되지 않는다.

 

13. 미디어 쿼리 써먹기

• grid의 display를 block으로 하면 나란히 안 나오고 화면 전체 폭 차지.
• [오류 났던 것]
  • #grid ul이라고 앞에서 선택자를 지정했던 부분을 미디어 쿼리 안에서 수정할 땐 그냥 ul이라고 하면 안되고 #grid ul이라고 그대로 가져와야 함.
  • [못 고친 것] 유튜브 영상을 가져다놓은 페이지가 있는데, 영상이 고정적으로 차지하는 크기 때문인지 화면을 줄일 때 본문 content가 고정되어 줄어들지 않는 에러 남. 영상 지우니 괜찮음...
  • 댓글이나 채팅 기능 갖다붙인 게 검사에서 에러로 뜬다.

 

14. CSS 코드의 재사용(진작 알려주시지,,,,)

• 똑같은 CSS 내용 여러 페이지에 적용하기 너무 귀찮아!!!
  • <style> 태그 안의 내용을 잘라내서 새로운 css파일(예: style.css)에 붙여넣는다.
  • <style> 태그 지우고, 대신 이 자리에 style.css라는 파일을 가져와서 적용하라고 명령.
    • <link> : 링크 태그. css 파일을 연결함. (예: <link rel="stylesheet" href="style.css">)
• CSS 코드 재사용의 효과
  • 각 페이지마다 CSS 코드가 쭉 써있으면 같은 내용인지 비교하기도 어려움. CSS파일과 링크 태그를 이용하면 내부적으로 훨씬 효율적인 상태.
  • 캐싱 때문에 CSS파일을 한번 다운받는 게 CSS코드를 계속 직접 쓰는 것보다 효율적. 빠르고, 네트워크 트래픽 사용료 덜 낼 수 있음.
• [오류?] 다 잘 되는 거 확인하고 파일 저장했는데 깃헙까지 올리고 나서 이제와 오류남. 500픽셀에서 목록 테두리랑 그리드 해제된 다음에 창이 안 줄어듦... 검사 창 띄워놓으면 밀려서 더 작아지긴 함. 왜지...?