고정 헤더 영역
상세 컨텐츠
본문
안녕하세요. 지오입니다. 오늘은 HTML이란 무엇이며 이는 어떠한 구조를 갖는지 포스팅해보려 합니다. 또한, HTML에서 가장 기본적으로 사용되는 코드의 의미와 이를 사용하는 방법에 대해서도 알아보도록 하겠습니다.
HTML이란?
HTML은 Hyper Text Markup Language의 줄임말인데요. Hyper Text는 링크 기능을 의미하며, Markup은 마크업이라는 형식을 가졌다는 의미이고, Language는 언어를 의미하죠. 즉, HTML은 하이퍼 텍스트 기능을 가진 마크업 형식 언어이라 할 수 있습니다.
HTML에는 버전이 존재하는데, 2020년 5월 현재는 HTML 5를 사용하고 있습니다. HTML 5는 2008년에 출시되었고, 계속해서 추가적인 기능들이 탑재되고 있습니다. HTML은 그 자체로도 유용하지만, CSS를 통한 디자인 그리고 JavaScript를 통한 동적 웹 구성으로 더욱 강력해질 수 있습니다.
HTML 기본 구조
HTML 기본 구조는 다음과 같은 코드로 구성됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 타이틀 입력 </title>
<meta name="description" content="설명">
<meta name="author" content="저자 이름">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<h1> First Heading </h1>
<p> First Paragraph </p>
<script src="js/scripts.js"></script>
</body>
<html>가장 먼저 눈에 띄는 것은 <!DOCTYPE html> 인데요. 이는 해당 도큐먼트가 HTML5 임을 알려주는 것으로, 브라우저가 이를 제대로 표현할 수 있게 하는 것입니다. 참고로, 이는 대소문자를 구별하지 않습니다. 다음은 위 코드에 사용된 요소들에 대한 설명입니다.
<html>: html 도큐먼트의 기본이 되는 태그입니다.<head>: 도큐먼트의 메타 정보를 포함하는 태그입니다. 이곳에서 문자 인코딩 타입을utf-8로 지정하여, 깨지지 않도록 해줍니다. 또한 이곳에서css스타일 시트도 연결해 줍니다.<title>: 도큐먼트의 제목을 지정하는 태그로,태그 안에 위치시켜야 합니다.<body>: 사용자의 페이지에 표시되는 콘텐츠를 지정하는 태그입니다.</body>직전에 삽입된<script>태그는 자바스크립트를 실행하기 위한 것입니다.
HTML 태그 사용 방법
HTML에서 태그는 보통 꺽쇠와 함께 사용합니다. 특정 태그 이름으로 시작한 다음에는 슬래시(/)와 함께 이를 닫아줘야 합니다.
<tagname> 내용을 이곳에 작성합니다. </tagname>'HTML' 카테고리의 다른 글
| 메타 태그란 무엇이며 왜 사용할까요? (0) | 2020.05.05 |
|---|---|
| HTML 이미지 태그(img) 사용 방법 (0) | 2020.05.05 |
| HTML 웹페이지 개발 도구: 아톰 에디터와 Emmet 확장팩 설치하기 (0) | 2020.05.04 |
| HTML !DOCTYPE이란 무엇이며 왜 사용할까요? (0) | 2020.05.04 |
| 웹사이트에 파비콘 추가하는 방법 (HTML 코드) (0) | 2020.04.30 |
댓글 영역