html / css / javascript

html 10일 css 5일 javascript 15일

혁명적인 변화

 

이전 시간에 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에서 변경된 내용 보기)

 

 

결과는 아래와 같습니다. 

 

 

 

단지 태그라는 문법을 알았을 뿐인데, 정보기술 덕분에 이미 모든 태그를 다 알고 있는 것과 다름없는 상태가 되었습니다. 조용히 일어난 혁명적인 변화에 대해서 곰곰히 감상해보시면 좋겠습니다. 

댓글

댓글 본문
  1. 곽종훈
    !!!오류!!!
    '또 아래에서 가리키는 ~' 아래에 형광펜이 잘못칠해져 있네요
    본문에서 <h2> tag 로 감싼 HTML 과 형광펜칠해져 있는 HTML 이 달라요!
  2. 에반올마이티
    정말 멋집니다~! 더더더 궁금해집니다~! >_<
  3. 갓챵
    감사합니다!
  4. egoing
    고맙습니다~ 수정했어요. 앞으로도 많이 지적해주세요 :)
    대화보기
    • 폭스킴
      이고잉님~ 즐거운 추석연휴 보내고 계신지요? 강의가 추리소설처럼 긴장감이 증폭되어가고 있군요~ 기대됩니다~ 어쩌다 보니 교정을 보고 있는 듯한 느낌입니다. ㅎㅎ, 너무 큼 노력 -> 너무 큰 노력
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기