반응형 양식 레이아웃 패턴

해상도별 미디어 쿼리

• General Horizontal Type
  • @media only screen and (orientation: landscape) { }
• General Vertical Type
  • @media only screen and (orientation: portrait) { }
• Smart Phone (Horizontal / Vertical Type)
  • @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { }
• Smart Phone (Horizontal Type)
  • @media only screen and (min-device-width: 321px) { }
• Smart Phone (Vertical Type)
  • @media only screen and (max-device-width: 320px) { }
• iPad (Horizontal / Vertical Type)
  • @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
• iPad (Horizontal Type)
  • @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { }
• iPad (Vertical Type)
  • @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { }

미디어 쿼리 어플리케이션 메소드

• Link
  • <link rel="stylesheet" href="./example.css" media="screen and (min-width: 512px) and (max-width: 1024px)">
• Style
  • <style type="text/css" media="screen and (min-width: 512px) and (max-width: 1024px)"></style>
• Style @import
  • <style> @import url(./example.css) screen and (min-width: 512px) and (max-width: 1024px); </style>
• Css
  • @media screen and (min-width: 512px) and (max-width: 1024px) { }

미디어 타입

• all: All media
• aural: A voice synthesis device
• braille: Braille display device
• handheld
• print
• projection
• screen
• tty: 디스플레이 능력이 한정된 텔렉스, 터미널, 또는 수동 이동 장치 등 고정된 글자를 사용하는 미디어
• tv
• embrossed: Braille signs printed on the page

미디어 쿼리 속성

• width: The horizontal length of a web page
• height: The vertical length of a web page
• device-width: The physical horizontal length of a device
• device-height: The physical vertical length of a device
• orientation: width와 height을 계산하여 width value가 크면 landscape로, height value가 크면 portrait로 전환
• aspect-ratio: width, height 비율 확인
• device-aspect-ratio: 물리적인 device의 width, height 비율 확인
• color-index: device에서 사용하는 최대 색상 수 확인
• monochrom: 흑백단말기에서 black과 white 사이의 단계 확인
• resolution: 지원하는 해상도 확인(unit: dpi or dpcm)
• color: 단말기에서 사용하는 최대 색상 수 확인

Fluid Grid

• Example: https://960.gs/demo_24_col.html
  • 화면을 12개의 column으로 나누어 12가지의 class의 모양으로 다양한 레이아웃 생성
• Specification
  • 유동형 그리드는 그리드의 폭을 고정 값이 아닌 em 또는 %의 값으로 설정하여 가로 폭 길이의 변화에 따라서 칼럼의 크기가 상대적으로 변하게 하는 방법
  • 가로 폭에 반응을 하면서 레이아웃에는 변화가 없어 폭이 좁은 모바일에서는 효과미비
  • 따라서 유동형 그리드는 미디어 쿼리를 사용하여 해상도를 조절하여 그리드의 고정 값을 변화시키는 반응형 그리드를 사용

Liquid Layouts

• Specification
  • 레이아웃 크기를 유동형 그리드와 같이 상대적 단위로 지정하여 웹의 크기에 따라 유동적으로 변화를 주고, 반응형 그리드와 같이 미디어 쿼리를 사용하여 일정 크기가 되면 레이아웃 구조를 변경
  • 특정 영역이 사라질 수도 있고, 합쳐지기도 하면서 유동적으로 레이아웃 구조가 변경됨.
• Multi-Device Layout Patterns by Luke Wroblewski
  • Mostly Fluid: 가장 작은 화면에서는 수직으로 칼럼을 세우는 구조를 가지며, 다른 작은 화면에서는 유동형 그리드와 유동형 이미지를 사용하여 레이아웃을 그대로 유지
  • Column Drop: 화면이 작아짐에 따라 부차적인 칼럼을 아래로 떨어뜨림. 대부분의 칼럼 폭은 화면 크기가 달라져도 변함이 별로 없다는 특징이 있음.
  • Layout Shifter: 다양한 기기에 따라 각기 다른 레이아웃을 보여줌. 복잡하고 많은 작업이 필요하지만, 혁신적인 디자인을 담을 수 있음.
  • Tiny Tweaks: 하나의 칼럼을 사용하는 패턴으로, 변화의 폭이 크지 않다는 특징이 있으며, 주로 글 내용을 중시하는 웹에서 많이 쓰임.
  • Off Canvas: 큰 화면에서는 모든 칼럼들을 보여주고 작은 화면에서는 하나의 메인 칼럼을 보여주며, 다른 부가적인 칼럼들을 화면 밖에 숨겨놓는 패턴으로, 숨겨져 있는 다른 컬럼은 필요할 때만 접근하도록 함.

Liquid Layouts

• Specification
  • 레이아웃 크기를 유동형 그리드와 같이 상대적 단위로 지정하여 웹의 크기에 따라 유동적으로 변화를 주고, 반응형 그리드와 같이 미디어 쿼리를 사용하여 일정 크기가 되면 레이아웃 구조를 변경
  • 특정 영역이 사라질 수도 있고, 합쳐지기도 하면서 유동적으로 레이아웃 구조가 변경됨.
• Multi-Device Layout Patterns by Luke Wroblewski
  • LukeW | Multi-Device Layout Patterns
  • Mostly Fluid: 가장 작은 화면에서는 수직으로 칼럼을 세우는 구조를 가지며, 다른 작은 화면에서는 유동형 그리드와 유동형 이미지를 사용하여 레이아웃을 그대로 유지
    • Wide PC에서는 가변이 아닌 고정형, 이보다 작아지면 내부는 가변형으로 설정
    • Tablet PC에서는 여백을 없애고 가로 100% 상태로 콘텐츠 노출
    • Mobile에서는 column을 한 개씩 Vertical Align
  • Column Drop: 화면이 작아짐에 따라 부차적인 칼럼을 아래로 떨어뜨림. 대부분의 칼럼 폭은 화면 크기가 달라져도 변함이 별로 없다는 특징이 있음.
    • Inline Align 되어 있던 요소를 해상도에 따라 세로로 정
  • Layout Shifter: 다양한 기기에 따라 각기 다른 레이아웃을 보여줌. 복잡하고 많은 작업이 필요하지만, 혁신적인 디자인을 담을 수 있음.
    • 가로/세로 정렬의 혼합으로 PC웹과 Mobile웹에서의 GNB(Global Navigation Bar)의 변화가 가장 큼. User의 이질감 해소를 위해 Look & Feel Maintenance 필요
    • 큰 화면 고정 픽셀이고, 작은 화면 가변 픽셀
    • PC에서 #box_a 요소는 GNB 역할로 Left Position이지만, Mobile에서는 top으로 변경
  • Tiny Tweaks: 하나의 칼럼을 사용하는 패턴으로, 변화의 폭이 크지 않다는 특징이 있으며, 주로 글 내용을 중시하는 웹에서 많이 쓰임.
    • PC와 Mobile 모두 같은 형태로 디자인하며, 간단한 사이트 또는 리스트 형태로 꾸며진 사이트에 적합
    • 같은 형태로 작아지기만 하는 레이아웃으로 내부에 있는 리스트를 변경하여 지루함 해소 필요
    • ul, li로 리스트를 구성했으면 ul요소는 width를 80%로 설정하고 center로 정렬한 후, li요소를 가로로 배치하기 위해 float을 left로 설정
      • 이 경우 한 줄에 몇 개의 li요소가 배치되는가는 li요소의 width value에 의함. 즉 li요소의 width value 합이 ul 요소의 width value보다 커지면 자동으로 줄 바꿈.
    • Case Study
      • Desktop: 18% = (100% - 10%) / 5
      • 1024px이하: 23% = (100% - 8%) / 4
      • 800px이하: 31.333...% = (100% - 6% ) / 3
      • 480px이하: 48% = (100% - 4%) / 2
  • Off Canvas: 큰 화면에서는 모든 칼럼들을 보여주고 작은 화면에서는 하나의 메인 칼럼을 보여주며, 다른 부가적인 칼럼들을 화면 밖에 숨겨놓는 패턴으로, 숨겨져 있는 다른 컬럼은 필요할 때만 접근하도록 함.
    • 일부 영역을 숨겨서 User의 Gesture 혹은 Action에 따라 숨겨진 영역을 보여주는 방식
    • JavaScript와 jQuery 등 필요
    • max-width 800px 영역에서 각 부분의 width value 합은 절대로 100%가 될 수 없으므로 요소 중 하나는 33.334%로 설정하여 해