생활코딩 - <Web> 13 : 책 표지와도 같은 타이틀 태그 title 사용하기, 코딩의 utf-8 라는 파일 형식에 대해,(+meta charset), 본문을 설명하는 body태그와 head태그, 그리고 <!doctype html>
생활코딩 <Web> 공부
이번 포스팅은 생활코딩 WEB1-13강을 공부한 내용을 학습정리하였습니다.
13) html, head, title, body, meta, 그리고 < !doctype html > (문서의 구조와 슈퍼스타들)
우리는 HTML의 문법을 마스터한 상태이다.
즉, 문장을 완성하는 법을 마스터했다고 할 수 있다.
문장은 모이면 페이지가 된다.
페이지가 모이면 책이 된다.
책에는 표지가 있고, 표지에는 제목과 저자가 표기된다.
이처럼 정보가 많아짐에 따라서
이 정보를 잘 정리 정돈하기 위한 체계, 혹은 구조라는 것이 필요하다.
13강에서는 구조를 만드는 방법에 대해서 공부할 것이다.
위 통계자료에서의 가장 많이 사용하는 태그의 랭킹을 보면, 맨 위부터
< head >
< body >
< html >
< title >
< meta >
태그가 나열되어 있다.
빈도수가 압도적으로 높은 태그순이다.
이 슈퍼스타 태그들이 무엇인지, 어떻게 쓰이는지에 대해서 알아보자.
< title >, < / title > : 제목 태그
우리가 만들고 있는 페이지를 보다보면,
다른 웹 사이트의 어떤 페이지들 보다도 뭔가 부족하다는것을 느낀다.
다른 웹사이트의 페이지는 내용을 잘 표현하는 제목을 표시하고 있고,
우리가 만든 페이지는 ' 파일명 ' 이 곧 제목이다.
제목을 만들어주기 위해
' WEB1 - html ' 이라는 글을 적고
열리는 태그와 닫히는 태그로
양 사이드에 < title > < / title > 이라는 타이틀 태그를 입력해준다.
그런다음 저장(Ctrl+s)하고 웹페이지를 새로고침 해주면
웹페이지에 제목이 WEB1-html 으로 바뀐 것을 확인할 수 있다.
< title > 이라고 하는 태그를 사용하면 웹페이지의 제목을
사용자에게 명시적으로 알려줄 수 있을 뿐만 아니라
검색 엔진과 같은 기계들은 바로 이 < title > 이라는 것을
책으로 치면 책 표지와 같은 정보로 사용한다.
그렇기 때문에 우리가 웹 페이지를 만들 때 < title > 태그를 사용하지 않는 것은
굉장히 손해보는 일이라고도 볼 수 있겠다.
아래 < h1 > < /h1 > 이라고 적은 태그에서
HTML 옆에 한글로 ' 이란 무엇인가? ' 를 추가로 입력해보았다.
html 이란 무엇인가? 를 웹페이지에 나타내기 위해서이다.
저장한 후 웹 페이지를 새로고침 하면
웹페이지에서의 한글이 오류가 뜬 것 처럼 나온다.
한국어 문자와 실제로 출력된 결과가 다르게 나오는 이유는
편집 에디터에서 ' 이란 무엇인가? ' 라는 글씨를 작성하면
이 글씨 그대로 컴퓨터에 저장되는 것이 아니기 때문이다.
컴퓨터는 모든 정보를 0 아니면 1로 최종적 저장을 하는데
이 0과 1을 어떻게 저장할 것인지에 대한 여러가지 약속들이 존재한다.
편집에디터의 오른쪽 아래를 자세히 보면
UTF-8 이라는 것이 있다.
이 utf-8 이 무엇인지는 몰라도 상관없다.
하지만 우리가 작성한 이 < html > 편집 파일은
utf-8 이라는 형식의 파일로 저장된 상태이다.
컴퓨터 프로그램 파일에는 '형식' 이라는게 존재하지 않는가?
.jpg
.pgm
.gif
코딩 편집 프로그램에서 지금 우리가 편집중인 이 파일의 형식은 오른쪽 아래에 나와있으며
이 형식은 < UTF-8 > 이라는 것이다.
그렇다면, 이 코드를 작성한 파일을 웹페이지에서 열 때도
< UTF-8 > 형식으로 열어야 문제 없이 열린다는 뜻이다.
웹페이지에게 " 내가 한글로 쓴 내용을 포함한 코드를 utf-8 형식으로 열어서 보여줘! "
라고 명령(입력) 할 때에는
< title > 타이틀 태그 밑에 줄에 meta 라고 적고
meta (띄어쓰기) ch (까지 적으면 아래 charset < meta > 라고 뜨는 단어가 자동으로 뜬다) 을 선택한다.
그리고 = " utf-8 " 을 입력 후 괄호를 닫아준다.
< meta charset = "utf-8" > 이라고 입력이 끝났다면
저장한 뒤 웹페이지에서 새로고침 해주자.
이렇게 한글이 웹페이지에서 깨지지않고 결과가 잘 나타나는 것을 볼 수 있다.
이게 바로 utf-8 형식을 코드를 입력하여 웹페이지로 보이게 하는 것이다.
여기서 charset 의
character(캐릭터) 는 문자라는 뜻이고
set(세트) 는 규칙 이라는 뜻으로 쓰이는데
이를 합친 CHARSET 은 즉,
" UTF-8 로 문서를 읽어라 "
라고 웹페이지에게 명령(코드입력)한 것과 같다.
위의 두 줄의 코드와
아래쪽의 코드들 사이에는 차이가 있다.
그렇기 때문에 가운데 띄어쓰기를 해놓은 것인데,
아래쪽의 코드들은 < 본문 > 이다.
반면에 위의 두 줄 코드는 < 본문을 설명 > 한다.
즉, < title > 이라고 하는 태그는 " 본문의 제목이 무엇인지를 설명 " 하고 있고
그리고 < meta charset="utf-8" > 이라는 것은
이 < 본문 > 이 ' utf-8 ' 이라는 방식으로 저장되어 있다,
라는 것을 설명한다.
HTML을 만든 사람들은 이 < 본문 > 을 < body > 라는 태그로 묶기로 약속했다.
아래쪽의 코드들인 < 본문 > 내용에,
열리는 태그 < body > 와 닫히는 태그 < / body > 를 입력해준다.
그리고 < 본문을 설명 > 하는 위의 두 줄 태그
즉, 바디를 설명하는 태그에는 < head > < / head > 태그를 입력하여야 한다.
HTML에 있는 모든 태그는
< head > 태그, 또는 < body > 태그
이 둘 중 하나 아래에 놓이게 된다.
이런 점에서 이 두 태그(head태그와 body태그)는 상당히 고위직 태그라고 볼 수 있다.
그리고 이 고위직 태그들을 감싸는 단 하나의 최고위층 태그가 있는데
이것이 바로 < html > < / html > 이라는 태그이다.
그리고 이 < html > 이라는 태그 위에 관용적인 표현이며 이 문서는 HTML 이다, 라고 알려주는
< ! doctype html > 를 적어주면 된다.
정리하자면 위의 이미지와 같다.
< !doctype html >
< html >
< head >
본문을 설명하는 태그
< /head >
< body >
본문
< /body >
< /html >
실제로 이렇게 쓰여지고 있는 코드의 예를 보고 싶다면
아무 웹 사이트에 들어가 오른쪽 마우스 - 페이지 소스 보기를 눌러 확인하면 된다.
나는 '네0버' 검색엔진 사이트에서 페이지 보기를 해보았다.
페이지 소스에 나오는 코드 내용 중
가장 맨 위에 보이는 것이 무엇인가?
< !doctype heml > 와
그 아래 < html > 태그
그 아래에는 < head > 태그가 있고
< title > , < meta >
아래를 더 내리다 보면 < body > 태그가 있을 확률이 높다.
우리는 이렇게 빈도수가 압도적으로 높은 태그들을 배우면서
전 세계에 있는 거의 모든 웹 페이지들이 가지고 있는 구조를 파악하게 되었다.
우리는 공부하면서 얻을 수 있는 중요한 효용으로 눈이 밝아짐을 느낄 수 있을 것이다.
옛날에는 보이지 않았던 것이 보이기 시작하고, 들리기 시작하는 능력을 가지게 된 것이다.
