웹 기초 (4) - CSS — 86400개의 발자국

참고자료 - 생활코딩 CSS 10~15

그리드 - 생활코딩

그리드의 기본 사용법 강의 caniuse 홈페이지 소스코드 변경사항 그리드 써먹기 강의 소스코드 변경사항 Grid 기능의 호환성 https://caniuse.com/#feat=css-grid

opentutorials.org

1. 그리드

`<div>` `</div>` : 디자인을 위해 쓰는 의미없는 태그 (division) - block level element. 전체 화면 씀.

`<span>` `<span>` : 위와 동일 목적. - inline element.

그리드를 사용하기 위해서는 각자 태그의 부피감을 알아야 함.

# 부피감 명확하게 확인하기
<style>
	div{
        border:5px solid gray;
      }
</style>

그리드를 쓰기 위해서는 부모태그가 필요함.

나란히 배치. 1fr은 나머지 공간을 차지.

알아두면 좋은 사이트

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

반응형 디자인 : 화면의 크기에 따라 웹페이지의 각 요소들이 반응해 최적화된 모양으로 바뀌는 것.

# screen width > 800px
@media(min-width:800px)

style태그를 제외한 CSS 코드를 style.css에 복붙 후

`<link rel="stylesheet" href="style.css">`

style.css에 있는 css 코드를 불러옴.

검사에서 network로 가면 내부적으로 어떤 파일들을 웹서버에서 다운로드 받는지를 확인할 수 있음.

css 파일을 캐싱하면서 트래픽, 즉 사용료를 적게 낼 수 있는 장점.