이전 시간에 HTML을 통털어서 가장 중요한 문법인 태그를 배웠습니다. 여기서는 이 문법을 알게된 후에 얼마나 혁명적인 변화를 겪은 것인지를 음미해보겠습니다.
위키피디아의 홈페이지의 코드를 다시 봅시다.
여전히 모르는 코드 투성이입니다. 검색을 이용해서 <h1을 찾아보겠습니다. 대부분의 웹브라우저가 Ctrl+F 키를 누르면 문자를 검색할 수 있습니다. (맥의 경우 Cmd + F 입니다) 이건 실습이 아니기 때문에 따라하지 않아도 됩니다.
제가 찾은 코드는 아래와 같습니다.
<h1 id="firstHeading" class="firstHeading" lang="en">Main Page</h1>
불필요한 내용은 지울께요.
<h1>Main Page</h1>
질문입니다. <h1> 태그는 무엇일까요? 모르겠죠? 당연합니다. 알려주지 않았거든요.
그럼 질문을 바꿔보겠습니다. 여러분은 <h1> 태그를 순수하게 모르나요? 아닙니다. 어떤 점은 알고 있고, 어떤 점은 모릅니다. 여러분은 이제 <h1>이 태그라는 사실을 압니다. 단지 어떤 태그인지를 모를 뿐입니다. 즉 여러분은 무엇을 모르는지를 알게 된 것입니다.
무엇을 모르는지 아는 것이 얼마나 혁명적인 사건인지 곰곰히 생각해봅시다. 만약 여러분이 과거에 살고 있다고 쳐보죠. <h1>이 태그라는 것은 알지만, 어떤 역할을 하는 태그인지를 모른다면 이런 일을 해야 했을 겁니다. 버스를 타고 한시간 거리에 있는 도서관을 찾아갑니다. 도서관에서 30분 동안 필요한 책을 찾습니다. 10분 동안 <h1> 태그에 대한 설명을 찾습니다. 다시 집으로 돌아오기 위해서 1시간 동안 버스를 타야 합니다. <h1>이 태그라는 것을 알아도 <h1>이 무엇인지를 알아내는데 너무 큰 노력이 필요했습니다. 즉 무엇을 모르는지 알아도 모르는 것과 다름없었습니다.
하지만 정보 기술이 고도로 발전한 오늘날 <h1>이 태그라는 사실을 알면 우리는 무엇을 할 수 있나요?
- 검색엔진에서 검색할 수 있고,
- SNS에서 질문할 수 있습니다.
- 또 <h1>이 무엇인지 궁금해하기 시작하고,
- <h1>에 대해서 이야기하기 시작합니다.
<h1>이 무엇인지 궁금할 때 2시간의 노력이 필요하다면 그것은 모르는 것이나 다름없을 것입니다. <h1>이 무엇인지 알아내는데 1분 밖에 걸리지 않는다면 그것은 아는 것이나 다름없습니다. 무엇을 모르는지 아는 것의 중요함이 폭발적으로 증가하고 있는 시대에 우리는 살고 있는 것입니다.
앞으로 배우게 될 어려운 개념들이 많이 있을 것입니다. 어려운 것이 중요하게 느껴지겠지만, 그렇지 않습니다. 처음에 배우는 것은 쉽지만, 중요합니다. 뒤에서 배우는 것은 어렵지만, 덜 중요합니다. 아직 배우지 않은 것을 아쉬워하는 것 보다는 이미 배운 것을 즐거워하는 것이 현명한 것이 아닐까요?
그럼 이제 문제를 해결해봅시다. 자신이 사용하는 검색엔진을 이용해서 아래의 검색어로 검색해보세요.
html tag h1
제가 사용하는 검색엔진은 300만개의 웹페이지를 0.53초만에 찾아주네요.
그 중에 첫번째 결과를 열어보겠습니다. 제가 찾은 웹페이지는 아래와 같습니다.
https://www.w3schools.com/TAgs/tag_hn.asp
이런 문서를 볼 때 팁이 있습니다. 설명 보다 예제를 먼저보는 것이 좋을 수 있습니다. 예제를 통해서 무엇인지 추론을 먼저해보세요. 그리고 설명을 나중에 보는 것을 권합니다. 예제는 아래와 같습니다.
예제 코드를 실행한 결과는 아래와 같습니다.
예제를 통해서 이런 것을 추론할 수 있겠네요.
- <h 뒤에는 숫자가 올 수 있구나.
- 숫자가 커지면 문자가 작아지는구나.
- 일반텍스트(Normal Text)와 비교했을 때 문자의 두께에도 영향을 주는구나.
추론을 어느 정도 했다면 이제 설명을 봅시다.
The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading.
h1태그가 heading이라는 설명이 나오네요. heading을 사전에서 찾아보면 제목이라는 뜻이 있습니다. 여러분은 h1 태그가 제목을 나타는 태그라는 것을 알아낸 것입니다.
이제 배운 것을 사용해봅시다. 실습 예제를 다시 봅시다. 우리가 배운 제목 태그들을 어디에 사용할 수 있을까요?
제일 처음 등장한 WEB을 제목으로 표현하는 멋질 것 같지 않나요? 직접 해보세요~
아래처럼하면 됩니다. (변경된 내용 github에서 보기)
결과는 아래와 같습니다. 정말 멋지지 않나요?
또 아래에서 가리키는 HTML 부분도 제목으로 표시하고 싶다면 어떻게 하면 될까요?
아래처럼하면 됩니다. (github에서 변경된 내용 보기)
결과는 아래와 같습니다.
단지 태그라는 문법을 알았을 뿐인데, 정보기술 덕분에 이미 모든 태그를 다 알고 있는 것과 다름없는 상태가 되었습니다. 조용히 일어난 혁명적인 변화에 대해서 곰곰히 감상해보시면 좋겠습니다.