190415_TIL(반응형 웹,미디어 쿼리,반응형 이미지)

4월 15일(월)

반응형 웹

• 마크업 구조가 심플 할 때 유용하다.

• 반응형 디자인이 되기 위해서는 콘텐츠가 물과 같아야 한다.

• 모바일 버전을 먼저 만드는 것을 권장한다.

• px(픽셀) 단위의 사용은 지양해야 한다.

• 모바일 환경과 같은 환경에서 이미지를 줄이는 것만이 능사가 아니다 사용자에게 보여주어야할 부분을 잘라내어서 확대해야 할 때도 있다.

• 반응형 웹 만들 시 유용한 사이트

미디어 쿼리

• 미디어 쿼리는 반응형 디자인을 만들기 위한 가장 강력한 도구.
• 다양한 방법들이 존재하지만 뷰포트 넓이에 대응하여 min-width, max-width 속성을 사용하는 것이 가장 일반적이다.
• 뷰포트 넓이를 조건으로 하여서 각기 다른 디자인을 적용한다.

미디어쿼리 예제

• 우측 상단 Edit in JSFiddle 링크를 클릭하여 뷰포트 넓이를 조절하면 된다.

반응형 이미지

• 반응형 이미지는 원본 이미지 크기 이상은 늘어나지 않도록 하기위해 div 같은 의미 없는 요소로 감싼 후 div 즉, 부모요소를 이용하여 사이즈를 조절하고 이미지 자체에는 max-width 속성을 부여한다.

반응형 이미지 예제

• 우측 상단 Edit in JSFiddle 링크를 클릭하여 뷰포트 넓이를 조절하면 된다.