HTML(Hyper Text Markup Language) 는 웹페이지의 내용과 구조를 담당하는 마크업 언어이다. 마크업 언어이기 때문에 태그를 사용하여 문서의 구조를 만든다.
*마크업 언어 : 태그를 이용해 문서의 구조를 정의하는 언어의 한 종류.
1. 시작
1. 시작은 항상 <!DOCTYPE html> 로 해서 문서의 형식이 html 으로 지정한다.
2. 실질적인 내용은 <html> 과 </html> 로 둘러쌓여 있다.
3. <head> 에는 브라우저에 표시되지 않는 정보들을 적는다. 예를 들어 메타데이터, 브라우저 이름, 외부 링크 등이 있다.
4. 웹 브라우저에 표시되는 부분은 <body> 에 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
*메타데이터 : 데이터의 형식을 정의하기 위한 데이터.
2. 요소(Element) 의 기본구성
요소는 시작태그와 종료태그, 태그 사이의 내용으로 이루어진다.
<p>Hello</p>
<p>가 시작태그(start tag), Hello 는 내용(content), </p> 는 종료태그(end tag) 이다.
3. 요소의 중첩(Nasted Element)
<body>
<p>Hello</p>
<body>
p태그가 body 태그와 중첩되어 있다. 이렇게 부자관계를 표현할 수 있다. body태그는 부모요소, p태그는 자식요소이다. 들여쓰기를 이용해서 중첩 할 수 있다.
4. 빈 요소(Empty Element)
요소 중에서 content를 가질 수 없는 빈 태그도 존재한다. 빈 태그는 속성(attribute)만 가질 수 있다.
<meta charset="utf-8">
- br : 띄어쓰기
- hr : 선 긋기
- img : 이미지 첨부
- input : 입력형식 구현
- link : 외부파일과 연결
- meta : 메타데이터 정의
5. 속성(Attribute)
속성을 통해 요소의 특징을 정의할 수 있다. 추가적인 정보들을 제공한다. 시작태그에 쓸 수 있다.
6. 글로벌 속성(Global Attribute)
각각의 요소의 특징에 따라 사용할 수 있는 지정된 속성이 있지만, 글로벌 속성은 거의 모든 요소에 사용할 수 있다.
- id : 식별자, 중복안됨.
- class : class를 만들 수 있음. 중복가능
- lang : 브라우저의 기본 언어를 지정. 영어페이지 들어가면 한글로 번역할건지 뜨는데 이때는 lang="en" 이기 때문.
- hidden : 숨기는 기능. css와 달리 의미상으로도 없앰.
- style : 스타일 지정가능
- title : 요소의 제목
- tabindex : 키보드로 이동할 때 이동순서 정함.
* id 와 class의 정확한 차이가 뭘까? : class는 띄어쓰기를 통해 한 태그에 여러개의 class를 지정할 수 있음. 그래서 css를 할 때 많이 사용함. class는 중복이 가능해서 사용가능하고 id 는 중복이 되지 않아 특정한 요소를 식별할 때 사용하기 좋음.
'HTML' 카테고리의 다른 글
| [HTML] 이미지, 음악, 동영상 (0) | 2023.01.14 |
|---|---|
| [HTML] 목록(list) 와 테이블(table) (0) | 2023.01.14 |
| [HTML] 하이퍼링크, href, target (0) | 2023.01.14 |
| [HTML] 지나치기 쉬운 HTML 텍스트 관련 태그(em, mark, del, ins, pre 등) (0) | 2023.01.13 |
| [HTML] 시맨틱 요소 (0) | 2023.01.13 |