DDODDO LAB

aria-label vs sr-only 차이

웹 접근성에서 언제 사용해야 할까?웹 접근성을 고려한 퍼블리싱을 하다 보면 자주 등장하는 두 가지 방법이 있다.aria-labelsr-only둘 다 스크린리더 사용자에게 정보를 전달하기 위한 방법이지만사용 목적과 상황은 조금 다르다.실무에서 헷갈리기 쉬운 aria-label vs sr-only 차이를 정리해보자. aria-label이란?aria-label은 ARIA 속성 중 하나로요소의 이름(라벨)을 스크린리더에게 제공하는 역할을 한다.예를 들어 아이콘 버튼이 있다고 가정해보자. 화면에는 아이콘만 보이지만스크린리더는 다음처럼 읽는다."검색 버튼" 즉 aria-label은✔ 화면에 텍스트가 없어도✔ 스크린리더에 설명을 제공한다.sr-only란?sr-only는 CSS 패턴으로화면에서는 보이지 않지만 ..

sr-only 클래스 사용법

웹 접근성을 위한 숨김 텍스트 처리 방법웹 퍼블리싱을 하다 보면 화면에는 보이지 않지만 스크린리더에는 읽히도록 해야 하는 텍스트가 필요할 때가 있다.대표적인 예가 바로 다음과 같은 경우다.아이콘 버튼 설명추가 설명 텍스트접근성 보조 문구스킵 네비게이션이럴 때 사용하는 것이 바로 sr-only 클래스다. sr-only란 무엇인가?sr-only는 screen reader only의 약자다.즉, 화면에서는 보이지 않지만스크린리더에서는 읽히는 텍스트 를 만들기 위한 CSS 패턴이다.예를 들어 이런 버튼이 있다고 하자. 이 경우 스크린리더는 버튼의 의미를 알 수 없다.그래서 보조 텍스트를 추가해야 한다. 검색 이렇게 하면화면에는 아이콘만 보이고스크린리더는 검색 버튼으로 읽는다.sr-only CSS 코드..

clamp vs Media Query

반응형 설계에서 무엇을 써야 할까?반응형 작업을 하다 보면 한 번쯤 고민하게 된다.“이거 clamp로 처리할까?아니면 미디어쿼리로 끊어야 할까?” 특히 1920 시안 기반으로 작업하면서모바일 360, 태블릿 768, PC 1024 이상 대응해야 하는 프로젝트에서는이 선택이 코드 구조를 완전히 바꿔버린다.오늘은 실무 기준으로 딱 정리해보자. 1, clamp()는 무엇인가?/* CSS */font-size: clamp(16px, 1vw, 24px); 구조는 단순하다.코딩:clamp(최소값, 선호값, 최대값) 뷰포트에 따라 값이 부드럽게 변화한다.✔ 브레이크포인트 없이✔ 단계 없이✔ 자연스럽게 스케일링2. Media Query는 무엇인가?/* CSS */font-size: 16px;@media (min-w..

clamp() 실무 사용법반응형 작업을 하다 보면 “디자이너가 1920 시안을 줬는데 모바일도 대응해야 한다” 같은 상황이 흔하다.이때 clamp()는 최소값(min) ~ 최대값(max) 범위 안에서 뷰포트에 따라 값이 유동적으로 변하게 만들어 주는 꽤 강력한 도구다.하지만 실무에서는 clamp()를 “그냥 다 clamp로 바꾸면 반응형 끝”처럼 쓰면 문제가 생긴다.특히 공공/접근성/다중 사이트 운영 같은 환경에서는 더 조심해야 한다.아래 주의 포인트만 잡아도, clamp를 “편한 도구”에서 “안정적인 설계 도구”로 쓸 수 있다. 1. clamp()는 ‘반응형’이 아니라 ‘유동 스케일링’이다clamp()는 브레이크포인트를 대체하는 만능이 아니다.브레이크포인트는 레이아웃 구조가 바뀌는 순간(그리드 → ..

깨지지 않는 관리자 화면 만드는 방법 반응형 작업에서가장 난이도가 높은 요소는 테이블이다.모바일에서 가로 스크롤 발생컬럼이 줄어들며 의미 손실버튼이 밀림정렬이 깨짐테이블은 단순히 줄이는 게 아니라전략적으로 설계해야 한다. 1. 테이블은 줄이는 게 아니라 “방식”을 바꿔야 한다많은 사람들이 이렇게 생각한다.“모바일에서 width:100%면 되겠지?”아니다. 테이블은 화면 크기에 따라표현 방식을 바꾸는 것이 핵심이다.2. 반응형 테이블 3가지 2-1. 가로 스크롤 유지 (가장 안전)/* CSS */.table-wrap { overflow-x: auto;}/* HTML */ ... 장점구조 유지접근성 안전관리자 화면에 적합단점모바일 UX는 다소 불편공공기관 관리자 화면은이 방식이 가장 현실적이..

반응형 이미지 처리 정리(object-fit · aspect-ratio · 고정 vs 유동 판단법) 반응형 작업에서레이아웃보다 더 많이 깨지는 것이 있다.바로 이미지다.PC에서는 예쁜데 모바일에서 잘림비율이 깨짐높이가 이상하게 늘어남콘텐츠 영역이 밀림반응형 이미지 설계는단순히 width:100%가 아니다. 1. 가장 기본 원칙/* CSS */img { max-width: 100%; height: auto;} 이건 기본 세팅이다. 하지만 이것만으로는 모든 상황을 해결할 수 없다. 2. 고정 이미지 vs 유동 이미지 판단법1) 고정 비율 유지가 필요한 경우썸네일 카드배너슬라이드 이미지유튜브 썸네일뉴스 목록 이미지→ 비율 유지가 중요 2) 유동 크기 허용이 가능한 경우본문 삽입 이미지상세 설명 이미지..