728x90
HTML : 웹 문서를 만드는 기본 언어
HyperText = 문서를 서로 연결해 주는 링크
단순 클릭 한번으로 다른 페이지나 사이트로 쉽게 연결
Markup = 표시하다
텍스트, 이미지, 영상 등의 위치를 표시
'웹 브라우저에 보여 줄 내용'에 마크업 하고 문서끼리 링크하는 것을 가능하게 하는 것이 HTML의 기본 기능이다.
HTML 문서의 기본 구조
웹 문서는 보통 <!DOCTYPE html>로 시작해 <html>, <head>, <body>라는 3개의 영역으로 구성되어 있다.
- <!DOCTYPE html> :
현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻.
※ HTML에서는 영어 대소문자를 구별하지 않아도 되지만 문서 유형을 강조할 때에는 <!DOCTYPE html>처럼 대문자를 사용하기도 한다. - <html> ~ </html> : 웹 문서의 시작과 끝
웹 브라우저가 <html> 태그를 만나면 </html>까지 소스를 읽어 화면에 표시한다.
※ <html>태그에서는 lang 속성으로 문서에서 사용할 언어를 지정할 수 있다.
<html lang="ko"> <!-- 한국어로 된 문서 -->
언어를 지정하는 이유는 검색 사이트에서 특정 언어로 제한해 검색할 때 필요하기 때문이다. 예를들어 검색 결과 중에서 '한국어로 된 문서' 로 범위를 제한할 경우 <html lang="ko">인 문서를 우선 검색한다. - <head> ~ </head> :
웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분으로 대부분 웹 브라우저 화면에는 보이지 않는다.
주로 사용하는 태그로는 <meta>와 <title>이 있다.
- <meta> : 문자 세트를 비롯한 문서 정보
<meta> 태그에서 인코딩을 명시하지 않으면 웹 브라우저에서 자동으로 인코딩을 처리하기 때문에 한글이 깨질 수 있다. 이를 예방하기 위해 한글 인코딩을 명시하는 <meta charset="UTF-8">을 꼭 적어 주는 것이 좋다.
<meta charset="UTF-8"> <!-- 한글 인코딩 명시 -->
그 외에 웹 사이트의 키워드, 간단한 설명, 제작자 등의 정보를 다음과 같이 지정해 줄 수 있다.
<meta name="keywords" content="html의 구조"> <!-- 웹 문서의 키워드 --> <meta name="description" content="html의 구조에 대한 설명"> <!-- 웹 문서의 설명 --> <meta name="author" content="Gildong Kim"> <!-- 웹 문서의 제작자 --> - <title> ~ </title> : 문서 제목
<title>과 </title>사이에 웹 문서의 제목을 입력하면 웹 브라우저의 제목 표시줄에 표시가 된다.
<title>HTML 기본 문서</title>
- <meta> : 문자 세트를 비롯한 문서 정보
- <body> ~ </body> :
실제로 웹 브라우저 화면에 나타나는 내용<body> <h1>프런트엔드 웹 개발</h1> <hr> <p>HTML</p> <p>CSS</p> <p>자바스크립트</p> </body>
'웹 개발' 카테고리의 다른 글
| [HTML] 비주얼 스튜디오 라이브 서버 설치 및 사용방법 (0) | 2021.12.15 |
|---|---|
| [HTML] HTML 파일 만들기 (0) | 2021.12.15 |
| HTML5를 왜 HTML로 부르게 되었을까? (0) | 2021.12.08 |
| 비주얼 스튜디오 코드의 글꼴, 탭(들여쓰기) 크기 변경하기 (0) | 2021.12.03 |
| 비주얼 스튜디오를 사용해 웹 문서 만들기 (0) | 2021.12.03 |