왼쪽은 티스토리 글쓰기 화면의 소스 창이고 오른쪽은 네이버 메인 화면의 소스 창입니다. 두 가지 화면만 가지고 일반화시키려면 오류가 있겠지만 공통적으로 보이는 것을 추려보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>...</head>
<body>...</body>
<whale-quicksearch translate ="no">...</whale-quicksearch>
</html>
한 줄씩 보겠습니다.
-<!DOCTYPE html>
-> document type, 즉 문서의 종류가 html이라고 알려주는 역할입니다. 최상단에 위치하여 어떤 언어로 작성되었는지 브라우저에게 선언하는 것입니다. 예컨대 번역기를 돌리려고 해도 어떤 언어인지 입력해야 하는 것처럼 말입니다. 다만 <!DOCTYPE>은 선언일 뿐 태그는 아닙니다. 덧붙여 DOCTYPE은 소문자로 적어도 무방합니다.
-<html lang="ko"> ... </html>
-> 먼저 <!DOCTYPE html>이 브라우저에게 문서의 종류가 html이라고 선언했다면 <html> 태그는 이 html 문서가 어떤 방식으로 쓰였는지에 대해 추가로 이야기해주는 느낌입니다. 그래서 대개 lang 속성이 따라붙습니다. 'lang="ko"'라고 하면 페이지를 구성하는 언어(language)가 한국어(Korean)임을 말하고 있는 것입니다. 예컨대 영어라면 'lang="en"'으로 적으면 될 것입니다. <html> 태그는 다른 모든 정보의 상위에 있어야 하기 때문에 <!DOCTYPE>을 제외하고서 제일 상단에 위치합니다.
-<head> ... </head>
-<body> ... </body>
-> 그리고 내용은 일단 생략하고 <head> 태그와 <body> 태그가 나옵니다. <body> 태그는 구현하고자 하는 정보의 본 내용을 담고 <head> 태그에는 메타데이터라고 부르는 문서 전체에 대한 기본 정보가 들어갑니다. 메타데이터로는 스타일이나 제목 같은 예가 있습니다.
위 화면은 티스토리 글쓰기 창에서 <head> 태그를 열어본 것입니다. 아까 말했던 제목(<title>), 스타일(<style>)이 얼핏 보입니다. <link> 태그도 보이는데 스타일시트를 외부 링크에서 가져오는 것으로 유추 가능해 보입니다.
<meta charset="UTF-8">
-> 이것도 여러 문서에서 공통적으로 보이는 부분입니다. 문자 인코딩 방식이 'UTF-8'이라는 의미인데 '그렇구나' 하고 넘어가겠습니다. 참고로 <meta>는 스타일이나 링크처럼 다른 태그로 담을 수 없는 메타데어터를 담을 수 있는 태그입니다.
<whale-quicksearch translate ="no">...</whale-quicksearch>
-> 제가 쓰는 웨일 브라우저랑 연관된 것으로 보입니다. 크롬이나 마이크로소프트 엣지에서 네이버나 다른 사이트에 접속하면 보이지 않는 것을 확인했습니다. 이처럼 브라우저와 연관되는 태그도 있겠구나 생각해봅니다.
'IT > 웹언어' 카테고리의 다른 글
| [HTML] 개행 태그 (p, br) (0) | 2022.10.08 |
|---|---|
| [HTML] 기본 꾸미기 태그 (b, strong, i, em, mark, u, s, del, small, big) (0) | 2022.09.29 |
| [HTML] 태그 정리 (head 태그 속 태그- title, style, base, link, meta, script, noscript) (0) | 2022.09.27 |
| [HTML] HTML 기본 문법 태그(tag) (0) | 2022.09.19 |
| HTML, CSS, JavaScript 간단 정리 (0) | 2022.09.18 |