[HTML] 02. HTML tags

02-1. HTML 파일의 구조

html 파일의 구조는 항상 아래와 같습니다.

<!DOCTYPE>

<html>

<head>

</head>

<body>

</body>

</html>

index.html에 있는 여러가지 tag들을 만나봅시다! run 버튼을 눌러 실행하고 결과 화면을 보면서 설명을 읽어주세요.

02-1-1. <!DOCTYPE>

HTML 파일이라면 제일 첫 줄에 위치해야 하는 선언문 입니다. 모습은 태그와 비슷하지만 HTML 태그는 아닙니다. 이 html파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할을 합니다.

<!DOCTYPE html>

index.html에 쓰인 이 선언문은 HTML5 버전을 사용한다는 의미입니다. 가장 최신이자 많이 쓰이는 버전은 HTML5입니다. 우리가 배우고 앞으로 사용할 버전도 HTML5라고 알고계시면 되겠습니다.

02-1-2. <html>

<!DOCTYPE\>을 제외하고 모든 HTML elements(요소)들은 최상위의 <html> 태그로 감싸져 있습니다. 브라우저가 html태그를 만나면, html이 시작됐는지 인지하고 요소를 그릴 준비를 합니다.

02-1-3. <head>

<head>

</head>

html 태그 다음에는 항상 <head>태그가 위치합니다. 사이트의 제목, 설명, 부가 정보, 기술적 내용(ex. 이 사이트는 주로 모바일용인지)이 들어가는 부분입니다.

<meta charset="utf-8"> : 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 합니다.
<meta name="viewport" content="width=device-width">: 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미입니다. 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보입니다. 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타납니다.
<title>repl.it</title>: 브라우저 탭에 보이는 페이지 이름입니다.

02-1-4. <body>

body 태그는 항상 head 태그 다음에 위치합니다. body태그 내부에는 화면에 보여질 각종 태그들이 위치합니다. 레이아웃대로 배치되어 있겠죠! 여기서부터 나오는 태그는 뒤에서 더 자세하게 다룰 예정입니다. 이번 장에서는 가볍게 배우고 넘어가겠습니다.

02-2. HTML tags

02-2-1. <h1> ~ <h6>

주로 제목같은 텍스트를 보여줄때 사용하는 태그입니다.
1에서 6으로 숫자가 올라갈 수록, 글씨 크기가 점점 작아집니다.
<h1> 태그는 한 페이지 내에서 단 한번만 사용되어야 하며, <h2> 태그 부터는 여러번 사용할 수 있습니다.
<h1> ~ <h6> 태그는 순차적으로 사용하여야 합니다. (e.g. <h3> 태그를 사용하려면 <h1>, <h2> 태그가 무조건 존재해야 합니다.)
heading의 줄임말입니다.

02-2-2. <a>

02-2-3. <p>

02-2-4. <span>

<span>직업: 프론트앤드 개발자</span>

02-2-5. <div>

<div> 태그는 division의 줄임말로 웹사이트에서 섹션을 나눌 때 사용합니다. <a>, <p>, <img> 등의 태그는 그 자체로 어떤 기능을 하는지 명확히 알 수 있지만, <div> 태그는 아무런 의미를 가지지 않습니다.

출처 : wecode

개발로그