jonbeo 님의 블로그

웹 접근성이란? A11y 기초 개념부터 실무 적용 팁까지 한눈에 정리!

웹 접근성(Web Accessibility)이란,장애가 있거나 없거나 누구나 웹 콘텐츠에 동등하게 접근하고 이용할 수 있도록 보장하는 것을 말합니다.국내 법적으로도 의무화되어 있는 부분이기 때문에,웹 퍼블리셔 및 프론트엔드 개발자라면 꼭 숙지하고 있어야 합니다.🔍 1. 웹 접근성이 중요한 이유이유설명📢 법적 의무공공기관, 대기업 사이트는 접근성 인증 필수🧑‍🦯 사용자 확대장애인, 노년층, 비영어권 사용자까지 고려🔍 SEO 향상접근성을 지키면 검색 엔진 최적화에도 도움🌍 모두를 위한 디자인반응형, 키보드 조작, 스크린리더 사용자 포함 🔑 2. A11y? 줄임말의 의미Accessibility 단어에서 a와 y 사이에 11개의 글자가 있어 A11y로 줄여 사용합니다.개발자 사이에서 흔히 쓰는 약어..

HTML5 시맨틱 태그 정리 💡 section, article, aside, nav, header, footer 차이점과 예제

HTML5부터 도입된 시맨틱(Semantic) 태그는 단순히 화면을 구성하는 것뿐 아니라,의미 있는 구조를 가진 웹 문서를 만들기 위해 도입되었습니다.이러한 태그를 활용하면 검색 엔진 최적화(SEO), 웹 접근성, 유지보수성까지 좋아집니다.이번 포스팅에서는 HTML5의 주요 시맨틱 태그와 그 사용 예시를 자세히 살펴보겠습니다! ✅🧠 1. 시맨틱 태그란?Semantic = 의미 있는구조를 명확히 하여 사람이 보기에도, 기계(브라우저, 크롤러, 스크린리더)도 이해하기 좋게 만드는 태그입니다.🏗️ 2. 주요 시맨틱 태그 설명 태그 역할 사용 위치 문서 또는 섹션의 헤더페이지 최상단, 각 섹션 내네비게이션 메뉴전체 레이아웃, 사이드바문서의 주요 콘텐츠페이지 1개당 1개만독립적인 구역컨텐츠 그룹핑독립적으로..

웹 접근성 향상과 사용자 편의성을 위해 반드시 이해하고 사용해야 할 태그 중 하나가 바로 태그입니다.이 태그는 주로 폼 요소(input, textarea 등)에 설명을 붙이기 위한 용도로 사용되며,특히 스크린리더 사용자에게 중요한 역할을 합니다.✅ 1. 태그의 기본 구조아이디 위 코드처럼 의 for 속성은 연결할 요소의 id 속성과 일치해야 합니다.✅ 2. 태그의 또 다른 사용법 (감싸기 방식) 아이디 이 방식은 for와 id 속성을 사용하지 않아도 되지만,하나의 만 감싸야 하며 구조적으로 명확하게 코딩하는 것이 중요합니다.✅ 3. 왜 태그가 중요한가요?접근성 향상: 시각장애인들이 화면 낭독기를 통해 폼을 이해할 수 있습니다.클릭 영역 확장: 을 클릭하면 해당 input 포커스가 되므로 U..

안녕하세요 😊HTML5에서 제공하는 시맨틱 태그 중에는 잘 쓰이지 않지만, 특정 상황에서 아주 유용한 태그가 있습니다.바로 태그입니다. 많은 분들이 를 단순히 “주소(도로명주소)”를 표시할 때만 쓰는 줄 아시는데요,사실은 웹 문서 작성자·저작자에 대한 연락처, 출처, 저작권 정보를 표현하는 데 쓰입니다.📍 1. 태그란?문서나 아티클 작성자의 연락처 정보를 나타냅니다.전화번호, 이메일, 회사 주소, 웹사이트 링크, 저작권 정보 등을 포함할 수 있습니다.HTML Living Standard에 따르면, 단순히 실제 우편 주소만을 의미하지 않습니다.예시: Written by 홍길동 Visit us at: https://www.example.com 서울특별시 강남구 테헤란로 123 👉 브라우저 ..

안녕하세요 😊는 **중요 텍스트를 강조(하이라이트)**할 때 사용하는 시맨틱 태그입니다.특히 검색 결과 강조, 읽기 가이드에 유용합니다.1) 기본 사용 다음 문장에서 중요한 키워드를 확인하세요. 브라우저 기본값은 노란 형광펜 스타일로 표시됩니다.2) 스타일 커스터마이징 mark { background: #fffd8a; /* 연한 노랑 */ padding: 0 .2em; border-radius: .25em;}3) 검색 하이라이트 예시 검색어: react결과: React Suspense improves loading UX.4) 접근성 & SEO는 단순 스타일이 아닌 **의미(semantics)**를 제공하므로 스크린리더와 검색엔진에 유리합니다.단순 색상 강조만 필요하면 도 가능하지만, 맥락상 중요 ..

안녕하세요 😊HTML5에서는 날짜와 시간을 시맨틱하게 표현할 수 있도록 태그를 제공합니다.이 태그는 브라우저, 검색 엔진, 보조기기(Screen Reader) 등이 날짜/시간 정보를 정확히 인식할 수 있게 합니다.📍 1. 기본 문법2025년 9월 03일datetime 속성: ISO 8601 형식으로 날짜·시간을 지정 (YYYY-MM-DD, HH:MM:SS)태그 안의 내용: 사용자가 읽기 쉬운 형식으로 표시📍 2. datetime 속성 값 형식 유형 예시 설명 날짜2025-09-03연-월-일시간05:30시:분 (24시간제)날짜+시간2025-09-03T05:30연-월-일 + 'T' + 시:분주2025-W33연-주차월2025-09연-월📍 3. 실제 예제A. 블로그 게시일 게시일: 2025년 9월 ..

안녕하세요 😊웹에서 이미지를 넣을 때, 단순히 태그만 사용하는 경우가 많습니다.하지만 HTML5에서는 이미지와 그 설명(캡션)을 구조적으로 묶어 표현할 수 있는와 태그를 제공합니다. 이 태그들을 올바르게 사용하면접근성(Accessibility) 강화SEO(검색엔진 최적화) 개선코드 가독성 향상등의 효과를 얻을 수 있습니다.📍 1. 란?이미지, 코드 스니펫, 차트 등 독립적인 콘텐츠 블록을 나타내는 태그문서의 주 흐름에서 분리되어도 의미가 유지됨내부에 을 함께 쓸 수 있음기본 예제 📍 2. 란? 내부 콘텐츠에 대한 **설명(캡션)**을 제공하는 태그 내부에서 첫 번째나 마지막 위치에 배치 가능예제 서해안에서 촬영한 아름다운 노을📍 3. 시각 + 접근성 모두 챙기는 방법alt 속성 → 화면..

안녕하세요 😊웹페이지를 구성할 때 메뉴, 사이드바, 보조 정보 영역을 만들다 보면“이건 로 해야 하나, 로 해야 하나?” 고민되는 경우가 있습니다.두 태그는 비슷해 보이지만 의미와 목적이 다릅니다.이번 글에서는 와 의 차이, 사용 예시, 접근성 팁을 정리해보겠습니다.📍 1. 태그란?페이지의 보조 콘텐츠를 나타내는 태그메인 콘텐츠와 직접적인 관련은 없지만 참고·보조 정보 제공사이드바, 광고 영역, 관련 글 목록, 인용구 등에 사용예시 관련 글 HTML5 시맨틱 태그 정리 CSS Flexbox 완벽 가이드 📌 특징메인 콘텐츠 흐름과 독립적메인 영역 외에도, 글 안의 참고 자료·팁 상자도 가능📍 2. 태그란?페이지나 사이트 내의 탐색 링크 집합을 나타냅니다.메뉴, 카테고리, 목..

안녕하세요 😊HTML5에서는 문서 구조를 더 명확히 하기 위해 의미론적(Semantic) 태그들이 있습니다.그중에서도 과 은 초보자들이 헷갈리기 쉬운 태그인데요,이번 글에서 차이점과 올바른 활용 방법을 쉽게 정리해드리겠습니다.📍 1. 태그란?문서의 주제별 구역을 나누는 태그제목(~)과 함께 쓰이는 경우가 많음같은 주제의 콘텐츠를 묶어 구조적으로 표현할 때 사용예시 회사 소개 우리 회사는 2020년에 설립되었습니다... 📌 포인트주제별 덩어리 구분여러 이 모여 문서를 구성📍 2. 태그란?독립적으로 배포하거나 재사용 가능한 콘텐츠를 나타냄기사, 블로그 글, 포럼 글, 댓글, 제품 카드 등에 사용예시 HTML5 태그 가이드 이 글에서는 HTML5 구조 태그에 대해 설명합니다... 📌 포인트..

안녕하세요 😊웹사이트에서 흔히 보이는 UI 요소 중 하나가바로 **모달 팝업(Popup)**입니다. 대부분의 팝업은 JavaScript로 구현되지만,HTML5에서는 아예 **전용 태그 **를 지원합니다!오늘은 태그의 기본 사용법과 실제 예제를초보자도 따라할 수 있게 정리해드릴게요 💡📍 1. 태그란?HTML5에서 새로 추가된 대화 상자(dialog) 전용 태그팝업 창처럼 화면 위에 뜨는 박스를 JavaScript 없이 생성 가능사용자에게 메시지를 보여주거나 확인/취소 등의 입력을 받을 때 사용📍 2. 기본 예제 이용약관에 동의하십니까? 닫기약관 보기 📌 주요 메서드show() – 비모달 팝업 (배경 클릭 가능)showModal() – 모달 팝업 (배경 클릭 불가)close() – 팝업 닫기..