공부를 시작해보자
HTML과 CSS는 프로그래밍 언어가 아니라 구조 언어이다. HTML과 CSS를 입문 할 때 패턴을 살펴보자. 새로운 태그를 익히고 그걸 브라우저로 실행하면서 그때 그때 효과를 확인하는 재미가 있지만... 그것도 한 두번이지 태그의 양이 많아지면 많아질수록 "이걸 다 외워야 하나?" 라는 압박감이 든다. 이를 극복하고자 최고의 교보제들로 HTML과 CSS를 자연스럽게 습득해보려고 한다. 최고의 교보제란 바로 내가 자주 들어가는 페이지의 소스를 까보고 들여다 보는 작업이다. 영어학습에 비유한다면, 개별 단어 하나하나를 외우기 보다는 문장 째로 받아들이는 연습을 하는 것에 대응된다고 볼 수 있다.
구글 페이지로 HTML과 CSS 공부하기
나는 항상 구글 검색 페이지를 들어간다. 별로 할게 없어도 습관적으로 들어가곤 한다. 그런데 HTML 구조가 어떻게 되어 있을까? 이런 의문을 갖고 소스코드를 본적이 한번도 없다. 이번 기회에 구글의 페이지를 들여다 보려고 한다.
<!doctype html>
<html dir="ltr" lang="ko">
<head>
<meta charset="utf-8">
<title>새 탭</title>
<style>
body {
background: #FFFFFF;
margin: 0;
}
#backgroundImage {
border: none;
height: 100%;
pointer-events: none;
position: fixed;
top: 0;
visibility: hidden;
width: 100%;
}
[show-background-image] #backgroundImage {
visibility: visible;
}
</style>
</head>
<body>
<iframe id="backgroundImage"
src="chrome-untrusted://new-tab-page/
custom_background_image?url=https%3A%2F%2Flh5.
googleusercontent.com%2Fproxy%
2FE60bugMrz3Jw0Ty3vD1HqfrrabnAQGlHzIJjRadV1kDS_
XSE0AtWuMnjW9VPvq1YeyPJK13gZw63TQYvh2RlaZq_
aQm5xskpsgWW1l67gg3mkYaZr07BQqMV47onKA%3Dw3840-h2160-p-k-no-nd-mv">
</iframe>
<ntp-app></ntp-app>
<script type="module" src="new_tab_page.js"></script>
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="stylesheet" href="shared_vars.css">
</body>
</html>보이는 것과 비슷하게 코드도 단순하고 조촐하다. (과연 진짜?) 그만큼 공부하기에 좋은 예제이다. 한줄 한줄 의미를 살펴보고 정리해보자. 오늘 한 것 같이 다른 페이지들도 비슷한 리뷰를 해본다면 자연스럽게 HTML과 CSS가 익숙해질 것이다.
코드 분석
<!doctype html>맨 첫 라인에 관한 설명을 위키에서 가져왔다.
"문서 형식 선언"(Document Type Declaration) 또는 DOCTYPE이란 어떤 SGML이나 XML 기반 문서 내에 그 문서가 특정 문서 형식 정의(DTD)를 따름을 지정하는 것이다. 본래 DTD에 기반한 SGML 도구를 이용해 문서 해석 가능성과 유효성을 검사하기 위한 목적으로 문서 내에 삽입되었다. HTML 문서의 규격 판 번호를 명시하는 데서 흔히 볼 수 있다. 웹 브라우저는 문서 형식 선언이 없는 HTML 문서를 쿼크 모드로 렌더링하지만 문서 형식 선언이 있는 HTML 문서를 표준 모드로 렌더링하기 때문에, 문서 형식 선언을 이용해서 어떤 웹 페이지가 모든 웹 브라우저에서 같은 레이아웃으로 제공되도록 할 수 있다. 한편 HTML5은 구조적으로 SGML과 호환될 수 없다. 따라서 HTML5로 구성된 문서에서 문서 형식 선언은 불필요하지만, 웹 브라우저들의 표준 모드를 활성화하기 위해 최소한의 형태로 유지되었다.
위키설명을 보니 첫 라인은 HTML5에선 필수는 아니지만 표준화를 위해선 있는게 좋은 것 같다. 그 다음은 HTML 구조이다.
<html dir="ltr" lang="ko">
<head>
<meta charset="utf-8">
<title>새 탭</title>
</head>
<body>
</body>
</html>HTML은 대체적으로 위의 구조를 지닌다. 웹페이지의 화면 구성은 상단 라인과 중단 몸통이라고 보면 되는데, head가 상단 라인과 관련된 파트이고 body가 중단 몸통 부분이다. title 태그는 상단라인에 들어갈 제목을 지정하는데 쓴다. 크롬에서 구글 검색창을 띄워 보면 '새 탭'이라는 단어가 상단에 나오는 것을 확인 할 수 있다. title 밑에 style이라는 태그가 들어가 있는데 이건 CSS라고 HTML이 뼈대를 구축한다면 CSS는 살을 덫대는 역할을 한다.
<style>
body {
background: #FFFFFF;
margin: 0;
}
#backgroundImage {
border: none;
height: 100%;
pointer-events: none;
position: fixed;
top: 0;
visibility: hidden;
width: 100%;
}
[show-background-image] #backgroundImage {
visibility: visible;
}
</style>
</head>
<body>CSS 스타일을 지정한 걸 보면 body 태그에 스타일을 지정하였다. 배경색과 여백이 설정되어 있다. 그 다음은 backgroudImage라는 id를 갖고 있는 태그에 대한 스타일을 지정하고 있다. 스타일 옵션들을 보면 거진 직관적으로 알아볼만한데, pointer-evnets라는 option은 그렇지 않아 검색을 해보았다. pointer-events는 생각보다 공부해야 할 것이 있어보여 일단 패스하고 넘어가야겠다. [show-backgroud-image]라는 태그도 아마 pointer-events와 연관된 파트인 것 처럼 보인다. 이는 다음 편에서 공부하기로 하고 나머지 태그들을 살펴보고 마무리하겠다.
<body>
<iframe id="backgroundImage"
src="chrome-untrusted://new-tab-page/
custom_background_image?url=https%3A%2F%2Flh5.
googleusercontent.com%2Fproxy%
2FE60bugMrz3Jw0Ty3vD1HqfrrabnAQGlHzIJjRadV1kDS_
XSE0AtWuMnjW9VPvq1YeyPJK13gZw63TQYvh2RlaZq_
aQm5xskpsgWW1l67gg3mkYaZr07BQqMV47onKA%3Dw3840-h2160-p-k-no-nd-mv">
</iframe>
<ntp-app></ntp-app>
<script type="module" src="new_tab_page.js"></script>
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="stylesheet" href="shared_vars.css">
</body>iframe은 페이지 내에 또다른 html 페이지를 삽입할 수 있게 해준다. id가 backgroundImage로 되어 있어 앞서 정의된 style이 적용된다. ntp-app은 네트워크 시간 동기화와 관련된 부분인 것 같지만 태그가 저렇게 들어간 의미가 무엇인지는 분명하지가 않다. 아직 내 레벨에서 파악하기 어려운 수준인듯... script는 자바스크립트 파일의 모듈을 불러오는 의미이고 나머지 두줄은 css파일을 문서 외부에서 가져올 때 사용하는 방법이다. 오늘은 여기 까지~
