IT/HTML

[HTML] 빈 페이지 만들기 | html, head, meta, link, title, body | 실용적인 html 태그 | 웹페이지 만들기 | html 기초

아르나 Arna 2021. 1. 22. 11:39
728x90

안녕하세요. 아르나입니다.

이번 글에서는 HTML 의 기초 태그들을 이용하여 빈 페이지를 한번 작성해보도록 하겠습니다.

1. <html> 태그

html 을 시작하라는 태그 입니다. 모든 html 페이지의 시작과 끝을 나타냅니다.

<!DOCTYPE html>
<html>
</html>

위의 예제 코드를 보면 <!DOCTYPE html> 태그로 문서의 유형을 지정합니다. html 문서라는 표시를 해주는것이지요.

그리고 <html> 의 오픈 태그를 이용하여 html 페이지의 시작을 알립니다. 끝으로 </html> 의 클로즈 태그를 이용하여 html 페이지의 끝을 알립니다.

2. <head>, <meta>, <link>, <title> 태그

<head> 태그는 웹 페이지의 정보와 외부 파일을 링크할 때 사용합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="페이지 설명">
    <meta name="author" content="작성자 이름">
    <link rel="stylesheet" href="mystyle.css">
    <title>Page Title</title>
  </head>
</html>

위의 코드처럼 <head> 태그 안에 ​<meta> 태그를 이용하여 웹 페이지의 정보를 표현할 수 있습니다. <meta> 태그안에는 여러 옵션값들이 존재합니다.

<meta charset="UTF-8"> 은 한글이 깨지지 않도록 인코딩을 지정해주는 작업입니다.

<meta name="description" content="페이지 설명"> 은 페이지의 설명을 지정할 수 있습니다.

<meta name="author" content="작성자 이름"> 은 작성자가 누구인지 표기 할 수 있는 기능입니다. 다른 기능들도 더 있겠지만 이정도로 정리하겠습니다.

​

<link> 태그를 이용하여 외부 파일을 링크할 수도 있지요. 위의 예제 코드에서는 mystyle.css 라는 css 타입의 파일을 링크한 경우입니다.

<title> 코드를 이용하여 페이지의 제목을 지정할 수 있습니다. 이러한 작업들은 대체로 <head> 태그안에서 진행됩니다.

3. <body> 태그

<body> 태그는 웹 브라우저에 실제로 표현되는 부분을 작업하는 영역입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="페이지 설명">
    <meta name="author" content="작성자 이름">
    <link rel="stylesheet" href="mystyle.css">
    <title>Page Title</title>
  </head>
  <body>
  </body>
</html>

<body> 태그안에는 여러 태그들을 넣고 페이지를 만들어낼 수 있습니다.

페이지 실행 결과를 보면 탭 이름에 <title> 태그로 지정한 이름이 들어간것을 확인할 수 있습니다.

여기까지 html 기초 태그를 이용한 빈 페이지 만들기 였습니다.

728x90
저작자표시