[21.02.13] CSS 셋째 날

진도: ~수업을 마치며까지

4. 그리드-위에서 만든 웹페이지에 글을 나란히 배치하도록 끌어올리고 싶다면? -> 그리드
-여기서 새로운 html 태그 등장! 아무 의미 없는 정보를 담는 태그는 division의 약자인 div 태그 사용! (block level element)
아무 의미 없는 정보를 담는 태그는 span 태그 사용! (inline element)
-display:grid; 다음에 grid-template-columns 를 써주면 하나의 컬럼에 써줄 수 있음 -> 150px라고 하면 고정적으로 저 부피를 갖게 되고, 1fr이라고 하면 현재 화면 전체를 쓰게 자동으로 조정하는 단위 (2fr 1fr이라고 하면 2:1 비율로 현재 화면의 크기에 맞춰 자동으로 조절됨
->grid의 장점은 박스 안에 들어가는 글이 많아짐에 따라 자동으로 커지고, 다른 태그로 감싸진 내용도 자동으로 커진다

5. 반응형 디자인: 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것
웹은 수많은 형태의 화면에서 동작해야 함(모든 운영 체제, 기기 등에서!)
이 반응형 디자인을 css를 통해서 구현하는 핵심적 개념=미디어 쿼리! @media(~~~) ~~~ 부분이 쿼리!
if 화면이 800px이 되지 않는다면? 어떻게 되게 하고 싶다! 화면의 크기가 800px보다 커야 한다==화면의 크기가 최소 800px은 되어야 한다=>min-width:800px
@media(min-width:800px){ div{ display:none;}}

6. 중복된 css 코드를 가져오기-link 태그를 이용해!
link rel="stylesheet" href="style.css"-> link 태그의 역할 style.css이란 파일 다운받아서 원래 여기에 있던 것처럼 동작해
+) 개발자 도구로 웹페이지 볼 때, 네트워크라는 것을 클릭하면 해당 html 파일을 리로드했을 떄 내부적으로 어떤 파일들을 웹 서버에 다운받는지 확인할 수 있도록 함