css14

반응형 웹 디자인

모바일 기기와 웹 디자인

  • 1반응형 웹 디자인의 장단점
    장점: 모든 스마트 기기에서 접속 가능, 가로 모드에 맞춘 레이아웃 변경 가능, 사이트 유지, 관리 용이
    단점: 반응형 웹 기술이 최신 웹 표준인 css3의 일부=>최신 모던 웹 브라우저에서만 지원됨
  • 2뷰포트(viewport)
    실제 내용이 표시 되는 영역
    <head> 태그 안에 <meta> 태그를 이용해 뷰표트 지정
    일반적인 사용법: 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정

가변 그리드 레이아웃

  • 1그리드 시스템
    화면을 여러 개의 칼럼으로 나누어, 필요할 때마다 칼럼들을 묶어 배치하는 방법
  • 2고정 그리드 레이아웃
    px값을 이용해 크기를 고정하는 것
    화면 크기 줄였을 때 일정 부분만 나타남(전체가 줄지 X)
  • 3가변 그리드 레이아웃
    %로 지정
    (요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비)*100

가변 요소

  • 1가변 글꼴
    em 단위: 화면에 표시되는 포트 값을 기준으로 몇 배가 되는 지 지정
    1em=16px정도(폰트 달라지면 바뀔 수 있다)
    부모 요소가 중첩될 경우 글자 크기가 계속 달라짐
    rem단위: 처음부터 기본 크기를 지정하고 그것을 기준으로 글자 크기 지정 
  • 2가변 이미지
    1)css를 이용해 max-width:100%로 지정(추천X)
    2)<img>태그와 srcset 속성: 화면 너비 값이나 픽셀 밀도에 따라 고해상도 이미지 파일 지정 가능
    3)<picture>태그와 <source> 태그: 화면 해상도뿐 아니라 화변 너비에 따라 다른 이미지 파일 표시
  • 3가변 비디오
    css를  사용해 max-width:100%로 지정