반응형 웹 디자인(responsive Web design) 모바일디바이스와 타블렛 같은 다양한 디바이스들이 등장하게 되었고, 그에 환경에 따른 별도의 대응이 필요하게 되었다.
RWD vs AWD(적응형):view port에 따라 증가하다가 특정 크기에서 고정형(데스크탑 +모바일)
반응형 웹의 100(width를 특정한 너비를 설정하지 않는다.)
컨텐츠는 물과 같다.용기는 다르더라도 내용물은 물은 그대로다.
미디어 쿼리 배치중요하다. 추천하는 방법은 모바일 환경에 대한 선형 디자인을 처음으로 고려하고 brekpoint를 추가하면서 너비나 상황 변하였을때의 값을 설정해주는 것이 좋은 방법이 된다.(모바일에서 데스크탑으로)
mobile first:컨텐츠 전략 선택 선형적인 기본작업을 모바일에서 만들고 그것을 데스크탑 컨텐츠로 순서로 최적화를 한다.
max-width:너비를 자신의 이상으로 안하겠다.너비가 줄수도 있지만 증가하진않는다.
height:auto:높이를 너비가 변호하는 것에 따에 자동으로 맞춘다.
10vh(view height)화면 view port의 1/10을 높이로 정하겠다. 앞에서 이야기했듯이 모바일 first 선형화
display:flex 의 order속성은 기본 값이 :0 기본 값보다 작으면 -1이면 기본 보다 먼저 값은 값이 있으면 순서대로 정의 한다.
flex-flow:row wrap은 축은 바꾸지 않고 wrap 을 사용함으로서 줄을 바꿈.
breakpoint는 쉽게 생각하면 추가될때 바뀌는 구간이라고 생각하면 된다.
@media screen and (min-width:801px)::801이 되면서 내용을 덮어씌우겠다.