프로그래밍/웹

[Web/HTML] 3. HTML 문서의 구조 <head>, <body>, <html>

!!! NOTICE !!!
이 글은 Web의 이론을 다루고 있습니다!
학습한 정보를 제가 기억하고 추후에도 사용해두기 위해 기록해둔 내용입니다!

공부하면서 참고한 사이트
https://opentutorials.org/course/2039/10934

문서의 구조 - 생활코딩

문서의 구조 2015-12-05 21:52:24 예제 HTML - 수업소개 HTML 기술소개 기본문법 하이퍼텍스트와 속성 리스트와 태그의 중첩 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한

opentutorials.org

문서의 구조

지금까지 만들어온 문서를 완성시키면서
문서의 큰 틀의 체계를 알아보자

시작하기에 앞서,
문서를 만들기 위한 소스를 불려와
문서처럼 보이도록 골격을 맞추자.

먼저, 문단별로 있는 큰 틀에 <h1>태그를 달아
제목처럼 보이도록 한다.

위에 목차도 있겠다,
이 글 전체를 HTML 이라는 제목을 달아서
문서를 꾸며주자.

똑같이 <h1>태그를 달아주니 아래 제목의 크기가 HTML과 동등한 제목처럼 느껴지기에,
소제목은 <h2> 태그를 달아주자.

또, 문서의 사이트명이 파일명, 파일경로로 표시되고 있다.

대부분의 웹사이트는 이 부분에서
해당 문서의 제목이나 의의를 두고있다.

<title> 태그를 사용하면 이 부분을 수정할 수 있다.

<title>HTML - 수업소개</title>
<h1>HTML</h1>
<ol>
    <li>기술소개</li>
    <li>기본문법</li>
    <li>하이퍼텍스트와 속성</li>
    <li>리스트와 태그의 중첩</li>
</ol>

<h2>수업의 목적</h2>

본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 
선행학습

본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 

<h2>웹애플리케이션 만들기</h2>

위의 수업에서는 웹을 구성하고 있는 여러기술을 얕고 넓게 배웁니다. 각각의 기술들이 어떻게 관계하고 있는지를 알려드리는 것이 위 수업의 목적입니다. 
진도

우리 수업에서는 기본적이고, 중요한 것을 앞에 배치하고 있습니다. 
이 수업을 모두 완주 할 필요 없습니다! 
완주한다고 해도 어차피 전체 지식의 일부일 뿐이기 때문입니다. 
공부할 수 있는 만큼 하다가 바빠지거나, 재미가 없거나, 공부의 의미를 못 느낀다면 나중에 다시 처음부터 보시면 됩니다. 공부를 지속할 수 없어서 처음부분만 여러번 열심히 보게 되는 것이 나쁜 것이 아닙니다. 
어차피 처음 나오는 부분이 제일 중요하거든요.

이 문서를 다른 웹브라우저에서 열게되면 문자 처리 방식이 다른 웹브라우저의 경우,
텍스트가 깨져서 나오는걸 알 수 있다.

이 경우, 해당 문서의 문자는 "유니코드"로 처리한다, 라는 걸 알려주면
오류가 해결될 것이다.

<title>HTML - 수업소개</title>
<meta charset="utf-8">
<h1>HTML</h1>
<ol>
    <li>기술소개</li>
    <li>기본문법</li>
    <li>하이퍼텍스트와 속성</li>
    <li>리스트와 태그의 중첩</li>
</ol>

<h2>수업의 목적</h2>

본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 
선행학습

본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 

<h2>웹애플리케이션 만들기</h2>

위의 수업에서는 웹을 구성하고 있는 여러기술을 얕고 넓게 배웁니다. 각각의 기술들이 어떻게 관계하고 있는지를 알려드리는 것이 위 수업의 목적입니다. 
진도

우리 수업에서는 기본적이고, 중요한 것을 앞에 배치하고 있습니다. 
이 수업을 모두 완주 할 필요 없습니다! 
완주한다고 해도 어차피 전체 지식의 일부일 뿐이기 때문입니다. 
공부할 수 있는 만큼 하다가 바빠지거나, 재미가 없거나, 공부의 의미를 못 느낀다면 나중에 다시 처음부터 보시면 됩니다. 공부를 지속할 수 없어서 처음부분만 여러번 열심히 보게 되는 것이 나쁜 것이 아닙니다. 
어차피 처음 나오는 부분이 제일 중요하거든요.

지금까지 코드를 추가했는데
여기에 추가된 태그들은 서로 성격이 다르다는 것을 알아야한다.

이를 테면, <h1>, <ol>, <li> 태그들은
본문에 영향을 끼치는 태그이다.
본문은 브라우저 내에서 실제로 유저가 접하게 되는 부분을 말한다.

그에 반면, <title>, <meta> 태그들은
본문에 영향을 미치진 않지만, 문서를 꾸며주는 역할을 한다.
문서의 제목이라든지, 문자 출력 방식이라든지, 기타 등등의 부가적인 정보를 말한다.

그렇기에 "부가적인 정보", "본문"이라는 걸 나눠서
체계적으로 정리하기 위해서 사용하게 되는 태그가 있는데
<head> 태그와 <body> 태그이다.

<head>
    <title>HTML - 수업소개</title>
    <meta charset="utf-8">
</head>

<body>
    <h1>HTML</h1>
    <ol>
        <li>기술소개</li>
        <li>기본문법</li>
        <li>하이퍼텍스트와 속성</li>
        <li>리스트와 태그의 중첩</li>
    </ol>

    <h2>수업의 목적</h2>

    본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다.
    선행학습

    본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.

    <h2>웹애플리케이션 만들기</h2>

    위의 수업에서는 웹을 구성하고 있는 여러기술을 얕고 넓게 배웁니다. 각각의 기술들이 어떻게 관계하고 있는지를 알려드리는 것이 위 수업의 목적입니다.
    진도

    우리 수업에서는 기본적이고, 중요한 것을 앞에 배치하고 있습니다.
    이 수업을 모두 완주 할 필요 없습니다!
    완주한다고 해도 어차피 전체 지식의 일부일 뿐이기 때문입니다.
    공부할 수 있는 만큼 하다가 바빠지거나, 재미가 없거나, 공부의 의미를 못 느낀다면 나중에 다시 처음부터 보시면 됩니다. 공부를 지속할 수 없어서 처음부분만 여러번 열심히 보게 되는 것이 나쁜 것이 아닙니다.
    어차피 처음 나오는 부분이 제일 중요하거든요.
</body>

이 두 태그를 사용해서
"본문에 영향을 끼치는 태그를 구별해 각각 <head>, <body> 안에 넣어야 한다,"
라는 걸 약속하면서 앞으로의 문서를 정리해주어야 한다.

따라서, 이 태그들은 다른 태그들과는 달리
가장 바깥에서 사용되는 녀석들이다.

또 하나, 이런식으로 취급되는 태그가 하나 있는데
<html> 태그이다.

<html> 태그는 <head>, <body>를 포함해
전체를 감싸는 태그이다.

정리하자면,
<html> 태그 안에 <head>, <body> 태그가 존재하고
<body> 태그 안에는 본문의 내용,
<head> 태그 안에는 부가적인 데이터를 처리하는 태그를 넣어야 한다.

<html>

<head>
    <title>HTML - 수업소개</title>
    <meta charset="utf-8">
</head>

<body>
    <h1>HTML</h1>
    <ol>
        <li>기술소개</li>
        <li>기본문법</li>
        <li>하이퍼텍스트와 속성</li>
        <li>리스트와 태그의 중첩</li>
    </ol>

    <h2>수업의 목적</h2>

    본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다.
    선행학습

    본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.

    <h2>웹애플리케이션 만들기</h2>

    위의 수업에서는 웹을 구성하고 있는 여러기술을 얕고 넓게 배웁니다. 각각의 기술들이 어떻게 관계하고 있는지를 알려드리는 것이 위 수업의 목적입니다.
    진도

    우리 수업에서는 기본적이고, 중요한 것을 앞에 배치하고 있습니다.
    이 수업을 모두 완주 할 필요 없습니다!
    완주한다고 해도 어차피 전체 지식의 일부일 뿐이기 때문입니다.
    공부할 수 있는 만큼 하다가 바빠지거나, 재미가 없거나, 공부의 의미를 못 느낀다면 나중에 다시 처음부터 보시면 됩니다. 공부를 지속할 수 없어서 처음부분만 여러번 열심히 보게 되는 것이 나쁜 것이 아닙니다.
    어차피 처음 나오는 부분이 제일 중요하거든요.
</body>

</html>

저작자표시 비영리 변경금지

'프로그래밍 > 웹' 카테고리의 다른 글

[Web/HTML] 6. 개발 도구와 HTML의 변천사, 통계 (0)	2021.06.06
[Web/HTML] 5. 웹사이트 만들어보기 (0)	2021.06.06
[Web/HTML] 4. DOCTYPE (0)	2021.06.06
[Web/HTML] 2. 중첩 태그 (0)	2021.06.02
[Web/HTML] 1. 태그와 속성 (0)	2021.06.02

Contents

새소식

인기 검색어

[Web/HTML] 3. HTML 문서의 구조 <head>, <body>, <html>

문서의 구조

'프로그래밍 > 웹' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바