생활코딩

Coding Everybody

코스 전체목록

닫기

문서의 구조와 슈퍼스타들

 

 

 

---

 

 

우리는 HTML의 문법을 마스터했다고
말씀드렸습니다.
말하자면
문장을 만드는 방법을 마스터했다고 할 수 있습니다.
더 복잡한 것은 단언컨대 존재하지 않습니다.

문장이 모이면 무엇이 되나요?
페이지가 됩니다.
페이지가 모이면 책이 됩니다.

 

 

책에는 표지가 있고,
표지에는 제목과 저자가 표기됩니다.

이처럼 정보가 많아짐에 따라서
정보를 잘 정리정돈하기 위한 체계,
다시 말해서 구조라는 것이 필요합니다.
이번 시간에는 그 구조 만드는 법을 살펴볼 것입니다.

한편 지금까지 설명드리지 않았던
빈도수가 가장 높은 슈퍼스타들의 정체도
드러날 것입니다.

 

 

우리가 만든 웹페이지가 표시되고 있는
웹브라우저의 탭을 한 번 보세요.
좀 부끄럽지 않나요?

 

 

여러분이 만든 웹페이지의 이웃들은
제목이 내용을 잘 표현하고 있습니다.

 

 

그런데 우리는 파일명이 제목이란 말이죠.
빨리 이 부끄러운 상황에서 빠져나갑시다.
아래와 같이 검색해 보세요.

 

html title

 

제목을 지정하기 위해서는
title이라는 태그를 사용해 보세요.
그럼 웹페이지의 제목이
내용을 잘 반영하게 될 거에요.

 

 

특히 title 태그는
검색엔진이 웹페이지를 분석할 때
가장 중요하게 생각하는 태그이기 때문에
title 태그를 쓰지 않으면 정말 큰 손해랍니다.

 

 

또 영어가 아닌 문자로 웹페이지를 만들면
아래와 같이 문자가 깨지는 경우가 있을 거에요.

 

 

에디터의 하단을 보시면
아래와 같이 UTF-8이라고 적혀 있는 것
보이시나요?
(안 보여도 됩니다)

 

 

저건 이 웹페이지가
UTF-8 방식으로 저장되었다는 뜻입니다.
UTF-8이 무엇인지 모르셔도 됩니다.

 

 

하지만 이 웹페이지를 UTF-8로 저장했다면
웹페이지를 열 때도 UTF-8 방식으로
해석해서 열어야 한다는 것은 이해할 수 있겠죠?

 

 

영어가 아닌 문자가 깨지는 이유는
웹페이지가 저장된 문자 표현 방식과
웹브라우저가 웹페이지를 해석하는 방식이 일치하지 않을 때
웹브라우저는 저렇게 이상한 문자를 표시하게 됩니다.

 

 

이 문제를 해결하기 위해서는
웹브라우저에게 이렇게 말해 주면 됩니다.

 

 

웹브라우저야
이 웹페이지는
UTF-8로 만들어졌기 때문에
UTF-8로 열어야 해~
이것을 웹브라우저가 알아듣게 해야 합니다.

 

 

아래처럼요..

 

 

이번 시간에  추가한 두줄의 코드는
그 외의 코드와 구분됩니다.
어떤 점이 구분되나요?

 

 

아래의 코드는 본문이 아닙니다.
본문을 설명합니다.

<title>WEB1 - html</title>
<meta charset="utf-8">

 

 

HTML을 만든 사람들은
본문과 본문을 설명하는 정보를
각기 다른 태그로 분리해서
정리 정돈하기로 했습니다.
그럼 우리는 거기에 따르면 됩니다.

 

 

본문은 body 태그로
본문을 설명하는 태그는 head 태그를
사용합니다.

 

 


body 태그와
head 태그를 감싸는
하나의 태그를 두기로 약속했습니다.
html 태그 입니다.

 

 

또 이 웹페이지가
HTML로서 만들어졌다는 것을
표현하기 위해서  문서의 시작에 아래와 같은 코드를 추가합니다.
<!doctype html>

변경사항

 

 

이렇게 해서
웹페이지를 구조를 완성했습니다.

 

 

자주 방문하는 아무 웹사이트나 방문해 보세요.
오른쪽 클릭을 해서 소스보기를 해 보세요.

 

 

제일 위에
<!doctype html>이 보이시죠?
그 아래에는 html 태그가 있죠?
html 태그 아래에는
head, body 태그가 있을 것입니다.

 

 

공부를 하면
이렇게
눈이 밝아지고
시력이 좋아집니다.
예전에는
보이지 않았던 것이 보입니다.

또 들리지 않았던 것이 들립니다. 

이렇게 해서
여러분은
전세계의 수 많은 웹페이지들이
공통적으로 가지고 있는
구조를 완전히 마스터했습니다.

 

 

또,
가장 빈도수가 높은 태그들을 알게 되었습니다.

 

 

혁명적인 것들을 알게 된 것
축하합니다.

댓글

댓글 본문
  1. 꾹꾸
    <!doctype html>
    <html>
    <head>
    <title> HTML의 구조 </title>
    <meta charset="UTF-8">
    </head>
    <body>
    <p>HTML은 head와 body 태그로 이루어져있다. head는 본문을 설명하는 것으로 예를 들자면 책제목같은 것이다. 그래서 이 안에 title이 들어간다. body는 책 안에 들어 있는 내용들, 즉 본문이다. !doctype html은 html로 이 문서가 만들어졌다는 것을 뜻하고 meta charset="UTF-8" UTF-8방식으로 문서를 읽어내리라는 지시다. 이 모든 걸 묶어 책으로 내면 html이다.</p>
    </body>
    </html>

    복습하면서 다시 가고 있는데 html로 한꺼번에 묶인다는 걸 잊고 있었네요. 복습의 중요성!
  2. 조건희
    완료
  3. 프로그래머 김민찌
    완료
  4. 서동규
    0406 완료
  5. PGKR
    이 사이트의 제작자 님,
    이 사이트는 코딩을 하고싶다는 마음은 있었지만 어디서 부터 시작해야 할지 몰랐던 저를 제대로 배울 수 있는 길로 들어서게 해준 고마운 친구입니다.
    앞으로도 좋은 사이트 많이 만들어 주시면 감사하겠습니다!
    제작자님, 고맙습니다~
  6. PGKR
    이 사이트에 정말 감사하고 있습니다.
  7. Marine
    진심으로 감사드립니다.
  8. 사랑합니다 이고잉님
    감사하다는 말씀을 이렇게밖에 전해드릴 방법이 없네요ㅠㅠㅠ
  9. 완료
  10. 루몽
    완료
  11. 지꿍
    완룟
  12. 태현
    3/30
    감사합니다.
  13. 김경민
    안깨지는 경우도 있나보네요
  14. 꼬미네
    <html></html> 껍데기를 만들어놓고 내용을 바꾸는 식으로 코딩하는 경우가 많기 때문인것 같아요ㅎㅎ
    대화보기
    • ㅇㅇ
      완료
    • 둥치둥치아재
      오늘 하루에만 혁명 13번 했음
    • lovejun
      완료
    • 민새로이
      완료!
    • nable
      완료

      오늘도 생활코딩덕분에 혁명이 시작되었습니다.
    • 김집사
      화이팅 완료
    • 돌멩이
      2020 03 19
      완료
      <!dectype html> html로 이루어졌다는 것을 나타냄
      *<html> head와 body태그를 감쌈
      **<head>
      ***<title> 페이지의 제목을 지정
      ***<meta> 메타 데이타를 정의할 때 사용, charset는 페이지의 문자 인코딩 선언
      **</hard> 본문을 설명하는 코드를 감쌈

      **<body>
      ***본문내용
      **</body> 본문을 감쌈
      *</html>

      앞에 여백이 댓글에 표현이 안되서 *로 적었습니다
    • 하나로야
      완료
    • khi0211
      완료
    • 화이트워커
      3월18일 완료
    • 왜 html태그가 1등이 아닐까요? 상위 태그 일수록 순위가 높아야 될것같은데 큰 차이는 아니지만 html이 3위인 이유가 궁금하네요.
    • MINTO
      3.14 완료
    • OneJae EE
      20.03.12 / 37세 비전공자 / 완료
    • 완료
    • 완료
    • 수성구코딩유망쥬
      ㅇㄹ
    • ㄹㅁ
      완료
    • 네 정상입니다. 오류만 안나면 정상이라고 생각하시면 됩니다(사이트에 내가 한 것이 입력안되어있나 판단)
      그리고 ! 를 쓰고 Tab를 누르면 자동으로 기본적인 것들이 입력됩니다
      대화보기
      • <!doctype html> 을 일력하면 다른 태그와 다르게 글자에 색이 안입혀지는데 정상인가요?
        <html>, <head> 등은 붉게 색이 입혀지는데 말이죠
      • 이혜원
        완료!
      • lilyri
        완료
      • carpedKM
        complete
      • 우뿌
        가즈아!!!
      • 김용재
        완료
      • Yohanesty
        완료
      • hanryang
        <!doctype html>
        <html>

        <head>
        <title></title>
        <meta charset="utf-8">
        </head>

        <body>
        <ol>
        <li></li>
        <li></li>
        <li></li>
        </ol>
        </body>

        </html>
      • 넘무
        쉬운게 가장 중요하다는 말씀 다시 되뇌이며 열심히 하고 있습니다!
      • 짱아찌
        완료
      • Horang
        오늘도!
      • 고순조왁굳;
        뭔가 작업한 것들이 눈에 바로바로 보이니까 정말 재밌네요!!!
        비록 어려운건 아니지만,..
        그래도 항상 감사합니다!!!!!!!!
      • 승현
      • Pleasure of Learning
        감사해요
      • 코딩의 마술사
        Thanks!
      • 해영
        감사합니다 강의 잘보고있어요!
      • 영롱
        완료.
      • eddylee123456
        완료
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기