퍼블리싱4 [웹접근성] 아이콘 스크린리더기로 읽어주기 헤더에 "검색" 버튼을 삽입했습니다. 비장애인들은 버튼만 보고 검색버튼인지 알 수 있지만 시각장애인들은 스크린리더기를 통해 아이콘을 인식할 수 있습니다. 때문에, 코드에 스크린리더기를 통해 해당 아이콘의 기능을 읽어 줄 수 있도록 span태그등에 글자를 넣어 명시해줘야 합니다. HTML 검색창 열기 span 안에 "검색창 열기"라는 글자는 읽어주는 역할만 하고, 디자인상의 이유로 화면엔 노출이 되면 안되기 때문에 아래와 같이 숨김을 해줍니다. [참고] .icon-area [class*="btn"] 에서 class=*는 .icon-area 클래스 하위 btn이 들어간 모든 클래스명을 의미합니다. CSS .icon-area [class*="btn"] { > span { text-indent: -9999px;.. 2022. 8. 15. [웹접근성] 버튼이미지만 사용하는 경우 Button 닫기 버튼에서 아이콘만 사용하고 닫기라는 텍스트는 안들어가는 경우 화면에는 노출되지는 않지만 스크린리더기나 보이스리더에서 읽힐 수 있도록 '닫기'라는 텍스트를 표기해줘야 합니다. HTML 닫기 CSS .hidden, .blind { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px; } 2022. 8. 8. 모바일 가이드 보고 position 비율값 찾기 만약 모바일 가이드를 가지고 다람쥐 이미지를 position으로 띄웠다고 가정, 다람쥐 이미지는 328px * 184px 이라고 가정을 하고, 오리는 top: 10px , left: 10px 이라고 가정을 해봅니다. 이럴땐, 퍼센트 계산기를 사용해야 합니다. 이런경우 여러 해상도에 맞춰 오리위치가 바뀌므로 오리 위치를 px로 고정하는 것이 아니라 퍼센트 계산을 통해 값을 넣어야 합니다. 계산법 ) left값 : (10px / 328px) * 100% = 3.04% Top값 : (10px / 184px) * 100% = 5.43% CSS position: absolute; top: 5.43%; left: 3.04%; 2022. 8. 8. 반응형 이미지 및 비디오 비율 맞추기 반응형 퍼블리싱 작업을 하다 보면 비디오 삽입을 하는경우가 많은데, 자주 요청받는 비율이 16:9 입니다. 16:9를 어떻게 적용하면 좋을까요? Padding-top 혹은 padding-bottom 사용 (동일) padding-top: 56.25%를 사용하는 방법이 있습니다. 사용예시 HTML CSS .video-inner { position: relative; padding-bottom: 56.25%; width: 500px; height: 0; background-color: pink; overflow: hidden; } .video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 계산방법 이 56.25%는 9 / .. 2022. 8. 8. 이전 1 다음
