WEB1 - HTML & Internet

문서의 구조와 슈퍼스타들

 

 

 

---

 

 

우리는 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. 내이름은이한샘
    축하드려용 할 때 마다 성장하는 기분이 듭니다. 이고잉 선생님 매번 좋은 영상강의 감사합니다. 새해 복 많이 받으세요.!!
  2. Jaehyun Kim
    와 눈이 밝아졌다!!!! *_*
  3. chaebeolkim
    훌륭한 강의 잘듣고 있습니다~~
  4. 김현
    넘 이해잘가고 재밌어요 ㅠㅠ 완강한뒤에 한번 더 들으면서 공부할겁니다. 최고...최고.ㅠㅠ
  5. LuminousCoding
    <ol> 태그의 경우 숫자 바로 뒤의 점이 각 리스트의 좌우를 구분하는 축이라고 보시면 되는데, 영상에서 숫자 '1'의 경우 2나 3에 비해 폭이 좁기 때문에(하지만 브라우저마다, 혹은 폰트마다 다를 수 있습니다) 점을 기준으로 하였을 때 살짝 오른쪽으로 들어간 것 같이 보이는 것이라고 생각하시면 되겠습니다.

    경주님이 한번 ol 태그 아래에 li 태그를 15개 정도 만들어보시고 확인해보시면 이해가 잘 되실 겁니다.
    대화보기
    • LuminousCoding
      HTML5를 사용하는 최신 브라우저에서는 대부분 기본 인코딩 방식으로 UTF-8을 채택하고 있습니다. 그 이전의 버전을 사용하는 브라우저는 많이 없지만 몇몇 브라우저에서는 적용되지 않을 수 있습니다.
      대화보기
      • 설렁탕
        잘 봤습니다!!
      • 김민승
        슈퍼스타급 태크를 통해서 html의 전체적인 구조에 대해서 학습하였습니다.
      • chingguhl@naver.com
        전 메타 캐릭터셋 utf-8 하지않아도 한글로 나오네용!!!!
      • egoing
        반영했습니다! 감사해요 :)
        대화보기
        • 산클
          벼락치기 갑니다. 근데 이거 나중에 또 들을 수 있겠지요?
        • 이수민
          정말 설명을 잘해주시는 것 같아요!
        • Jihyun Lee
          완주까지 고고
        • 이피
          보이지 않는것이 보이게 될때까지~~
        • 경주
          궁금한 점이 있는데요,
          list 1~3번까지 <li>로 적었을 때(<u>에디터에</u>)
          1. HTML은 왜 한 칸 띄어쓰기((<u>웹페이지에</u>))가 되어 있는지 궁금합니다.
          (01:35초 경 보시면 1번만 조금 안으로 들어가 있네요..?)
        • 이근환
          좋은 강의 감사드립니다!
        • 한재민
          밀렸다가 완주를 위해 또다시 달리고 있습니다.
          유익한 내용이라서 이대로 흘려보내기가 아깝습니다.
          매일 좋은 강의 듣습니다.
        • 차녕
          휴일. 그동안 일 때문에 못했던 공부. 벼락치기로 갑니다...
        • 윤장원
          감사합니다!
        • 김재학
          정말 눈이 밝아지는 느낌 입니다!!
        • home4u
          잘 봤습니다. 웹페이지 구조와 가장 많이 쓰이는 태그 3개를 알게되니 시야가 달라지는것 같습니다.
        • 감사합니다. 막연히 알고 있던 내용들이 정리가 됩니다.
        • 두둥
          강의가 귀에 쏙쏙 들어와요!!! 감사합니다 :)
        • 팽석
          너무 재밌네요!!!! 점점 빠져듭니다!!!
        • seokhee
          재밌다재밌어!
        • 컵케익
          잘 보았습니다. 감사합니다!
        • 180111 감사합니다!
        • 야학3
          중간에 오타 발견했네요 ㅎㅎ

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

          알아듣게* 라고 고쳐야할것같습니다 :) 별거 아니지만 도움이 될까해서 남깁니다!
        • 코딩학습생
          잘 봤습니다~
        • 세왕
          html, head, title, body 태그에 대해 학습했습니다^^

          진도가 술술나가네요 정말 재밋습니다!
        • 김민영
          잘봤습니다!~
        • aimerthis(이성민)
          역시 스타태그네용 ^^
        • 좋은 수업 잘 들었어요. 코딩 쌩초보 쌩입문자에게 항상 좋은 말씀 따뜻한 말 한마디가 너무너무 힘이 됩니다..! 감사합니다^^
        • Kwangsoo Koh
          잘 배웠습니다 ^^
        • 완료!
        • goosen
          많이배우고갑니다 감사합니다^^
        • 많은것을 알고 배운것 같아 기분이 좋네요 ~^^
          하지만 좀 어렵기도 헷갈리기도 하네요 ㅠㅠ
        • 김정윤
          감사합니다~!
        • PassionOfStudy
          html, head, body, title, meta 태그~


          2018-01-08 - 두 번째 수강완료!
        • 유건우
          W재미있어요
        • 감사합니다!
          대화보기
          • Seonghee Park
            강의가 귀에 쏙쏙 들어와 공부하기 정말 좋아요. 명강의!
          • 비오비
            좋은 강의 감사합니다!
          • Jayeong Jeon
            감사합니다
          • 이수현
            감사합니다.:)
          • 상원중 건축자
            감사합니당
          • 최동희
            웹브라우저의 기본 인코딩 설정이 "utf-8"로 되어 있는 경우에는"utf-8"로 저장된 한글이 meta 태그 설정 없이도 제대로 표시됩니다. 하지만 다양한 웹브라우저가 모두 ""utf-8"을 기본으로 설정되어있지는 않기에, "utf-8"로 저장한 html 파일에는 '<meta charset="utf-8" />'를 포함하는 것이 좋습니다. 그리고, "euc-kr"이 기본으로 설정되어 있는 브라우저에서는 "euc-kr"로 저장된 한글이 meta 태그 설정 없이도 제대로 표시되는데, 이 경우에도 '<meta charset="euc-kr" />'를 명시적으로 포함하는것이 좋습니다.
            대화보기
            • koreano1cfp@paran.com
              저는 "<meta charset="utf-8">"를 추가하지 않아도, 한글로 제대로 표기가 되던데요?
              이상해서 질문해 봅니다.
            • koreano1cfp@paran.com
              "우리는 HTML의 문법을 마스터했다고 말씀 드렸습니다."
              위에서는 "말씀 드렸습니다."를 "말씀드렸습니다."로 수정해야 함.

              "더 복잡한 것은 단언컨데 존재하지 않습니다."
              위에서는 "단언컨데"를 "단언컨대"로 수정해야 함.

              "표지에는 제목과 저자가 표기 됩니다."
              위에서는 "표기 됩니다."를 "표기됩니다."로 수정해야 함.

              "웹브라우저의 탭을 한번 보세요."
              위에서는 "한번"을 "한 번"으로 수정해야 함.

              "아래와 같이 검색해보세요."
              위에서는 "검색해보세요."를 "검색해 보세요."로 수정해야 함.

              "title이라는 태그를 사용해보세요."
              위에서는 "사용해보세요."를 "사용해 보세요."로 수정해야 함.

              "내용을 잘 반영하게 될꺼예요.
              위에서는 "될꺼예요."를 "될 거에요."로 수정해야 함.

              "아래와 같이 문자가 깨지는 경우가 있을꺼예요."
              위에서는 "있을꺼예요."를 "있을 거에요."로 수정해야 함.

              "아래와 같이 UTF-8이라고 적혀있는 것 보이시나요?"
              위에서는 "적혀있는"을 "적혀 있는"으로 수정해야 함.

              "웹브라우저에게 이렇게 말해주면 됩니다."
              위에서는 "말해주면"을 "말해 주면"으로 수정해야 함.

              "자주 방문하는 아무 웹사이트나 방문해보세요."
              위에서는 "방문해보세요."를 "방문해 보세요."로 수정해야 함.

              "오른쪽 클릭을 해서 소스보기를 해보세요."
              위에서는 "해보세요."를 "해 보세요."로 수정해야 함.

              "이렇게해서 여러분은 전세계의 수 많은 웹페이지들이"
              위에서는 "이렇게해서"를 "이렇게 해서"로 수정해야 함.
            • 요시코
              축하드려요~ 유행어로 미시는건가욬ㅋㅋ
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기