티스토리 뷰

WEB BASIC

[HTML] Web1 : 웹페이지 구조 title, body, head, html tag

하이하이2222 2020. 2. 25. 22:04

이번 수업에서는 웹페이지의 구조에 대해서 배웠다.

html에서 웹페이지는 기본적인 구조를 가지는데 이번 수업시간에서 배운 구조는 이러하다.

 

--------------------------------

<!doctype html>

<html>

   <head>

<title></title>

<meta charset = "utf-8">

    </head>

        <body></body>

</html>

 

------------------------------

 

이 구조에 대해서 설명을 하자면

 

<!doctype html> : 이 웹 페이지는 html으로 만들어졌다.

<html>

   <head>

<title> 제목을 적어라~ </title> : 말 그대로 제목태그이다!

    </head>

        <body></body>

</html>

 

또한 웹페이지에게 이 글은 utf-8로 만들어졌기 때문에 utf-8로 열어야 해~라고 말하는 태그를 배웠다.

<meta charset = "utf-8">

우리가 쓰는 글은 한글이기 때문에 한글을 쓰면 웹상에서 이상하게 표현되는 경우가 있는데

이 경우는 인식하지 못해서라고 한다. 더 자세한 건 안알려줬다.

지금 단계에서는 그냥 이정도만 알고 있으면 되는건가 보다.

 

charset = character set 을 뜻한다.

 

이러한 지식을 이용해서 구글의 페이지 소스를 살펴보았다.

진짜 간단한 구글 메인 화면 검색창만 있는 화면인데 head까지 이렇게나 많은 소스가 들어있었다.

언젠가는 이걸 해석할 수 있는 날이 오겠지.....?

빨간 상자 처리하다가 <html>을 빼먹었는데 <!doctype html>밑에 있는 것을 확인할 수 있다.

 

이 부분은 구글의 <body> 부분이다. 내용은 전혀 알 수 없지만 수많은 div가 보여서 궁금해서 검색해봤다.

검색해보니까 영역과 틀과 관련된 태그인 것 같다. 자세히는 보지않았다. 어차피 나중에 생활코딩에서 알려줄거 같기 때문이다. 그리고 이제 마지막으로 구글의 맨 밑 부분을 확인했다.

 

세계적인 웹사이트인 구글도 오늘 내가 배운 구조안에 있었다.

이고잉님처럼 비유를 해보자면 나는 오늘 영어 알파벳이 A부터 Z까지 있구나! 라는 느낌을 받았다.

비록 A부터 Z까지 뭐가 있는 지는 하나도 모르지만 말이다. 그래도 기분이 좋다.

무언가를 배웠다는 거 자체에..ㅎㅎ

 

'WEB BASIC' 카테고리의 다른 글

[HTML] Web1 : 웹사이트 완성  (0) 2020.02.26
[HTML] Web1 : 링크 태그 <a> 사이트 연결하기  (0) 2020.02.25
[HTML] Web1 : 항상 붙어다니는 tag ; 목차태그 li,ul,ol  (0) 2020.02.24
[HTML] Web1 : 최후의 문법 속성과 img, 문서에 이미지 넣는 법 2  (0) 2020.02.24
[HTML] Web1 : 최후의 문법 속성과 img, 문서에 이미지 넣는 법 1  (0) 2020.02.24
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함