반응형 작업 시 유의점

 

breakpoint

1025 ~ : PC

768 - 1024 : 태블릿 (가로)

481 - 767 : 태블릿 (세로), 대형 모바일

320 - 480 : 모바일

 

 

작업 유의점

일반적으로 웹페이지 먼저, 그리고 쿼리단을 내려가면서 작업한다.

용량 최적화를 위해 하나의 이미지로 전체 쿼리단에서 작업하는게 좋다.

background-image 도 100%를 주고 width 값으로 조정이 가능하다.

 

 

 

역동적인 배경 삽입

1.  background-image로 삽입하고 background-size로 사이즈 조절
2. 가상선택자로 배경 삽입 후 transform 등으로 조절
      - 참고 : www.sitepoint.com/css3-transform-background-image/
3. html img 태그로 삽입 후 position z-index -1

정답은 없고 작업 방식의 차이일 뿐.

3번 방법이 가장 편하지만 sementic 에 부합하지 않는다.

가상선택자로 띄우는 것이 가장 적합할 듯하다.