HTML Tag
HEML은 tag들의 집합으로 이루어져 있고, tag는 "<>"로 묶인 요소이루어진 트리구조의 형태이다.
Tag들의 종류로는 <head>, <body>, <div>, <span>, <p>, <input> 등이 있다.
시멘틱 요소란?
시멘틱 태그 - 의미를 부여한 태그
HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다.
시멘틱요소로는 <article>, <aside>, <footer>, <header>, <nav>, <ul>, <main> 등이 있다.
시멘틱 요소를 사용해야하는 이유
1. 검색엔진이 시맨틱 요소를 통해서 키워드를 확인하고 검색결과의 중요한 키워드를 고려하여 찾는다.
2. 개발자들이 협업을 할때, div요서를 찾는것보다 코드 블록을 찾아서 작업할수 있어 편리하다.
3. 요소의 테이터유형을 예측하기 쉽다.
주요 Tag 특성
<div> - 컨텐츠크기와 상관없이 한줄의 공간을 차지한다
<span> - 컨텐츠 크기 만큼 공간을 차지한다.
Radio Box - 그룹설정이가능
name이라는 속성을 사용하여 grouping 을 해줘야한다.
Check box - 중복선택가능.
<label> - 양식 입력 창의 요소를 레이블링을 해준다.
label 태그는 명시적인 방법과 암시적으로 코드를 작성할수있다
명시적 explicit 방법
<label for ="age"> 나이 </label>
<input type="number" id="age">암시적 implicit 방법
<label>
나이
<input type="number" id="age">
</label>위에 두 방법중에는 명시적이 방법을 더 선호한다.
label 태그를 사용해야하는 이유
label태그가 하는 일은 input 태그를 제어하여 상태값을 변경하도록 돕습니다. 이는 input 태그만으로 선택하기 어렵거나 더 좋은 사용자 경험을 제공하기 위한 용도이며 만약 label이 없이 input 태그만 클릭하여 선택하는 경우를 생각해보세요. input 태그 자체는 영역이 작아 클릭하기 어렵거나 서로 다른 위치의 input 태그를 제어하려면 부득히 복잡한 스크립트를 사용해야할 수도 있죠. label 태그는 이런 점으로부터 자유롭고 매우 편리하게 사용할 수 있는 방법입니다.
'HTML&CSS' 카테고리의 다른 글
| CSS FlexBox (0) | 2023.04.14 |
|---|---|
| CSS 기초 (0) | 2023.04.13 |