[HTML 5 반응형 웹디자인_2015.03.26] 5. 유동형 레이아웃

[ 들어가면서... ]

ㅇ 미디어쿼리의 한계

 

 

          - 고정적인 디자인 폭은 다음 단계의 폭까지 매끄럽게 표현되지 않음

         - 콘텐트 짤림

          - 고정된 픽셀기반의 레이아웃을 유동적인 비례형 레이아웃으로 변경 필요 : px -> %

 

 

 

[ 유동형 레이아웃 ]  .... 화면의 크기에 따라 적절히 배분되는 레이아웃
ㅇ 고정 레이아웃을 비례형 레이아웃으로 수정
    1) 고정크기(px)를 비례형(%)으로 변환하기 위한 공식
        타깃 / 컨텍스트 = 결과

    2) 작성단계
       - 1단계 : 가장 바깥 태그를 비율로 설정
              id속성 값이 wrapper의 비율
              960px -> 96%로 변환 : 1단계 - 컨텍스트(960px) 설정

       - 2단계 : #wrapper의 하위태그인 id속성값이 header, footer,    navigation를 비율로 설정
              940px -> 940 / 960 = 0.979166667 -> 97.9166667%

       - 3단계: #wrapper의 하위태그인 id속성값이 content, sidebar를    비율로 설정
              698px -> 698 / 960 = 0.727083333 -> 72.7083333%
              220(220-2)px -> 218 / 960 = 0.227083333 -> 22.7083333%
       - 4단계: 10px의 패딩과 마진을 비율로 설정
              10px -> 10 / 960 = 0.010416667 -> 1.0416667%
       - 5단계: #navigation ul li a 마진을 비율로 설정
              25px -> 25 / 940 = 0.026595745 -> 2.6595745%

 

 ㅇ 그밖의 설정

       - 글꼴 : px 대신 ems사용

font-size : 100% = 16px = 1em

       - 유동형 이미지

이미지의 크기도 %로 표현

유동형 이미지에 제동장치 추가 : max-width 속성 사용