내용이 안 보인다면 쿠키/캐시를 지우고 새로고침 하세요!
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌2 - HTML&DOM - 2년 전 등록 / 9달 전 수정

HTML의 기본 구조와 태그

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간에는 HTML의 기본 구조와 태그에 대해 알아보겠습니다. HTML은 다음과 같은 기본 구조를 가지고 있습니다. 

<!DOCTYPE html>
<html>
<head>
  <title>제목</title>
  <meta charset="utf-8" />
</head>
<body>
  <h1>Hello</h1>
  <div>
    <p>Welcome to HTML world! 저와 함께 html을 배워봅시다.</p>
    <img src="http://www.gravatar.com/avatar/edc1de56da658ae0b919a2d2ee28e26c?s=32&d=retro" />
  </div>
</body>
</html>

간단하게 표현해 봤는데요. 위의 내용을 메모장에 붙여넣고 hello.html로 저장해보세요. (확장자가 txt가 아니라 html이어야 합니다) 그리고 실행하면 위의 내용이 보일겁니다. 아직은 좀 허접하죠?

F12를 눌러 Elements 탭을 한 번 봐보세요. 제 페이지의 html이 나와있습니다. 엄청 복잡하죠? 여러분도 처음에는 간단한 html부터 시작해서 저의 홈페이지처럼 복잡한 html을 만들 수 있게 될 겁니다.

HTML은 태그(tag)로 이루어져있습니다. 태그에는 몇 가지 규칙이 있습니다. 태그는 여는태그닫는태그로 이루어져 있습니다. 닫는 태그는 없는 경우도 있습니다.

<여는태그 속성명="속성값">내용</닫는태그>

위의 예시에서 태그들을 찾아보세요. html, head, title, body, h1, p, img 등이 있네요. 모두 저마다 고유한 기능을 합니다. 마지막 img 태그는 좀 특이하죠? 내용이 없는 대신 태그 안에 src라는 게 들어 있습니다. 이것을 속성이라고 합니다. 태그의 속성을 정해주는 부분입니다. 속성명을 적고 뒤에 속성값을 따옴표 안에 적어줍니다. 따옴표는 큰따옴표든 작은따옴표든 상관 없습니다. src 속성이 뭔지는 아래 img 태그를 설명할 때 알려드리겠습니다.

내용이 없을 때는 닫는태그 대신 여는태그 마지막 부분에 />를 넣어 끝내줍니다. (안 넣어도 됩니다만 저는 닫는 게 있어야 마음이 편합니다)

<여는태그 속성명="속성값" />

태그 안에는 태그가 들어가도 되지만, 반드시 여는태그와 닫는태그의 순서가 일치해야합니다.

<div><p>굿!</p><div>

위의 경우 div 태그가 온전히 p 태그를 감싸고 있습니다.

<div><p>에러</div></p>

위의 경우 p와 div가 꼬여있습니다. 이런 것은 잘못된 겁니다. 단, html에서는 위의 경우 에러를 직접적으로 표시하지 않습니다. html은 좀 관대한 언어입니다. 그래서 오히려 에러를 잡아내지 못해 헤매는 경우가 많습니다. 그래서 항상 바르게 태그를 사용할 수 있도록 주의하세요.

그리고 권장사항도 있습니다. 태그는 소문자로 쓰는 게 좋고, 속성명은 큰따옴표(")로 감싸주는 게 좋습니다.

이제 위의 태그들에 대해 알아볼까요? 그에 앞서 <!DOCTYPE html>부터 알아보겠습니다. 이건 태그처럼 생겼긴 한데 닫는태그도 없고, 그렇다고 여는태그에 />가 붙어있지도 않습니다. 이것의 역할이 뭘까요? 바로 HTML5를 사용함을 브라우저에 알려주는 겁니다. HTML에는 여러 버전이 있습니다. 예전에는 4를 썼지만 요즘은 다 5를 사용하죠. 2014년에 나온 따끈따끈한 버전입니다. 브라우저는 스스로 HTML 문서의 버전을 판단하기 어렵기 때문에 우리가 직접 알려줘야 합니다. 이제 태그들을 살펴보죠.

  • html: 전체 html 문서를 감싸는 태그입니다. 하나만 존재해야 하고 html 바깥에 DOCTYPE을 제외한 다른 태그가 있으면 안 됩니다.
  • head: html 문서에 대한 정보를 나타내는 부분입니다. 하나만 존재해야하고, html 바로 아래에 있어야합니다.
  • body: html 문서에서 실제적으로 보여지는 부분을 나타냅니다. 하나만 존재해야 하고, html 바로 아래, head 다음에 위치해야 합니다.
  • title: head 안에 들어가는 태그로 제목표시줄의 내용을 나타냅니다. 제 홈페이지의 title은 ZeroCho Blog입니다.
  • meta: 문서에 대한 설명을 표시합니다. 사람에게는 보이지 않고, 브라우저만 읽을 수 있습니다. 속성으로 charset="utf-8"이라고 한 것은 브라우저에게 한글 인코딩을 UTF-8로 설정하라고 알린 겁니다. 이 부분이 있어야 한글이 깨지지 않습니다.
  • h1: body 안에서 제목을 표시하는 태그입니다. 중요도에 따라 h1부터 h2, h3, ..., h6까지 있습니다.
  • div: 구역을 표시하는 태그입니다. 눈에 보이지는 않지만 p와 img 태그를 하나의 구역으로 묶었습니다.
  • p: 문단을 표시하는 태그입니다. 여기 안에 글의 내용을 넣으면 됩니다.
  • img: 이미지를 표시하는 태그입니다. 아까 src라는 속성이 있었는데 src는 이미지 파일의 경로(위치)를 지정하는 속성입니다.

이번 시간은 맛보기였고요. 다음 시간에는 본격적으로 태그들에 대해 알아봅시다.

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

1개의 댓글이 있습니다.
2년 전
HTML 한글 깨지는 거 해결하는 거도 올려주시면 고맙겠어요!^^
2년 전
시험 끝나고 보충하겠습니다. 일단 meta charset utf-8을 검색하세요
2년 전
넵ㅋ
2년 전
보충했습니다. 시험은 아직 안 끝났지만요...