미디어쿼리 css 사용 방식 혼자 포트폴리오 작업할 때 쓰던 쿼리 방식은 다음과 같았다. @mixin responsive($media) { @media screen and (max-width:$media) { @content; } } .inner { width: 1200px; margin: 0 auto; @include responsive(1200px) { width: 100%; } } 이런 식으로 따로 반응형 작업에 대해서 빼지 않고 각 element 밑에 추가하는 방식이었다. 물론 breakpoint 도 정의해두었지만 필요할때는 정해진 분기 이외에 따로 값을 지정하기도 했다. 이 방법은 내가 그냥 만들면서 편리한 방법이었다. 구조가 복잡해질수록 클래스명을 중복해서 작성할 필요가 없었으니까. // _r..

breakpoint 1025 ~ : PC 768 - 1024 : 태블릿 (가로) 481 - 767 : 태블릿 (세로), 대형 모바일 320 - 480 : 모바일 작업 유의점 일반적으로 웹페이지 먼저, 그리고 쿼리단을 내려가면서 작업한다. 용량 최적화를 위해 하나의 이미지로 전체 쿼리단에서 작업하는게 좋다. background-image 도 100%를 주고 width 값으로 조정이 가능하다. 역동적인 배경 삽입 background-image로 삽입하고 background-size로 사이즈 조절 가상선택자로 배경 삽입 후 transform 등으로 조절 - 참고 : www.sitepoint.com/css3-transform-background-image/ html img 태그로 삽입 후 position z-i..