어리바리 신입 개발자의 얼렁뚱땅 개발 기록 ✨
23.03.02 / 태그, 요소, 속성 본문
HTML 기본 구조
1.HTML에서 사용하는 명령어 - 태그(Tag)라고 한다.
<...>로 나타내며, 대부분 한 쌍으로 이루어져 있다.
HTML 문서는 웹 브라우저에서 실행된다
=> 웹 표준을 준수 - 브라우저 엔진(표준) - 정상적으로 읽을 수 있다. (정상적으로 뷰 포트 영역에 렌더링)
요소(Element)
- <h1>안녕하세요.</h1> : 태그 + 태그 사이에 있는 내용(콘텐츠) = 요소라고 한다. -> h1 요소
- 내용 앞 태그를 시작(열린) 태그 / 뒤 태그 종료(닫는) 태그
* 태그는 대소문자를 구별하지 않는다. 단, W3C에서 소문자를 권장하고 있기 때문에 소문자를 사용하는 것이 일반적인 방법이다.
- 빈 요소(Empty Element) : 내용을 가질 수 없는 요소 ex) <br>, <input>, <link> 등
속성(Attribute)
- 태그가 가질 수 있는 정보
- 태그 내부에 속성을 부여하고, 값을 넣을 수 있다.
- 속성 작성 시, 시작 태그에 작성해야 한다.
- HTML에는 태그마다 지정할 수 있는 속성이 미리 정의되어 있다.
*전역 속성
- id : 요소를 가리키는 이름을 작성 / 중복된 이름(id) 사용 불가능 <div id header> / <div id footer> / <div id main>
- class : 요소를 가리키는 이름을 작성 / 중복된 이름 사용가능
- style : 요소에 스타일을 지정할 수 있다.
<!DOCTYPE html>
! 의미 : 선언하다. 브라우저에게 이 문서는 HTML 문서라고 선언.
<html> </html>
브라우저에게 HTML 문서의 시작과 끝을 알려준다.
<html lang="ko"> 언어 명시
<head> </head>
헤드 영역은 해당 페이지에 대한 정보를 서술하는 공간
웹 페이지에 단 하나만 존재. 브라우저 실행 화면에는 보이지 않는다.
설정 정보를 작성하는 영역
ex) title, meta, link, style, script
<title> </title>
탭에 보이는 웹 페이지의 제목 표시
<meta>
해당 문서에 대한 정보를 기술한다.
<meta charset="utf-8" /> 언어 설정 (문자셋)
*문자셋 종류
- ASCII(American Standard Code...) 미국 정보 교환 표준 부호
- ASCII로는 영어 외의 문자 표현이 어려움 -> EUC
- EUC는 중복되는 영역 발생 - 하나의 시스템에서 여러 문자셋을 사용할 수 없음(한국 : ECU-kr / 일본 : JP / 중국 :CN).
-> Unicode : 모든 문자를 표현할 수 있다. 하나의 문자셋 안에 전 세계 모든 문자를 넣어서 사용한다. (UTF-8)
[html tag]
1. 텍스트와 관련된 태그들
2. 미디어 관련 태그들
3. 링크 관련 태그
4. 테이블 태그
* table 요소 : <table> </table> 태그의 사이에 들어가는 내용들 + <table> </table> 태그 포함
- 행과 열로 구성된 표를 만들 때 사용하는 요소.
- <thead> </thead> : 표 상단을 담당.
- <th> </th> : 표 상단 thead의 칸을 나타낸다.
- <tbody> </tbody> : 표의 본문
- <tr> </tr> : table row / 행, 한 줄
- <td> </td> : table data / 열(column), 한 칸의 cell data를 표현한다.
* 행(줄) 병합과 열(칸) 병합
- 행 병합 <td rowspan="합칠 줄의 수"> </td> : 셀을 세로로 합친다. / 데이터를 가로 방향으로 읽는다.
- 열 병합 <td colspan="합칠 칸의 수"> </td> : 셀을 가로로 합친다. / 데이터를 세로 방향으로 읽는다.
5. 목록 태그
6. <input> : 빈 태그이기 때문에 닫는 태그 없이 단독으로 사용함.
사용자에게 어떤 정보를 입력 받을 때 사용한다.
[input 태그의 속성들]
- type 속성 : 사용자가 데이터를 입력하는 요소 / 입력 받을 데이터 타입을 정할 수 있다.
*input type 종류
- HTML5에서는 용도에 맞게 입력할 수 있는 다양한 텍스트 필드를 제공한다.
- text, checkbox,radio, password, email, number, date, time .....
- name 속성 : 해당 input의 이름을 명시한다.
form 데이터를 서버로 전송하면, 서버에서 받을 때 name 데이터로 받는다. 실제 값은 value 값이 들어있다.
(name라는 속성에 사용자가 입력한 ID 값을 저장한다. -> 서버에 ID 값이 저장 된 name 속성을 전달 한다.)
- value 속성 : 해당 input의 초기값을 명시한다.
- 기타 속성들
* 힌트를 표시하는 placeholder 속성
- 사용자가 입력 할 안내문 역할
- 사용자의 입력 실수를 최소화 한다.
* 비활성화 disabled
- 입력 요소를 비활성화 할 수 있다.
* 읽기 전용 readonly
- 사용자가 입력은 할 수 없지만, 읽는 것만 가능한 읽기 전용 필드
* 최대 길이 maxlength, 최소 길이 minlength : 위반시, 서버로 전송 거부
[<input>태그와 연결할 수 있는 <label> </label> 태그]
- input 태그와 관계(연결)를 맺을 수 있다.
- input 태그가 무엇을 말하는지 제목을 명시할 수 있다.
- label 태그 없어도 input 태그 사용 가능한데 왜 사용하나?
사용자가 클릭할 수 있는 범위를 확장해준다. (사용자 측면에서 label을 사용하는 것이 편리함.)
<사용방법>
- input 태그를 label 태그로 감싼다.
- input id 속성의 값과 label for 속성의 값에 동일한 값을 작성한다.
7. <textarea cols="" rows=""> 태그
- 장문의 텍스트 데이터를 받을 때 사용
- 너비를 지정하는 cols 속성과 몇 줄을 표시할지 정하는 rows 속성을 사용
- cols="20" -> 20글자만큼의 너비를 입력할 수 있다는 뜻이 아님! 한글로 약 10자 정도...
8. <select> 태그
- 사용자가 여러 데이터 중 1개를 선택할 수 있다.
- radio와 차이는 드롭 다운 기능을 제공한다는 점.
- option 태그와 함께 사용.
- select 태그는 value 속성을 가질 수 없지만(name 속성은 가질 수 있음), option 태그는 value 속성을 가질 수 있음.
select의 그룹화 , optgroup
-label 속성으로 하위 option들의 이름을 작성할 수 있다.
브라우저에서 실행 확인하기(뷰 포트에 렌더링) : 오른 쪽 마우스 - open with live server
'Front - end > HTML' 카테고리의 다른 글
| 23.03.08 / 인라인 요소, 블록 요소, 인라인 블록 요소 (0) | 2023.03.08 |
|---|---|
| Visual Studio Code 단축키 (0) | 2023.03.08 |
| 23.03.08 / form 태그와 함께 쓸 수 있는 태그들 (0) | 2023.03.08 |
| 23.03.02 / VScode (Visual Studio Code) 설치와 실행 (0) | 2023.03.02 |
| 23.03.02 / 기본 키워드 정리 (0) | 2023.03.02 |
