반응형 웹 디자인(responsive Web design) 모바일디바이스와 타블렛 같은 다양한 디바이스들이 등장하게 되었고, 그에 환경에 따른 별도의 대응이 필요하게 되었다.

RWD vs AWD(적응형):view port에 따라 증가하다가 특정 크기에서 고정형(데스크탑 +모바일)
반응형 웹의 100(width를 특정한 너비를 설정하지 않는다.)

컨텐츠는 물과 같다.용기는 다르더라도 내용물은 물은 그대로다.

미디어 쿼리 배치중요하다. 추천하는 방법은 모바일 환경에 대한 선형 디자인을 처음으로 고려하고 brekpoint를 추가하면서 너비나 상황 변하였을때의 값을 설정해주는 것이 좋은 방법이 된다.(모바일에서 데스크탑으로)
mobile first:컨텐츠 전략 선택 선형적인 기본작업을 모바일에서 만들고 그것을 데스크탑 컨텐츠로 순서로 최적화를 한다.

max-width:너비를 자신의 이상으로 안하겠다.너비가 줄수도 있지만 증가하진않는다.
height:auto:높이를 너비가 변호하는 것에 따에 자동으로 맞춘다.

<source min-width:40em srcset:big-jpg 1x:big -jpg 2x>최소의 너비에서 다음으로 srcset의 값을 보여주겠다. 배율이 1일때와 2배율일때 각각 상황에 맞게 사용하겠다.은 재사용과 수정에 용이하다.

10vh(view height)화면 view port의 1/10을 높이로 정하겠다. 앞에서 이야기했듯이 모바일 first 선형화

display:flex 의 order속성은 기본 값이 :0 기본 값보다 작으면 -1이면 기본 보다 먼저 값은 값이 있으면 순서대로 정의 한다.

flex-flow:row wrap은 축은 바꾸지 않고 wrap 을 사용함으로서 줄을 바꿈.

breakpoint는 쉽게 생각하면 추가될때 바뀌는 구간이라고 생각하면 된다.
@media screen and (min-width:801px)::801이 되면서 내용을 덮어씌우겠다.

키보드의 접근성을 고려한 tabindex의 사용.

tabindex는 기본적으로 키보드의 tab키를 눌렀을 때 이동순서를 임의로 조정 할 수 있는 html의 속성 입니다. tabindex의 포커스의 순서를 부여하는 방식을 tabintdex 값에 양의정수를 넣어주면 됩니다. 예를 들어 어떤 html요소에 taindex=”1”을 주었다면 해당 웹 페이지 상에서 tab키를 눌렀을때 tabindex=”1”이 부여하는 요소가 가장 먼저 포커스 됩니다. 그러나 taindex는 신중하게 사용해야 할 필 요가 있습니다. 일반적으로 키보드의 tab키를 눌렀을때 포커스는 html의 마크업 순서를 따르며 링크요소 또는 폼 요소등 tab키로 포커스를 가질 수 있는 요소에 마크업 순서에 따라 자연스럽게 이동합니다. 기본적으로 마크업이 논리적으로 이루어져 있다면 굳이 tabindex을 사용할 이유가 없습니다. 오히려 잘못된 tabindex를 사용함으로써 스크린 리더 사용자가 웹 페이지의 구조를 이해하는데 어려움으로 작용하게 될 수 있습니다.

tabindex는 위에서 설명한것 같이 마크업 순서가 논리적으로 잘 구성되어있다면 대체로 사용할 필요가 없습니다. 임의의 페이지에 처음 접속하는 필수 회원 로그인을 행하는 경우 폼 요소에 tabindex를 부여하여 먼저 회원 로그인을 유도하는등의 이유로 사용할 수는 있습니다. 그러나 이러한 경우에도 페이지 로딩 시autofocus기능을 사용하여 회원 로그인을 유도하는 것이 바람직하다고 생각합니다. 그럼 tabindex는 언제 사용할까요?

웹페이지를 구성하다 보면 페이지 탐색에 논리적 순서를 부여하는 사용자가 자연스럽게 페이지를 탐색할 수 있도록합니다.

tabindex속성은 양의정수값 이외에 0과 -1의 값을 가질 수도 있습니다. 먼저 tabindex=”0”은 tab키를 눌렀을때 포커스를 받을 수없는 요소 이를테면 등의 요소에 포커스를 받게 할 수 있습니다. 반면 -1은 기본적으로 tab키를 눌렀을때 포커스받을 수있는 폼 요소나 링크 요소를 강제로 포커스 받지 못하도록 하는 값입니다.

웹 접근성이란 웹 사이트에서 제공하는 정보를 차별없이 동등하게 이용 할 수 있도록하는 보장하는 것을 말한다. 신제적(고령층 ,장애인,비장애인 ) 환경적 요건(다양한 플랫폼,웹 브라우져,장치)을 모두 포함한다.

WAI ; Web Accessibility InitiativeWAI는 시각·청각 기능 등에 장애를 지닌 사람도 일반인과 동등하게 웹에 접근하여 이용할 수 있도록 관련 지침을 개발하고 웹 접근성 향상을 위한 노력을 기울이는 W3C의 산하 단체를 말한다

ARIA:Accessible Rich Internet Applications’의 약자로 리치 인터넷을 위한 W3C 접근성 명세입니다.

RIA:정적인 HTMl과 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 UX(User eXperience)를 제공하는 웹 애플리케이션을 의미한다.

WAI-ARIA는 RIA에서 스크린 리더기 및 보조기기 등에서 접근성 및 운용성을 향상시키기 위한 목적으로 탄생했으며 웹 애플리케이션에 역할,속성,상태 정보를 추가하여 이를 개선 할 수 있도록 제공하고 있다.

1)대표적인 역할( role):tablist,button,tab,tooltip,list,

application,abnner,navigation,form,search..

2)Property & State:(상태와 속성):aria-labelledby=”” : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.

aria-haspopup=”” : 팝업요소가 하위에 존재하고 있다는걸 인식 시켜주는 aria-속성. 상태 값은 false(default) / true / menu / listbox / tree / gird / dialog

aria-live : 페이지의 어떤 위치에 있든 업데이트된 정보를 사용자에게 알려주는 aria-속성. 상태 값은 assertive / off(default) / polite

홈페이지를 만들때 이미지를 사용할 경우 img태그를 사용해 alt로 이미를 부여 합니다.

IR(image replacement)은 웹표준 및 접근성을 위한 기법입니다. 이미지를 배경으로 처리하고 이미지의 의미를 텍스트화 하여 CSS로 숨겨, 이미지 대체 텍스트를 제공하기 위한 기법 입니다. IR기법은 앞에서 얘기한 대로 접근성이 매우 유용하기 때문에 검색시에 검색엔진으로 부터 높은 가중치를 받을 수 있습니다.

IR을 사용하는 방법으로는 크게

1. padding을 사용하는 방법(가로 250px,세로 195px인 이미지)

   CSS ZenGarden

   .brand1{ background:pink url()no-repeat;height: 0;width: 250px;padding-left: 195px;overflow: hidden;}

2. text-indent 를 사용하는 방법

   CSS ZenGarden

   .brand2{background: pink url(/images/title.png)no-repeat;height: 195px;width: 290px;text-indent: 290px;

   ​ /\ text-indent: -9999px; */*white-space: nowrap;overflow: hidden;}

   *text-indent의 값을 -9999px을 주어 텍스트를 아예 화면 밖으로 밀어 버리는 경우도 있지만, 이 경우에는 성능상 좋지 않으므로 white-space:nowrap와 overflow:hidden을 사용한다.

3. postion을 활용하는 방법

   CSS ZenGarden

   .brand3{background: lime ;height: 195px;width: 290px;text-align: center;line-height: 195px; font-size: 16px;font-weight: 400;position: relative;} .brand3::after{ content: “”;position: absolute;top: 0;left: 0;background: url(/images/title.png)no-repeat;width: 100%;height: 100%;}

이외에도 숨기고자하는 텍스트를 span태그로 감싸 준 후 화면에서 안보이게 처리해주는 방법도 있고, 방법은 다양하다.

그리고 Daum은 이런 여러기법중에서 Phark Method와WA IR 기법을 주로 사용하여 대체텍스트를 제공해주고 있다.

Phark Method (권장): 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법.

장점:스크린 리더기가 읽어주고,추가적인 태그사용을 하지 않는다.

WA IR 기법(권장):이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 안보이게 처리하는 방법.

장점:스크린 리더기 가 읽어줌,CSS on / Image off 시 텍스트 보임.