태그
<h1>Hello, HTML</h1>무언가를 표시하기 위한 꼬리표/이름표
태그를 이용하여 코드를 작성하면, 브라우저가 이를 인식하여 내용을 표현함
태그는 <, > 기호를 사용하며, 이 사이에 태그 이름이 들어감
h1이 코드 이름에 해당
여는 태그와 닫는 태그의 두 개의 태그가 한 쌍으로 구성됨
태그 사이에 있는 태그 내용이 실제 브라우저에서 나타남
요소 : 태그 이름 + 내용, 태그와 유사한 의미
HTML 말고도 XML, SGML, XHTML 등의 다른 마크업 언어에서 모두 사용
속성
<h1 id="title">Hello, HTML</h1>태그에 추가로 정보를 제공하거나, 태그의 동작을 구체적으로 제어하기 위해 사용
시작 태그에 포함되며 속성이름="속성값"의 형태로 이름과 값으로 구성됨
속성값은 " 또는 '로 감싸 표현
<h1 id="title" class="main">Hello, HTML</h1>의미와 용도에 따라 여러 속성이 존재하며, 하나의 태그에 여러 속성을 선언 가능
속성의 구분은 공백을 통해 이루어짐
선언 순서는 태그에 영향을 미치지 않음
태그 중첩
태그 안에 다른 태그를 중첩해서 사용 가능
태그를 중첩해서 사용할 시, 중첩되는 태그는 부모 태그를 벗어나서는 안 됨
잘못된 태그 선언
<h1>hello, <i>HTML</h1></i>- 올바른 태그 선언
<h1>Hello, <i>HTML</i></h1>- 중첩이 얼마나 되는지는 문제가 되지 않으나, 경우에 따라 정해진 태그만 사용 가능
빈 태그
시작 태그만 존재하고 종료 태그가 존재하지 않는 태그
<br>, <img>, <input> 등의 태그
입력하는 내용만 비어있고, 속성 값을 통해 화면에 나타나거나 다른 용도로 사용됨
내용을 브라우저가 화면에 나타내야 하기 때문에 replacement 태그라고도 부름
<br> 태그와 같은 경우는 화면에 출력되는 내용이 없기 때문에 대체 태그에 해당하지 않음
공백
- HTML은 두 칸 이상의 공백을 모두 무시
<h1>Hello, HTML</h1> <h1>Hello, HTML</h1> <h1> Hello, HTML </h1>- 위의 코드에서 모두 같은 내용이 출력됨
주석
- 화면에는 노출되지 않고, 메모의 목적으로만 사용
- HTML 파일 내 주석으로 표시를 하면 해당 부분을 인식하여 해석하지 않음
<!-- 이 부분은 주석입니다 --> <!-- 주석은 여러 줄로 사용할 수 있습니다 <h1>Hello, HTML</h1> 위의 <h1> 태그는 주석 내에 있기 때문에 브라우저가 해석하지 않습니다 -->- 주석의 시작은 <!-- 로, 끝은 --> 로 나타냄
HTML 문서의 기본 구조
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1> Hello, HTML </h1> </body> </html>DOCTYPE : 해당 문서의 타입 정의, 문서내 최상단에 위치
lang : 언어
head : meta, title, link, style 등이 위치, 화면에 표시되지 않지만 문서의 기본 설정이나 자바스크립트 파일 또는 스타일 파일을 선언
charset : 인코딩 방식
title : 브라우저 탭 바에 나타나는 내용
body : 실제 브라우저 화면에 나타나는 내용