웹페이지는 다양한 기기의 화면에서도 콘텐츠를 불편함 없이 볼 수 있도록 '동적 레이아웃'으로 만들어야 합니다.
기술설명
이 기술의 목적은 가로가 긴 공간에 적용된 레이아웃 기술이 가로 스크롤 막대 없이도 콘텐츠를 표시할 수 있도록 하는 것입니다.
'동적 레이아웃(liquid layout)'은 텍스트의 크기를 기준으로 레이아웃 영역을 정의 합니다.
그리고 필요에 따라 공간을 조정하여 화면에 표시합니다.
따라서 레이아웃이 동일하지는 않지만 요소와 읽는 순서는 동일하게 유지됩니다. 이는 '다양한 기기'와 '서체와 크기에 대한 선호도가 다른 사용자'에게도 잘 보여 질 수 있도록 효과적으로 디자인 하는 방법입니다.
'동적 레이아웃(liquid layout)'의 기본 원칙은 다음가 같습니다.
(1) 텍스트의 크기에 비례하여 영역의 크기가 지정되는 단위를 사용하여 레이아웃 영역의 크기를 지정해야 합니다.
즉 텍스트가 커지거나 작아지면 거기에 맞게 레이아웃 영역도 커지거나 작아져야 합니다.
(2) 레이아웃 영역에 인접한 플로팅 박스를 행으로 배치합니다. 이는 문단의 단어가 자동으로 줄 바꿈 되는 방식과 동일합니다.
필요에 따라 줄 바꿈 됩니다.
복잡한 '동적 레이아웃(liquid layout)'은 레이아웃 영역을 중첩하여 사용할 수 있습니다. 따라서 더 큰 '동적 레이아웃' 안에 작은 레이아웃 영역들이 들어갑니다.
다양한 크기의 텍스트가 있는 '동적 레이아웃'을 만들기 위해서는 섬세한 작업 필요하지만, 잘 만들어진 '동적 레이아웃'은 가장 효과적인 페이지 디자인이 될 수 있습니다.
예시
HTML과 CSS를 이용하여 '동적 레이아웃(liquid layout)'을 만듭니다.
3개의 열은 텍스트의 크기에 따라 조정됩니다. 열의 너비가 전체 너비보다 크면 열이 자동으로 내려갑니다.
가장 긴 단어가 열의 너비보다 커도 잘려 보이거나 가로 스크롤이 생기지 않도록 텍스트의 크기를 늘릴 수 있습니다.
열에 대한 너비를 백분율로 지정하고 'float'속성을 이용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS</title>
<style type="text/css">
.column {
border-left:1px solid green ;
padding-left:1% ; margin-bottom:10px ;
width:32% ; float:left
}
#footer {
background-color:green ;
clear:both ;
color:#ffffff
}
</style>
</head>
<body>
<h1>WCAG Example</h1>
<h2>Text in Three Columns</h2>
<div title="column one" class="column">
<h3>Block 1</h3>
<p>
The objective of this technique is to be able to present content without introducing horizontal scroll bars by using layout techniques that adapt to the available horizontal space.
</p>
</div>
<div title="column two" class="column">
<h3>Block 2</h3>
<p> This is a very simple example of a page layout that adapts as the text size changes. </p>
</div>
<div title="column three" class="column">
<h3>Block 3</h3>
<p> For techniques that support more complex page layouts, see the Resources listed below.</p>
</div>
<p id="footer">Footer text</p>
</body>
</html>
자료
CSS 마스터리: 고정 폭, 유동적, 탄력적 레이아웃과 가짜 열
관련기술
점검절차
1. 브라우저에 콘텐츠를 표시합니다.
2. 텍스트 크기를 200%로 확대합니다.
3. 수평 스크롤 없이도 모든 콘텐츠를 볼수 있고, 기능을 사용할 수 있는지 확인합니다.
나의 정리
우리는 웹페이지의 콘텐츠를 다양한 기기로 봅니다. PC에 있는 모니터, 스마트 폰 화면, 타블렛 화면으로도 봅니다.
그 기기 마다 콘텐츠를 보여주는 영역이 각각 다릅니다. 넓기도 하고 좁기도 합니다. (= 다양한 디바이스 환경)
때로는 같은 화면에서도 사용자가 텍스트 크기를 크게 하여 보기도 합니다.
이렇게 다양한 환경과 설정에서 보여 지는 콘텐츠가 PC 화면에만 적합하게 보이도록 만들면 어떻게 될까요?
가로 영역이 긴 PC 화면이 아닌 가로가 짧고 세로가 긴 스마트폰 화면에서 보면 콘텐츠가 잘려 보일 것입니다.
잘린 부분을 보기 위해서는 가로 스크롤을 이용해서 불편하게 봐야 할 것입니다.
다양한 (디바이스) 환경에서도 콘텐츠를 불편함 없이 볼 수 있게 디자인 하는 것을 '동적 레이아웃(liquid layout)'이라고 합니다.
레이아웃의 영역의 크기를 고정 시키는 것이 아니라 퍼센트(%)나 글자 크기를 조절하는 em단위 처럼 상대적인 값으로 레이아웃의 영역을 지정하는 것입니다.
그리하여 콘텐츠가 화면에 벗어나면 가로 스크롤이 생기는 것이 아니라 밑으로 내려가게 만드는 것입니다.
이런 원리는 윈도우에 있는 메모장에서도 볼 수 있습니다.
메모장에 글이 길게 있는 상태에서 메뉴의 [서식 > 자동 줄 바꿈]을 설정하면 메모장 영역을 벗어난 글자들이 다음 줄로 자동 줄 바꿈 합니다. 여기서 메모장의 창 크기를 줄이면 창 크기에 맞게 자동 줄 바꿈이 됩니다.
이와 같이 레이아웃이 동적으로 바뀌는 것입니다.
웹페이지는 다양한 기기의 화면에서도 콘텐츠를 불편함 없이 볼 수 있도록 '동적 레이아웃'으로 만들어야 합니다.
G146: Using liquid layout
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G146.html
G146: Using liquid layout | Techniques for WCAG 2.0
The following fairly simple example uses HTML and CSS to create a liquid layout. The three columns adjust their size as text size is adjusted. When the total horizontal width exceeds the available width of the columns, the last column wraps to be positione
www.w3.org
독학으로 힘들어 하시는 분들을 위해 과외를 준비 했습니다.
2024년 11월 한 달간 맞춤형 과외를 할 예정입니다.
입문자 분들의 참여 부탁드립니다.
교육과정은 인터뷰 후에 맞춤으로 진행할 예정입니다.
참여하기: https://blog.naver.com/redoxup/223601934677
[조립]에서 2024년 11월 한 달 무료 과외(HTML/CSS/jQuery)를 합니다. - 과외 신청하세요!!
HTML+CSS+ jQuery(제이쿼리) 입문자 인가요? 웹퍼블리셔, 프런트엔드 개발자, 웹디자이너를 시작해...
blog.naver.com
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G149] 포커스 받을 때 강조 표시 해주는 브라우저 인터페이스를 이용하자. (8) | 2024.10.29 |
|---|---|
| [웹접근성 지침-일반기술 G148] 배경과 글자색을 지정하지 않고, 해당 기본 값을 변경하는 기술도 사용하지 않는다. (5) | 2024.10.28 |
| [웹접근성 지침-일반기술 G145] 배경색이나 배경이미지 위에 텍스트가 있는 경우, 최소 명암비가 3:1이여야 합니다. (11) | 2024.10.24 |
| [웹접근성 지침-일반기술 G144] 다른 방법으로 동일한 목표를 달성하는 또 다른 캡차(CAPTCHA)가 웹페이지에 있는지 확인하자 (14) | 2024.10.23 |
| [웹접근성 지침-일반기술 G143] 캡차(CAPTCHA)의 목적을 설명하는 대체 텍스트를 제공해야 합니다. (4) | 2024.10.22 |
