jonbeo 님의 블로그

웹 접근성💡 ARIA 속성, 키보드 내비게이션, 모달 접근성까지 완전 정리

웹 접근성은 단순히 alt 속성 넣고, 시맨틱 태그를 쓰는 수준에서 끝나지 않습니다.실제 프로젝트에서는 모달, 드롭다운, 탭, 다크모드 등 동적 UI 컴포넌트에서 접근성 문제가 자주 발생합니다.이번 포스팅에서는 실무에서 특히 중요한 심화 접근성 주제 3가지를 다뤄봅니다.🧠 1. ARIA 속성 활용하기✅ ARIA란?Accessible Rich Internet Applications의 약자HTML 태그만으로 의미를 전달하기 어려운 경우, **보조 기술(스크린리더 등)**에 추가 정보를 제공📌 자주 쓰는 ARIA 속성속성설명aria-label스크린리더용 레이블 제공aria-hidden="true"보조 기술에서 숨김 처리aria-expanded="true/false"드롭다운, 아코디언의 열림 상태 표시ari..

웹 접근성이란? 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개만독립적인 구역컨텐츠 그룹핑독립적으로..

SCSS는 CSS를 더 모듈화하고 재사용 가능하게 만들어주는 CSS 전처리기입니다.그중 @mixin은 반복되는 스타일을 묶어서 재사용할 수 있도록 해주는 기능입니다.즉, 자주 사용하는 CSS를 일일이 복붙하지 않고 한 번에 불러와 사용할 수 있습니다! 🔁🧪 1. 기본 문법@mixin 이름 { 스타일속성: 값;} 사용할 때는 @include 키워드를 사용합니다:@include 이름; 💡 2. 간단 예제📌 예제: 공통 버튼 스타일 만들기@mixin button-style { padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer;} 사용 예:.btn-primary { @include button-style; b..

CSS에서 가독성과 생산성을 높이기 위해 단축 속성이 매우 중요합니다.특히 Flexbox와 Grid에서는 특정 속성들을 한 줄로 축약해서 작성하는 경우가 많습니다.이번 시간에는 자주 사용되는 주요 단축 속성들을 상세하게 정리해보겠습니다! 🧠📦 1. Flexbox 단축 속성✅ flexflex: [flex-grow] [flex-shrink] [flex-basis]; 예시 의미 flex: 1;1 1 0%과 같음. 남는 공간 나눔flex: 0 0 auto;기본 크기 유지, 늘어나거나 줄어들지 않음flex: 1 1 30%;기본 30%, 필요 시 늘어나고 줄어듦 🔄 flex-flowflex-flow: [flex-direction] [flex-wrap]; 예시 의미 flex-flow: row wrap;가..

CSS로 레이아웃을 구성할 때 가장 많이 사용하는 두 가지 방법이 바로 Flexbox와 Grid입니다.처음에는 비슷해 보여도, 사용하는 목적과 상황에 따라 완전히 다른 결과를 만들어냅니다.이번 포스팅에서는 ✅차이점 ✅사용 시기 ✅실무 예제 ✅추천 사용처까지 한 번에 정리해 보겠습니다.🔍 1. 기본 개념 비교 구분 Flexbox Grid 🎯 목적1차원 레이아웃 (row 또는 column)2차원 레이아웃 (row + column)📐 구성주축(main axis) 기준 정렬행과 열 기준 배치🧲 정렬요소 간 공간 배분, 정렬정확한 위치 지정 및 정렬 가능🧩 유연성요소 크기 자동 조정격자 기반 정확한 레이아웃 💡 2. 언제 Flexbox를 사용할까?Flex는 다음과 같은 상황에서 강력한 효과를 발휘합..

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

안녕하세요 😊웹 개발에서 요소에 움직임을 줄 때 가장 많이 쓰는 기능이 바로 **트랜지션(transition)**과 **애니메이션(animation)**입니다.두 기능 모두 CSS만으로 멋진 효과를 낼 수 있지만, 헷갈리기 쉽습니다.오늘은 트랜지션과 애니메이션의 차이를 초보자도 쉽게 이해할 수 있도록 정리하고,실무에서 어떻게 활용하면 좋은지 예제와 함께 소개하겠습니다.📍 1. CSS 트랜지션(transition)상태 변화가 있을 때만 실행마우스를 올리거나, 클래스를 추가·제거할 때 동작짧고 단순한 효과에 적합예시: 버튼에 hover 시 색상 변경 button { background-color: #2196f3; color: #fff; padding: 10px 20px; border: none; ..

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

안녕하세요 😊웹에서 텍스트를 강조할 때 흔히 자바스크립트를 이용해 애니메이션을 넣곤 합니다.하지만 요즘은 CSS만으로도 충분히 세련된 애니메이션 효과를 줄 수 있습니다.오늘은 초보자도 따라 할 수 있는 반짝이는 글자 애니메이션을 만들어 보겠습니다.📍 1. 기본 아이디어반짝이는 효과를 주기 위해서는 크게 두 가지 기법을 사용할 수 있습니다.linear-gradient + background-clip:text → 빛이 지나가는 효과text-shadow 애니메이션 → 글자 주위가 번쩍이는 효과이 두 가지를 조합하면 다양한 스타일의 반짝임을 표현할 수 있습니다.📍 2. 빛이 스쳐 지나가는 반짝임 Shiny Text.shine { font-size: 3rem; font-weight: bold; colo..