jonbeo 님의 블로그

웹 접근성 향상과 사용자 편의성을 위해 반드시 이해하고 사용해야 할 태그 중 하나가 바로 태그입니다.이 태그는 주로 폼 요소(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 👉 브라우저 ..

안녕하세요 😊웹 페이지에서 이미지를 넣을 때 대부분 태그만 사용하시죠?하지만 단순히 이미지를 넣는 것만으로는 무엇을 표현한 이미지인지 설명이 부족할 수 있습니다. HTML5에서는 와 태그를 사용하여,이미지(또는 코드, 다이어그램 등)와 그에 대한 설명을 시맨틱하게 묶어서 표현할 수 있습니다.📍 1. 태그란?독립적인 콘텐츠 블록을 의미합니다.이미지, 코드 블록, 다이어그램, 인용문 등 본문과 별도로 존재할 수 있는 요소를 감쌀 때 사용합니다.이동하거나 본문과 분리해도 의미가 유지됩니다.예시: 📍 2. 태그란? 안에서 사용하는 설명 태그입니다.이미지에 캡션(설명)을 붙이는 역할을 합니다. 안에서 첫 번째나 마지막 요소로 위치해야 합니다.예시: 그림 1. 바닷가에서 촬영한 일몰 👉 이..

안녕하세요 😊는 **중요 텍스트를 강조(하이라이트)**할 때 사용하는 시맨틱 태그입니다.특히 검색 결과 강조, 읽기 가이드에 유용합니다.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월 ..