1) HTML이란?
HTML : Hyper Text Markup Language - 웹 페이지를 만드는 언어
↳ Hyper Text = 링크
↳ Markup Language : 프로그래밍 언어의 한 종류. 정보를 구조적으로 표현 가능한 언어
- 파일 확장자 : html
2) HTML 문법
(1) 태그 - 태그 / 시작 태그 / 종료 태그 / 내용 / 요소
태그(Tag) : 작성 코드를 인식하기 위한 꼬리표 - 브라우저가 태그를 인식하여 내용을 표현한다.
- 부등호 기호 (<,>) 이용
- 두 개가 한 쌍으로 선언 - 시작태그(여는태그)와 종료태그(닫는태그)로 구성된다.
- 태그 내부에 내용(Content)을 작성 - 실제 화면에 출력되는 부분
- 요소(Element) : 태그와 내용 모두를 포함하여 부르는 개념
- 작성 방법: <태그이름>내용</태그이름>
<h1> 별안간_공대생 </h1>
↳ h1 : 태그 이름
↳ <h1> : 시작태그(여는태그), </h1> : 종료태그(닫는태그)
↳ 별안간_공대생 : 내용
↳ <h1> 별안간_공대생 </h1> : 요소
(2) 속성 - 속성 명 / 속성 값
속성(Attribute) : 태그에 추가적으로 정보를 제공, 태그의 동작이나 표현을 조절할 수 있는 설정값.
- 이름과 값으로 이루어져 있다.
- 시작 태그 내부에 선언한다.
- 작성 방법: <태그이름 속성이름="속성값">
* 태그 이름 뒤 공백으로 구분, 속성이름과 =과 속성값 사이는 공백을 허용하지 않음. * "(쌍따옴표)와 '( 홀따옴표) 모두 사용 가능.
* 하나의 태그에 여러 속성들을 공백으로 구분하여 선언 가능. - 선언 순서는 무관
<h1 id="title" class="test"> 별안간_공대생 </h1>↳ id, class : 속성이름
↳ title, test : 속성값
(3) 태그의 중첩 - 중첩 / 부모 태그 / 자식 태그
태그 안에 얼마든지 다른 태그를 중첩하여 선언할 수 있다.
단, 안에 선언되는 자식 태그는 부모 태그를 벗어날 수 없다. * 자식 태그는 부모 태그 안에서 시작되고 끝이 나야 함.
<h1> 별안간_공대생, <i>HTML</i></h1>↳ <h1>, </h1> : 부모 태그
↳ <i>, </i> : 자식 태그
(4) 빈 태그
빈 태그(Empty Tag) : 시작 태그만 존재하고 종료 태그가 존재하지 않는 태그 - 내용이 없음
ex. 대체되는 태그 (Replacement Tag)
<br>
<img src="">
(5) 공백
HTML은 두 칸 이상의 공백을 모두 무시한다.
<h1>별안간, 공대생</h1>
<h1>별안간, 공대생</h1>
<h1>
별안간,
공대생
</h1>↳ 출력 결과는 모두 같다.
(6) 주석
주석(Comment tags): 코드에 대한 설명을 메모하거나, 임시로 코드를 보이지 않게 처리할 목적으로 사용 - 화면상에 출력되지 않음.
- 작성 방법: <!-- 내용 -->
3) HTML 문서의 기본 구조
- 문서 타입 정의 - DTD(doctype) : 이 문서가 어떤 버전으로 작성되었는지 알린다.
- 반드시 문서 내 최상단에 작성되어야 한다.
- <html> 요소 - 문서 타입 선언 후에는 <html> 태그가 나와야 한다. 여기에서 lang 속성은 문서 작성 언어를 알린다.
- <head> 태그 : 이 태그 내부의 태그들은 브라우저 화면에 나타나지 않고, 문서의 기본 정보 설정이나 외부 파일과 연결하는 등의 역할을 한다.
- <body> 태그 : 실제 브라우저 화면에 나타나는 내용들을 작성한다.
<!DOCTYPE html> <!--문서 타입을 정의한다.-->
<html lang="ko"> <!--한국어로 작성된 문서임을 알린다.-->
<head>
<meta charset="UTF-8">
<title>HTML</title> <!--문서의 제목 작성, 브라우저 화면 탭바에 노출되는 부분-->
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
'웹 > HTML & CSS' 카테고리의 다른 글
| 1.6 [CSS] CSS 속성 2 _ 폰트, 텍스트 (0) | 2022.07.03 |
|---|---|
| 1.5 [CSS] CSS속성 1 _ 단위, 배경, 박스모델 (0) | 2022.07.03 |
| 1.4 [CSS] CSS 이해하기 (0) | 2022.07.03 |
| 1.3 [HTML] 콘텐츠모델, 시멘틱마크업, 블록 & 인라인 (0) | 2022.07.03 |
| 1.2 [HTML] 태그 (0) | 2022.06.19 |
