1. HTML 이란?
Hyper Text Markup Language
: 참조 (하이퍼링크)를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
Hyper Text Markup Language
: 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어
웹 페이지를 작성(구조화)하기 위한 언어
2. HTML 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>요소(element)
HTML 요소는 시작 태그와 종료 태그 그리고 태그 사이에 위치한 내용으로 구성
> 태그(Element, 요소)는 컨텐츠(내용)을 감싸는 것으로 그 정보의 성격과 의미를 정의
내용이 없는 태그들
> br, hr, img, input, link, meta
요소는 중첩(nested)될 수 있음
> 요소의 중첩을 통해 하나의 문서를 구조화
> 여는 태그와 닫는 태그의 쌍을 잘 확인해야 함
: 오류를 반환하는 것이 아닌 그냥 레이아웃이 깨진 상태로 출력되기 때문에, 디버깅이 힘들어질 수 있음
속성(attribute) : 속성명과 속성값으로 이루어짐
- 속성을 통해 태그의 부가적인 정보를 설정할 수 있음
- 요소는 속성을 가질 수 있으며, 경로나 크기와 같은 추가적인 정보를 제공
- 요소의 시작 태그에 작성하며 보통 이름과 값이 하나의 쌍으로 존재
- 태그와 상관없이 사용 가능한 속성(HTML Global Attribute)들도 있음
- 모든 HTML 요소가 공통으로 사용할 수 있는 대표적인 속성 [ id / class / style ]
- 공백은 No | " " (쌍따옴표) 사용! => <a href="http://google.com"></a>
3. HTML 문서 구조화
텍스트 요소
그룹 컨텐츠
form
- <form> 은 사용자의 정보(데이터)를 제출하기 위한 영역
input
- 다양한 타입을 가지는 입력 데이터 유형과 위젯이 제공됨
input label
- label을 클릭하여 input 자체의 초점을 맞춰간 활성화 시킬 수 있음
> 사용자는 선택할 수 있는 영역이 늘어나 웹/ 모바일(터치)환경에서 편하게 사용할 수 있음
> label과 input 입력의 관계가 시각적 뿐만 아니라 화면리더기에서도 label을 읽어 쉽게 내용을 확인할 수 있도록 함
- <input> 에 id 속성을, <label>에는 for 속성을 활용하여 상호연관을 시킴
** 헷갈리지 않기 **
아이디 : label
적는 공간 : input 박스
input 유형 - 01. 일반
> 일반적으로 입력을 받기 위하여 제공되며 type으로 HTML기본 검증 혹은 추가 속성을 활용할 수 있음
- text : 일반 텍스트 입력
- password : 입력 시 값이 보이지 않고 문자를 특수기호(*) 로 표시
- email : 이메일 형식이 아닌 경우 form 제출불가
- number : min, max, step 속성을 활용하여 숫자 범위 설정 가능
- file : accept 속성을 활용하여 파일 타입 지정 가능
input 유형 - 02. 항목 중 선택
> label로 선택에 대한 내용을 작성하고, 항목으로 선택할 수 있는 input을 제공
> 동일한 범주에 속하는 항목들은 name을 통일하고, 선택된 항목의 값은 value로 지정함
- checkbox : 다중 선택
- radio : 단일 선택
input 유형 - 03. 종합
> 요소의 동작은 type에 따라 달라지므로, 각각의 내용을 숙지할 것
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input
'FrontEnd > html | css' 카테고리의 다른 글
| [CSS] Viewport : dvh, dvw (0) | 2024.03.28 |
|---|---|
| 03. CSS Layout (1) | 2023.03.18 |
| 02. CSS 기본 (0) | 2023.03.18 |
| 01. CSS 개요 (1) | 2023.03.15 |
