생활코딩 WEB1 - 13. 문서의구조와 슈퍼스타들 > HTML

생활코딩 | WEB1 - 13. 문서의구조와 슈퍼스타들

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

생활코딩님의 HTML강의 청각장애인을 위한 자막

제가 여러분께 여러분은 html 문법을 마스터 했다고 말씀 드렸던 것

기억나시죠
말하자면 여러분은 문장을 완성하는 법을 마스터 햇다고 할 수 있습니다
더 복잡한 것은 단언컨대 존재하지 않습니다
그리고 원장이 모이면 뭐가 되나요 페이지가 되죠
페이지가 모이면 책이 되고요 책에는 표지가 있고 표지에는 제목과 저자가
표기됩니다
이처럼 정보가 많아짐에 따라서 그 정보를 잘 정리 정돈 하기 위한 책이
모금 구조라는 것이 필요한데요
이번 시간에는 그 구조를 만드는 방법을 살펴보도록 하겠습니다
자 여기에 우리의 html 태그 랭킹이 표현 되고 있는데요 그 중에서
여러분이 중에서 상당히 많은 태그를 이미
알게 된 상태죠 축하 드립니다 아 그런데 이 중에서 정말 빈도 쓰 가
압도적으로 높은
말하자면 슈퍼 스타들의 대해서는 제가 의도적으로 언급하지 않았습니다
이번 시간에는 바로 전 슈퍼스타들이 누구인가를 살펴보는 정말로 중요한
시간이라고 할 수가 있겠습니다
자 우리가 만든 웹 페이지의 제목을 한번 보시죠
우리의 제목은 이웃들의 제목과 비교했을 때 좀 부끄러워요
어떤 점이 그럴까요 이웃들은
내용을 찰 표현하는 제목을 표시하고 있고 반면에 우리는
파일명이 제목 이란 말이에요
쭉 그렇지 않나요

그래서 요거 를 해결하는 방법을 제가 여러분들에게 소개해 드리겠습니다
자 이렇게 띄우고
어제 목을 제가 음 웹
웹 원 html 이라는 제목을 하고 싶다 그럼 요거요거 를 타이틀이라는
태그로 이렇게 감싸는 거에요
저장 그리고 리로드 해보면 보시는 것처럼 짜잔
제목이 잘 표시된 것을 볼 수가 있습니다
적 있니 title 라고 하는 태그를 사용하면
여러분이 웹페이지에 그 제목을 사용자에게 명시적으로 알려줄 수 있을 뿐만
아니라 검색 엔진과 같은 기계들은
바로 이 title 라고 하는 것을 책으로 치면 책 표지와 같은 정보로
사용합니다
그렇기 때문에 여러분이 웹페이지를 만들때 타이틀이라 응고 않은 태그를
쓰지 않는 것은 굉장히 굉장히 손해가 되는 거예요
무슨 말인지 아시겠죠 자 그리고 제가 여기에다가
음 예를 들어서 html 이란 무엇인가 로 제목을 바꿔 보겠습니다
한국어 나왔죠 항구 겁니다
자 리로드 하면 어떤 결과가 나오나요
보시는 것처럼 여기에 있는 이 한국어 문자와
실제로 출력된 결과가 다릅니다
왜 그러냐면 우리가 여기 있는 정보를 이렇게 글씨로 작성하면
적이 있는 글씨 그대로가 컴퓨터에 저장되는 게 아닙니다 여러분 아마
들어보셨을 법한 얘기인 4
컴퓨터는 모든 정보를 0 아니면 일로 최종적으로 저장합니다
그런데 그 0과 1을 어떻게 저장할 것인지에 대한 여러가지 약속들이
존재하는데 그 약속 중의 하나가 요 밑에 있는 utf-8 입니다
여러분 utf-8 이 뭔지 몰라도 됩니다
하지만 현재 우리가 작성한 이 파일은
무엇인지는 잘 모르겠지만 어쨌든 utf-8 이라는 방식으로 처장 된
상태예요
그렇다면 우리가 작성한 이 파일을 웹브라우저가 열 때도
유치 f 팔로 열어야 지만 문제가 없지 않겠어요
그래서 우리가 웹브라우저 에게
웹브라우저 야 이 웹 페이지를 열 때는
utf 팔로 열려 미 라고 얘기할 때는 이렇게 하는 겁니다
페타
페이스를 침 어떻게 되요
우리가 그 다음에 해야 될 것들을 추천 해주죠
자극 어비스 그 중에서 utf-8 괄호
이렇게 하고 리로드를 해보면 어떻게 되나요
짜잔 글씨가 안 깨지는 것을 볼 수가 있습니다
자 이것이 바로 utf-8 이라는 겁니다
자 여기서 캐릭터 셋은 캐릭터는 문자는 뜻이고 셋은 규칙 이라는 뜻이죠
즉 utf 팔로 문서를 읽어라 라고
여러분이 브라우저에게 얘기를 해 준 겁니다
자 보시죠 여러분 여기 있는 이 두 줄의 고드 워 2 밑에 있는 코드들
사이에는 사실은 차이가 있어요 그렇기 때문에 제가 저기를 띄어쓰기 한
겁니다
어떤 차이가 있을까요
밑에 있는 이 코드들은
본문입니다
반면에 이 위에 있는 코드들은
본문 을 설명 해요
즉 타이틀이라고 하는 태그는 본문의 제목이 무엇인지를 설명하고 있고
그리고 맥 타 캐릭터셋 utf-8 이라는 것은 이 본문이 utf-8
이라는 방식으로 저장 되어 있다라는 것을 설명합니다
html 을 만든 사람들은
음 본문은 바디 라는 태그로 묵기로 약속했습니다
여러분은 그렇게 해야 돼요
이것은 자연의 법칙니라 사람 사이에 약속입니다
그리고 본문을 설명하는 다시 말해서 바디를 설명하는 태그는
헤드 태그로 묻기로 약속했어요
그럼 여러분은 그렇게 하셔야 됩니다
즉 html 에 있는 모든 태그는
헤드 태그 또는 바디 태그 이 둘 중에 하나 아래에 놓이게 된다 라는
겁니다
그런 점에서 바디 태그 하이디 태그는 상당히 고위직 태그 라고 할 수
있습니다
그리고 이 고위직 태그 들 을 감싸는 단 하나의 최고위층 태그가 있는데
그것이 바로
html 이라는 태그입니다
그리고 html 이랑 태그 위에다가 관용적으로 이렇게 써 주시면 됩니다
이 문서는 html 있다 라는 뜻에서 느낌표 또 타입
html 이라고 써주시면 됩니다
자 그러면 여러분이 매일 같이 방문하는 웹 사이트를 아무데도 한번 가
보십시오
그리고 웹 페이지에서 오른쪽 클릭을 하고 뷰페이지 소 스
라고 해 보시면 페이지 소스 보기 가 나올 겁니다
그리고 좀 이렇게 비디오를 갔어요
거기에 있는 내용을 암 번 각자 보십시오
젤 위에 topic html 이 보이는
그리고 그 밑에는 html 태그가 있을 건데요
그리고 html 태그 밑에는 분명히
높은 확률로 헤드 태그가 있을 겁니다 즉 내려가 보시면 카이트 도 있을
것이고
메타 도 있을 수도 있고 없을 수도 있을 겁니다
그리고 쭉 내려가 본 바디 테크가 나올겁니다
어때요 여러분은 지금 이 슈퍼스타 에 해당되는 태그들을 배움으로써
전세계에 있는 거의 모든 웹 페이지들이
가지고 있는 구조를 파악하게 된 겁니다
저는 우리가 공부를 했을 때 얻을 수 있는 중요한 효용 으로
눈이 밝아진다 고 생각합니다 시력이 좋아져요
옛날에는 보이지 않았던 것이 보이기 시작한다.는 것이죠
떨리지 않았던 것이 들리기 시작하고 요
여러분은 그런 혁명적인
어 능력을 갖게 된 것입니다
축하드려요 자 이렇게 해서 우리는 html 의 구조를
작성하는 방법을 살펴 보았구요 그리고 그 과정에서
정말 빈도수가 높은 태그들을 살펴봤습니다
것에 하셨어요.