웹 접근성(Accessibility, a11y)에서 ARIA(Accessible Rich Internet Applications)는 스크린리더 등 보조 기술이 페이지 구조와 의미를 올바르게 이해하도록 돕는 역할을 합니다.그중 aria-describedby는 사용자에게 추가 설명(Description)을 제공할 때 가장 핵심적인 ARIA 속성 중 하나입니다. aria-describedby란?정의: 특정 요소가 참조하는 설명 요소(id)를 연결하여, 스크린리더와 같은 보조 기술이 해당 설명을 읽도록 하는 ARIA 속성용도: 단순히 레이블(Label)을 넘어, 보조 설명을 제공할 때 사용.속성 타입: ID 참조 스크린 리더나 다른 보조 기술이 해당 요소에 접근할 때, aria-describedby로 연결된 ..
css의 background 속성 사용 { background-image: url("bg.gif"); } 태그에 alt 속성을 빈 값으로 사용 태그에 aria-hidden 사용 태그에 role="presentation" 사용 이외의 것들 .visually-hidden { /* 일반적인 흐름에서 항목을 제거 */ position: absolute; /* 잘못 발음되거나 뭉개지는 텍스트를 위한 해결책 */ white-space: nowrap; /* 가능한 가장 작은 크기로 설정 (일부 화면 낭독기는 높이와 너비가 0인 요소를 무시함) */ width: 1px; height: 1px; /* 크기 조정 후 넘치는 콘텐츠 숨기기 */ overflow: hidden; /* 요소의 크기를 변경할 수 있는 모든 속성 ..
스크롤이 생기는 이유들!! 1. 브라우저의 주소 표시줄 높이: 특히 모바일 브라우저에서 100vh는 종종 주소 표시줄을 포함한 전체 높이를 의미합니다. 그래서 실제로는 화면보다 조금 더 길게 나타나게 됩니다. 2. Box Model: 기본적으로 width와 height는 컨텐츠의 크기만을 포함하기 때문에, padding, border, margin 등이 추가되면 요소의 전체 크기가 100vh보다 커질 수 있습니다. 3. 다른 요소들: 해당 요소 외에도 페이지에 다른 요소들이 존재할 경우 그 요소들의 높이 때문에 스크롤이 발생할 수 있습니다. 해결 방법들 1. 모바일 브라우저의 주소 표시줄 때문에 문제가 발생한다면, window.innerHeight를 사용하여 실제 높이를 얻고 이를 요소에 적용할 수 있습..
웹 개발을 하다 보면 사용자에게 추가 정보를 제공해야 하는 상황이 자주 발생합니다. 특히 폼 요소에서 입력 규칙을 안내하거나, 오류 메시지를 표시하거나, 도움말을 제공할 때 말이죠. 이런 상황에서 주로 사용하는 두 가지 속성이 바로 title과 aria-describedby입니다. 단순히 "둘 다 설명을 제공하는 거 아닌가?"라고 생각하기 쉽지만, 실제로는 접근성, 사용 목적, 동작 방식에서 명확한 차이가 있습니다.이 글에서는 두 속성의 차이점을 명확히 이해하고, 언제 어떤 속성을 사용해야 하는지, 그리고 실제 코드 예제를 통해 어떻게 구현하는지 알아보겠습니다.기본 개념 이해title 속성이란?title 속성은 HTML의 전역 속성으로, 요소에 대한 간단한 보조 정보를 제공합니다.마우스를 요소 위에 올려..
이미지 스프라이트? 여러 개의 이미지를 하나의 이미지로 관리하는 이미지를 말한다. 웹 페이지를 로드하면 수 많은 이미지들을 다운받기 위해 웹 브라우저는 서버에 이미지 요청을 하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 페이지의 로딩 시간은 오래 걸리게 됩니다. 이미지 스프라이트를 사용하게 되면 이미지를 다운받기 위해 서버 요청을 단 몇 번으로 줄일 수 있습니다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼에선 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 또한, 관리에도 용이합니다. 예 위와 같은 아이콘들을 통째로 가지고 있는 이미지가 있다고 치자. 이 이미지의 원하는 부분을 잘라 사용하면 불러오는 이미지의 수는 줄어들 것이다. 네이버에서는 많은 카드들이 좌측으로 가는 버튼, 우측으로..
a태그 내부에 블록 요소를 넣어도 되는가? 정답은 O이다. HTML 유효성 검사 페이지를 통해 아래 코드를 검사해보자. 궁금하다! 결과는 에러가 없다고 뜬다! 원래라면 인라인 요소인 a태그 내부에 블록 요소인 div를 넣는 것이 불가능하다. HTML 4.01표준만 보더라도 인라인 요소인 a태그는 인라인 요소만 감쌀 수 있다고 규정되어 있다. 하지만 HTML5 표준에서는 가능하다고 명시되어 있다. 왜? HTML5에서는 태그 분류를 단순히 인라인, 블록으로 나눈 것이 아니라 태그와 성격와 특성에 따라 나누었다. 이는 HTML 콘텐츠 모델에서 확인할 수 있다. 이 HTML 콘텐츠 모델에 의해 a태그가 flow content(플로우 콘텐츠)를 품을 수 있다. 따라서 a태그는 인라인 속성만이 아닌 블록 요소도 담..
상대 단위 ✅ 특징 - 다양한 플랫폼들에 유동적으로 적용할 수 있다. 단위 의미 em 폰트의 기본 크기 값에 비례한 단위 ex 폰트의 기본 X 높이에 비례한 단위 ch "0"의 기본 폭에 비례한 단위 rem 최상위 요소의 폰트 크기에 비례한 단위 vw 뷰포트 너비에 비례한 단위 vh 뷰포트 높이에 비례한 단위 vmin 뷰포트의 최소 너비, 높이에 비례한 단위 % 브라우저 기본 글꼴을 100%하고 상대적 크기를 나타냄 절대 단위 ✅ 특징 - 규격이 정해져 있다 - 각 단위들 끼리 값 변환이 가능하다. 단위 의미 cm 센티미터 단위 mm 밀리미터 단위 in 인치(inch) 단위로, 2.54cm과 같음 px 픽셀(pixels) 단위로, 1/96inch와 같음 pt 포인트(point) 단위로, 1/72inch와..
target의 주의점 MDN 문서를 확인해보면 window.opener API의 악의적인 사용을 방지하는걸 고려하라고 권장하고 있습니다. 이를 막기위해 rel="noopener" 와 rel="noreferrer" 를 사용하면 됩니다. noopener target="_blank" 사용 시 새 창으로 브라우저를 열게 되면 새로운 창에서 연결 페이지에 부분적으로 액세스할 수 있는 보안 취약점이 생기게 됩니다. 즉, window.opener 객체를 통해 연결된 페이지에서 이전 페이지를 제어할 수 있는 권한이 주어진다는 것입니다. 하지만 rel=”noopener”를 주게되면 새로 열린 페이지에서 window.opener 객체가 존재하지 않게 됩니다. noreferrer noopener와 유사한 기능으로 새로 열리..
form 사용자의 의견이나 정보를 알기 위해 입력할 큰 틀을 만듭니다. form 동작 방식 입력도니 데이터를 한 번에 서버로 전송합니다. 전송한 데이터는 웹 서버가 처리하고 결과에 따른 또 다른 웹 페이지를 보여줍니다. form 내용을 작성한다 form 안에 있는 모든 데이터를 웹 서버로 보낸다 웹 서버는 받은 form 데이터를 처리하기 위해 웹 프로그램으로 넘긴다 웹 프로그램은 폼 데이터를 처리한다 처리결과에 따른 새로운 html 페이지를 웹 서버에 보낸다 웹 서버는 받은 html 페이지를 브라우저에 보낸다 브라우저는 받는 html 페이지를 보여준다 form 태그 사용시 주의점 form 요소를 사용할 때 주의할 사항으로는 태그 사이에는 다른 태그가 삽입이 안되며, 의 이름 속성은 한 페이지에서 중복하여..
