1. HTML Label
html label요소는 사용자 인터페이스 항목의 설명을 나타냅니다.
<div class="preference">
<label for="cherry">Do you like cherry🍒?</label>
<input type="checkbox" name="cherry" id="cherry"/>
</div>
<div class="preference">
<label for="apple">Do you like Apple? 🍎</label>
<input type="checkbox" name="apple" id="apple" />
</div>
<lable>을 <input> 요소와 연결하면 몇가지 이점이 있습니다.
- label 텍스트는 텍스트 입력과 시각적 관련이 있으며 프로그래밍적으로도 관련있다. 예를 들어 화면리더기(screenreader)는 폼 입력(form input)에 label을 사용자가 입력해야하는 텍스트가 무엇인지 쉽게 이해할 수 있게 만들어 준다
- 관련 label을 클릭해 input 자체 초점을 맞추거나 활성화 시킬 수 있다.
label을 input 요소와 연관시키려면, input에 id 속성을 넣어줘야합니다. 그 다음 label에 id와 같은 값의 for 속성을 넣어줘야 한다. 또는 <label>안에 <input>을 중첩시킬 수 있다. 이 경우 연관이 암시적으로 for 및 id 속성이 필요없다.
<label for="">Do you lick peas
<input type="checkbox" name="pass" />
</label>- label 이 붙여진 양식 컨트롤 (form control)은 레이블된 제어 labeled control이라고 불립니다. 하나의 input은 여러 label들에 연관되어 있습니다.
- 연관된 양식 컨트롤(form control)이 있는 <label>이 클릭되거나 터치되면, 이 label의 click 이벤트는 연관된 control도 동작시킵니다.
접근성 고려사항
label 안에 anchors 또는 buttons와 같은 인터랙티브 요소를 배치하면 안됩닏. 그렇게 하면 사람들이 label과 관련된 양식을 입력하기 어렵습니다.
잘못된 예제
<label for="tac">
<input type="text" id="tac" name="terms-and-conditions" />
동의합니다 <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>
올바른 예제
<label for="tac">
<input type="checkbox" id="tac" name="terms-and-conditions">
동의합니다.
</label>
<p>
<a href="terms.and-conditions.html">Read out Terms and Conditions</a>
</p>
제목
제목은 일반적으로 탐색 목적의 보조 도구로 사용되므로 <label> 내 제목 요소를 배치하면 많은 종류의 보조 기술을 방해합니다. label 텍스트를 시각적으로 조정해야하는 경우 <label> 요소에 적용된 css 클래스를 사용하세요.
잘못된 예제
<label for="your-name">
<h3>이름</h3>
<input id="your-name" name="your-name" type="text" />
</label>
올바른 예제
<label class="large-label" for="your-name">
이름:
<input id="your-name" name="your-name" type="text" />
</label>
버튼
type="button" 선언과 유요한 value 속성을 가진 input 요소에는 연관된 레이블이 필요하지 않습니다. 보조 기술이 버튼 입력을 구문 분석하는 방법을 실체로 방해할 수 있고 <button> 요소에도 동일하게 적용됩니다.
2. legend
html 요소는 부모 <fieldset> 콘텐츠의 설명을 나타냅니다.
<fieldset>
<legend>좋아하는 색상을 골라보세요</legend>
<!-- <div class="check"> -->
<input type="radio" id="red" name="color" value="R" />
<label for="red">Red</label>
<br />
<input type="radio" id="blue" name="color" value="B" />
<label for="blue">blue</label>
<br />
<input type="radio" id="yello" name="color" value="Y" />
<label for="Yellow">Yellow</label>
</div>
</fieldset>
3. li 태그
HTML <li> 요소는 목록의 항목을 나타냅니다. 반드시 정렬 목록 <ol>, 비정렬 목록 <ul>, 혹은 <menu>안에 위치해야 합니다. 메뉴의 비정렬 목록에서 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타냅니다.
<p>Apollo astronauts:</p>
<ul>
<li>Neil Armstrong</li>
<li>Alan Bean</li>
<li>Peter Conrad</li>
<li>Edgar Mitchell</li>
<li>Alan Shepard</li>
</ul>
특성
- value
- <ol> 요소 내부에서 현재 항목의 서수 값을 나타내는 정수, 리스트카 로마 숫자나 문자로 표시되더라도 특성에는 숫자만 넣을 수 있습니다.
- value를 지정한 항목을 뒤따르는 다른 항목은 이 값에서부터 번호를 매김, value 속성은 비정렬 목록 <ul>과 <menu>에서는 아무 의미가 없음
- type
- 넘버링 타입을 나타내는 문자.
- a ; 소문자 글자, A: 대문자 글자, i: 소문자 로마 숫자, I: 대문자 문자 숫자, 1: 숫자
- 부모 <ol> 요소에서 지정하는 유형을 덮어씀
정렬 목록
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
<li>fifth item</li>
<li>sixth item</li>
</ol>
사용자 지정 값을 가전 정렬 목록
<ol type="I">
<li value="3">third item</li>
<li>fouth item</li>
<li>fifth item</li>
</ol>
비정렬 목록
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
4. link
HTML <link> 요소는 현재 문서와 외부 리소스의 관계를 명시하며, 스타일 시트를 연결할 때 제일 많이 사용되지만, 사이트 아이콘('파비콘'과 홈 화면 아이콘, 모바일, 앱 아이콘) 연결 등 여러가지로 사용할 수 있습니다.
<link rel="stylesheet" href="css/1-4-1.html-link.css">
<p>HTML 링크 스타일을 사용한 글자</p>
<p style="color:blue">스타일을 사용한 글자</p>p {
color:red;
}
외부 스타일 시트를 연결하려면 <head> 태그안에 다음과 같은 <link> 요소를 포함해야합니다.
<link rel="stylesheet" href="css/1-4-1.html-link.css">
아이콘을 위한 rel 값도 여러개가 있고, 주 용도는 다양한 휴대기기 플랫폼의 특별한 아이콘을 나타내기 위한 값입니다.
<link
rel="apple-touch-icon"
href="img/tistory.png"
type="image/png"
sizes="114x114"/>
sizes 특성은 아이콘 크기, type 특성은 연결한 리소스의 MIME을 포함합니다. 브라우저는 이런 여러가지 정보를 통해 가장 적합한 아이콘을 선택합니다. media 특성을 사용해 특정 미디어 조건을 만족할때만 리소스를 불러올 수 있습니다.
<link rel="stylesheet" href="css/1-4-1.html-link.css">@media screen and (max-width: 1200px) {
.media {
background-color: aliceblue;
color:red;
}
}
5.menu
html에 menu 요소는 <ul>의 의미론적 대안으로 설명되나, 브라우저에 의해서는 <ul>과 다르지 않게 다뤄집니다.<li> 요소들로 표현되는 항목들의 비정렬 목록을 나타냅니다.
<div class="news">
<a href="https://thinky.tistory.com/106">약사의 혼잣말 제29화 월정(月精) 티저 영상 공개</a>
<menu>
<li><button id="save">나중에 보기</button></li>
<li><button id="share">공유하기</button></li>
</menu>
</div>
<menu>: 메뉴 요소 - HTML: Hypertext Markup Language | MDN
HTML <menu> 요소는 <ul>의 의미론적 대안으로 설명되지만, 브라우저에 의해서는 <ul>과 다르지 않게 다루어집니다. <li> 요소들로 표현되는 항목들의 비정렬 목록을 나타냅니다.
developer.mozilla.org
GitHub - HTML5-STR/html-bloging: https://thinky.tistory.com/category/%EC%9B%B9/HTML
https://thinky.tistory.com/category/%EC%9B%B9/HTML - HTML5-STR/html-bloging
github.com
'Front-End > HTML' 카테고리의 다른 글
| [HTML] HTML과 XHTML의 차이점 (0) | 2025.02.16 |
|---|---|
| [HTML] 6.HTML nav, ol, option, span, strong (0) | 2025.02.01 |
| [HTML] 4.HTML form 요소 , dl, 텍스트 강세, 제목, 헤더, footer (1) | 2025.01.29 |
| [HTML] 3.HTML 강조표시-몸-버튼 (0) | 2025.01.29 |
| [HTML] 2.HTML의 링크걸기 a 태그 주소 adress (0) | 2025.01.28 |