Skip to content

0516.md

Latest commit

 

History

History
129 lines (120 loc) · 5.69 KB

0516.md

File metadata and controls

129 lines (120 loc) · 5.69 KB

반응형 웹 사이트

사용자의 환경(스크린 사이즈, 플랫폼, 회전 방향 등)을 고려하여 응답할 수 있도록 제작하는 것

반응형 웹 제작의 고려사항

  • 콘텐츠 전략 (Content strategy)
  • 유연한 그리드 레이아웃 (Flexible grid layout)
  • 유연한 이미지 / 미디어 (Flexible images and media)
  • 디바이스 픽셀 밀도 (Device Pixel Density)
  • 중단점 / 미디어 쿼리 (Breakpoint and Media queries)

레이아웃 구현 방법

  1. 플렉시블 박스
    • 콘테이너 사이즈에 따라 유연하게 대응하는 플렉스 박스를 이용한 레이아웃 구성
    • IE 환경에서는 완벽하게 호환되지 않기 때문에 사용에 주의
  2. 그리드 레이아웃
    • 화면을 구성하는 콘텐츠를 일정한 비율로 배치하여 레이아웃을 구성하는 방법
    • 그리드 레이아웃 제너레이터 (http://gridinator.com/)
    • 유연한 그리드 레이아웃 사용을 위해서는 픽셀(pixel)이 아닌 상대단위(em, rem, %)를 사용

반응형 이미지

  1. 유연한 이미지(Fluid image) : 콘테이너 요소의 폭에 맞추어 크기가 변경되는 이미지
  2. 재단 이미지(Crop image) : 콘테이너 요소의 폭에 맞추어 동적으로 잘려지는 이미지

반응형 이미지 처리 방법

  1. img 태그의 srcset과 sizes 속성 
    <!-- DPI에 따라 해상도에 맞는 이미지 출력 -->
<img src="../images/image-src.png" alt="고해상도 대응을 위한 선언"
        srcset="../images/image-1x.png 1x,
        ../images/image-2x.png 2x, 
        ../images/image-3x.png 3x, 
        ../images/image-4x.png 4x">
  2. picture element 
    <!-- media 조건값에 따라 이미지 출력 -->
<picture>
    <source srcset="../images/small.jpg" media="(max-width: 600px)">
    <source srcset="../images/medium.jpg" media="(min-width: 601px) and (max-width: 800px)">
    <source srcset="../images/large.jpg" media="(min-width: 801px)">
    <!-- picture element를 지원하지 않는 브라우저에서 사용될 기본 이미지 -->
    <img src="../images/normal.jpg" alt="뷰포트 크기에 따른 이미지">
</picture>
  3. js 사용 
    <img src="../images/webcafe-logo.png" alt="레티나 대응 이미지">
<script src="../js/retina.min.js"></script>
  4. 배경이미지 CSS 미디어쿼리 적용
    • CSS media query를 이용해 조건에 따른 이미지를 background로 처리
    .rwd-bg{
    background: yellow url('../images/webcafe-logo.png') no-repeat;
    background-size: contain;
    width: 300px;
    height: 200px;
}
@media screen and (min-device-pixel-ration: 2), (min-resolution: 192dpi){
    .rwd-bg{
        background-image: url('../images/webcafe-logo@2x.png')
    }
}

참조링크

DPI & PPI

DPI(Dots per Inch) : 1인치 당 점(Dot)이 몇 개인지를 나타내는 인쇄물의 도트 밀도

PPI(Pixel per Inch) : 1인치 당 픽셀(Pixel)이 몇 개인지를 나타내는 화상(모니터)의 픽셀 밀도

  • 이미지의 밀도가 높을수록 선명하고 깨끗하게 보이지만, 그만큼 많은 양의 메모리를 필요로 하기 때문에 성능저하 이슈가 발생할 수 있다.
  • Apple은 72dpi, MS는 96dpi를 표준 해상도로 채택하고 있다.

미디어쿼리

CSS 분기 방법

  1. 내부
    • CSS 코드 내부에서 사용하는 미디어 쿼리
    @media only all and (조건문) {실행문}
  2. 외부
    • 조건문에 따라 별도의 외부 CSS 파일을 참조하여 분기
    <link rel="stylesheet" type="text/css" media="all and (조건A)" href="A.css">
<link rel="stylesheet" type="text/css" media="all and (조건B)" href="B.css">

분기 조건문

  1. width / height
    • 화면에 표시되는 뷰포트의 너비와 높이
    • min-width, min-height, max-width, max-height
    • 일반적으로 가장 많이 사용
    @media all and (min-width:768px) and (max-width:1024px) { … } 
// 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하이면 실행

@media all and (width:768px), (width:1024px) { … } 
// 뷰포트 너비가 768px 이거나 ‘또는’ 1024px 이면 실행

@media not all and (min-width:768px) and (max-width:1024px) { … } 
// 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하가 ‘아니면’ 실행
  2. device-width / device-height
    • 스크린의 너비와 높이
  3. orientation
    • 뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단
    @media all and (orientation:portrait) { … } 
// 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행

@media all and (orientation:landscape) { … } 
// 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행
  4. aspect-ratio
    • 뷰포트의 너비와 높이에 대한 비율.
  5. device-aspect-ratio
    • 스크린의 너비와 높이에 대한 비율.
  6. resolution
    • Device pixcel ration과 연계하여 사용
  7. 그 외 조건
    • color, color-index, monochrome
    • scan, grid

참조링크

ARIA Landmark Roles

  • banner : HTML5의 header 역할
  • complementary : HTML5의 aside 역할
  • contentinfo : HTML5의 main 역할
  • navigation : HTML5의 nav 역할

참조링크