[HTML] <form> 안에서 <section>과 <fieldset> 병행 사용하는 법
·
프로그래밍/Html
[HTML] 안에서 과 병행 사용하는 법HTML에서 을 구성할 때, 입력 항목이 많아지면 과 을 병행해 사용하면 구조가 훨씬 깔끔해집니다.이 글에서는 두 태그의 차이점과 실무 예제를 통해 폼 구조를 더 명확하게 설계하는 방법을 소개합니다.✅ 1. fieldset vs section – 뭐가 다를까? 항목 의미 입력 항목 그룹 (form control grouping) 독립적인 콘텐츠 블록 (document section) 사용 목적 폼 내 입력 그룹 구분 논리적 구간 구분 (헤더/푸터 등 포함 가능) 접근성 legend와 함께 스크린리더..
[HTML] <fieldset>과 <legend>로 폼 그룹화하기
·
프로그래밍/Html
[HTML] 과 로 폼 그룹화하기HTML에서 과 는 폼 입력 항목을 그룹화하고, 제목을 붙여주는 기능을 합니다.접근성을 높이고, 시각적으로도 그룹을 구분할 수 있게 해주는 매우 중요한 태그입니다.이 글에서는 fieldset과 legend의 사용법과 함께, 실제 로그인, 회원가입 폼 예제를 통해 설명해드립니다.✅ 1. 이란?은 폼 안에서 입력 그룹을 묶는 컨테이너입니다.해당 그룹은 테두리로 구분되어 표시되며, 관련 입력 요소들을 시각적으로 구분할 수 있습니다.✅ 2. 란?는 fieldset의 제목 역할을 합니다.보통 그룹의 용도(예: 기본 정보, 연락처 정보 등)를 나타냅니다.✅ 3. 기본 예제 로그인 정보 이메일: 비밀번호: → 위 예제는 이메일과 비밀번호를 fie..
[HTML] placeholder vs label – 언제 어떤 걸 써야 할까?
·
프로그래밍/Html
[HTML] placeholder vs label – 언제 어떤 걸 써야 할까?HTML에서 placeholder와 label은 모두 입력 필드에 대한 힌트를 제공하는 요소지만, 사용 목적과 사용자 경험(UX), 접근성 측면에서 큰 차이가 있습니다.이 글에서는 두 태그의 차이점과 언제 어떤 상황에서 써야 하는지, 실무 기준 예제와 함께 정리해보겠습니다.✅ 1. placeholder란?placeholder는 입력 전 임시로 표시되는 안내 텍스트입니다.입력값을 입력하면 해당 텍스트는 사라집니다. ✔ 간단한 힌트를 줄 수 있다 ✘ 입력 후에는 사라지므로 정보가 유지되지 않는다 ✘ 화면 낭독기(Screen reader)에서 읽히지 않을 수 있다 (접근성 ↓)✅ 2. label이란?이메일 주소label은 ..