생활코딩

Coding Everybody

코스 전체목록

닫기

HTML이 중요한 이유

 

 

---

 

 

누구나 기초가 중요하다고 말합니다.
하지만 기초가 중요하다는 말을 잘 들어보면
응용으로 가는 과정으로서
기초가 중요하다는 뜻인 경우도 많더라구요.

그런데 사실 기초는
기초만으로도 할 수 있는 일이 많습니다.
우리는 '웹사이트 만들기'라는
큰 목표를 향해서 나아가고 있지만,
지금까지 배운 것으로도
할 수 있는 일이 많습니다.
 

 

이번 시간에는
기초만으로도 할 수 있는 일을 살펴볼 거에요.

 

 


HTML이 얼마나 중요한지를
상기해 보는 시간이 될 것입니다.

 

 

아래 화면은 여러분이 실습하고 있는 생활코딩 홈페이지의 미래의 모습입니다. 실습이 아니니까 그냥 구경만하셔도 됩니다. (동영상참고 : https://youtu.be/MgZRbCaF_rY?t=39)

 

아시다시피 블로그, SNS, 이메일과 같은 서비스들은 위와 같은 글쓰기 기능이 있습니다. 이번 시간에는
글을 쓸 때 내부적으로는 어떤 일이 일어나는가를 살펴보겠습니다. 동시에 일반인이 글을 쓸 때와 우리처럼 배운 사람이 글을 쓸 때 어떤 점이 다른지를 비교해보고, 그것이 얼마나 큰 차이를 만드는지도 살펴보겠습니다.

 

 

본문을 작성해 봅시다.
지식인과 일반인이 모두
coding이라는 텍스트를
제목으로 만든다면
어떻게 다르게 할 것인지를 비교해 보시죠.

 

 

일반인은 coding을 제목처럼 보이도록 글씨 크기를 키우고, 진하게 표시할 것입니다.

 

 

지식인은 제목을 표현할 때 포맷(format)이라고 되어 있는 부분에 관심을 갖습니다. 그리고 적당한 크기의 제목(title)을 선택합니다.

 

 

아마 지금까지
포맷이라는 기능이 눈 앞에 있어도
눈에 보이지 않았을 거에요.

 

 

이 수업이 끝나고 나면
포맷을 사용하기 시작할 것입니다.

 

 

저는 이것이 공부의 효용이라고 생각합니다.
공부를 안 하면
눈 앞에 분명히 보이는 것임에도
뇌가 무시합니다.
안 보이는 것과 다름없습니다.

 

 

공부를 하면
보이지 않던 것이 보이기 시작합니다.
들리지 않던 것이 들리기 시작합니다.

 

 

이번엔 Source라고 하는 버튼을 눌러 봅시다. 편집기에 따라서 html이라고 적혀 있는 경우도 있습니다. 이 버튼도공부하기 전에는 보이지 않았겠죠.

놀라운 사실을 알 수 있습니다. 우리가 이런 편집기를 이용해서 글을 쓴다는 것은 실제로는 HTML 코드를 생성하고 있었다는 것입니다. 편집기는 우리 대신에 HTML 코드를 만드는 기계였던 것이죠.

 

 

일반인과 지식인이 만든 코드의 차이를 살펴보시죠.

<h3>coding</h3>

지식인의 제목은 coding이 제목이라는 의미를 나타내고 있습니다.

<strong><span style="font-size:22px;">coding</span></strong>

일반인의 제목은 coding이 22px의 크기를 가졌고, 진하게 표시되어야 한다는 시각적인 장식만을 가지고 있습니다.제목이라는 정보는 어디에도 없습니다.

 

 

일반인의 제목과
지식인의 제목은
눈으로 보기에는
완전히 같습니다.

 

 

하지만,
똑같은 모양의 두 제목은
코드가 완전히 다릅니다.

 


코드가 다른 것이
얼마나 중요한 지를
공감할 수 있게 설득해 보겠습니다.

 

 

위와 같이
일반인과 지식인의 코드가 있을 때
누구의 코드가 더 좋은 지에 대한 심판을
검색엔진에게 맡겨 보겠습니다.

 

일반인과 지식인 코드의 차이

 

일반인과 지식인이
10년 동안
1억개의 웹페이지를
만들었다면
어떤 차이가 생길까를 봅시다.

 

 

검색엔진은
전세계의 웹페이지를 분석합니다.
그리고
사용자가 검색을 했을 때
검색결과를 보여줍니다.

 

 

만약 사용자가
검색엔진에게
coding이라는 정보를 검색했다면
검색엔진은
<h3>로 감싸진 페이지와
<strong><span style="font-size:22px">로
감싸진 페이지 중에
어떤 페이지를 먼저 보여줄까요?

 

 

<h3>로 감싸진 페이지를
더 먼저 보여줄 것입니다.
<h3>는 제목을 의미 하지만 
<strong><span style="font-size:22px">는 
시각적인 장식이기 때문입니다. 

 

 

오늘날 정보의 세계에서
검색엔진의 검색결과에서 노출되느냐는
실제로 존재하는냐,
존재하지 않는냐의 문제라고
할 수 있습니다.
100페이지 밖에 있는 검색결과를 누가 보겠어요.

 

 

의미에 맞는 태그로 웹페이지를 만든 지식인과
그렇지 않은 일반인은
10년 뒤에 인생이 달라져 있을 것입니다.

 

 

정보사회에서
HTML을 의미에 맞게 잘 사용하는 것은
비즈니스적인 측면에서 매우 중요합니다.

 

 

한편,
HTML이 중요한 또 하나의 이유가 있습니다.

 


웹의 핵심적인 철학은 접근성입니다.
웹은 모든 운영체제에서 동작하고,
웹페이지의 소스코드는 누구나 볼 수 있고,
웹은 저작권이 없는 순수한 공공재입니다.
웹의 이런 특징들이
웹을 다른 기술들과 구별되는
특별한 것으로 만든다고 생각합니다.

거기에 더해서
누구나 차별없이 정보에 접근할 수 있어야 한다는 철학을
접근성(accessibility)라고 합니다.

 


특히 웹이 중요하게 생각하는 접근성은
신체적인 장애가 있는 사람도
웹을 통해서 정보에 접근할 수 있어야 한다는 것입니다.

 

 

예를 들어서
시각장애가 있는 사람은
스크린리더(screen reader)와 같은 프로그램을 이용해서
정보를 청각화해서 접하게 됩니다.

 

 

그런데
웹페이지를 예쁘게 하기 위해서
HTML을 사용하지 않고
웹페이지 전체를 이미지로 만든다면
시각 장애가 있는 분들에게는
암흑과도 같은 상태가 됩니다.

 

 

자신도 모르는 사이에 누군가를 소외시키고 있는 것입니다.

 

 

반대로,
HTML을 의미론적으로 잘 사용한다면
자신도 모르는 사이에 누군가에게 정말 큰 도움을 주고 있는 것입니다.

 

 

이렇게
HTML은
비즈니스적인 측면에서도 중요하지만,
휴머니즘적인 측면에서도 중요한 기술입니다.

 

댓글

댓글 본문
작성자
비밀번호
  1. 딸기맘
    와우 시각장애인까지 배려해주시고 감사해요 휴머니즘 많은걸배우고 갑니다.,...
  2. 이피
    여태껏 문맹인이었던거 같아요.
    학원에서는 가르쳐주지 않았던 휴머니즘까지 배울 수 있네요~
  3. 홍계선
    egoing님이 휴머니스트라서 이렇게 친절하게 잘 가르쳐주심?!!!
  4. movingis
    HTML을 각 태그의 의미에 맞게 사용한다는 게 중요하다는 걸 깨닫게 되었어요. 누구나 접근할 수 있어야 한다는 웹의 철학을 지키려고 노력해야겠어요!
  5. 권해모리
    와, 청각 장애인 예시를 들어주시니 정말 공감되네요;;
  6. 정삿갓
    감사합니다 ^^
  7. Jake
    너무 좋습니다. ^^
  8. 잘할
    몰랐던 부분에 대해 알아갑니다. 감사합니다!
  9. Jihyun Lee
    감사합니다.
  10. 스케치
    부끄럽네요... 블로그 글쓰면서 항상 제목에 스타일을 줘서 입히고 있었습니다. 반성합니다.
  11. 이서연
    항상 보는데 말씀 한마디 한마디에 생각의 깊이가 남다르신 것 같아요! html이 휴머니즘 기반이라는 말 너무 좋습니다.
  12. 팽석
    감사합니다. 사소하다면 사소한것들이 이렇게 큰 차이를 만들어 내는군요.
  13. seokhee
    설명 정말 너무 좋아요. 학원보다 좋습니다.
  14. JN87
    180111 감사합니다!
  15. Kani Kim
    진짜 중요한 정보네요. HTML의 또다른 의미....배웠습니다.
  16. 달빈나
    좋은 강의 감사합니다!
  17. 코딩학습생
    잘 봤습니다~
  18. 선우
    감사합니다
  19. Kwangsoo Koh
    잘 봤습니다 ^^
  20. 잘봤어요!!
  21. 세왕
    저도 검색엔진이 Heading Tag를 바탕으로 검색하는줄 오늘 알았네요. 유익한 정보 정말 감사드려요^^
  22. goosen
    많이 배우고갑니다 감사합니다^^
  23. egoing
    이번에도 큰 신세 졌습니다. 정말 고맙습니다!
    대화보기
    • 커도
      검색엔진이 tag 정보로 우선순위 정해서 사용자에서 정보를 노출시키는 지는 처음 알았네요.
      많은 걸 배워 갑니다:)
    • Yong Choi
      폭넓게 이해하도록 이끌어 주시는 것 같습니다. 잘 봤습니다!
    • 차녕
      html의 중요한 개념을 알았습니다...
    • 김재학
      코딩이 중요하다... 맞네요...
    • 한재민
      HTML을 열심히 공부할 이유가 하나 더 생겼군요
    • 코딩화이팅
      코딩하나하나도 의미를 담아서 해아한다는 걸 알게되었어요~ 감사합니다
    • 조민지
      멋있다
    • 이수민
      생각도 못했던 부분이네요! 감사합니다.
    • aimerthis(이성민)
      코드 하나 하나가 중요성을 알았습니다.
    • 설렁탕
      It's fun
    • 이수현
      감사합니다.
    • 노동균
      html을 문법적인 내용보다 다른 관점에서 접근해주시니 더 집중해서 들을 수 있었던 것 같습니다.
      언어를 공부하면서 언어 문법이외에 다른 쪽으로 생각해 본 적이 없었는데 덕분에 시야를
      더 넓게 볼 수 있게 된 것 같습니다. 감사합니다.
    • 하우영
      재밌습니다^^
    • Deen
      잘들었습니다 감사합니다:)
    • Changhyun Choi
      html은 휴머니즘
      모든 사람들이 정보에 쉽게 접근하기 위해서 노력 해야겠어요
    • Seonghee Park
      휴머니즘까지~^^
    • slowandsteady
      이제껏 많이 사용했던 것들에 대해서 몰랐던 부분을 알게 되었습니다.
      아는 것과 모르는 것, 그리고 알고 안하는 것의 차이는 참 큰 부분이 아닌가 싶습니다.
      그리고 html의 의미도 대단하네요.
      좋은 강의 감사합니다.
    • 휴머니즘... 감동
    • 서경숙
      완료
    • 이런 부분으로 html을 접근한다는 건 엄청난 신선한 충격이었습니다. 감사합니다. ^^
    • 이근환
      감사합니다.
    • 김정윤
      감사합니다~!
    • PassionOfStudy
      Accessiblity, Humanism의 생각을 갖자!


      2018-01-05 - 열번번째 수강완료!
    • koreano1cfp@paran.com
      "기초만으로도 할 수 있는 일을 살펴볼꺼예요."
      위에서는 "살펴볼꺼예요."를 "살펴볼 거에요."로 수정해야 함.

      "상기해보는 시간이 될 것입니다."
      위에서는 "상기해보는"을 "상기해 보는"으로 수정해야 함.

      "실습이 아니니까 그냥 구경만하셔도 됩니다."
      위에서는 "구경만하셔도"를 "구경만 하셔도"로 수정해야 함.

      "어떤 점이 다른지를 비교해보고,"
      위에서는 "다른지를"을 "다른 지를"로 수정해야 하고, "비교해보고"는 "비교해 보고"로 수정해야 함.

      "그것이 얼마나 큰 차이를 만드는지도
      위에서는 "만드는지도"를 "만드는 지도"로 수정해야 함.

      "본문을 작성해봅시다."
      위에서는 "작성해봅시다."를 "작성해 봅시다."로 수정해야 함.

      "어떻게 다르게 할 것인지를 비교해보시죠."
      위에서는 "비교해보시죠."를 "비교해 보시죠."로 수정해야 함.

      "눈에 보이지 않았을꺼예요."
      위에서는 "않았을꺼예요."를 "않았을 거에요."로 수정해야 함.

      "이 수업이 끝나고나면"
      위에서는 "끝나고나면"을 "끝나고 나면"으로 수정해야 함.

      "공부를 안하면"
      위에서는 "안하면"을 "안 하면"으로 수정해야 함.

      "안보이는 것과 다름없습니다."
      위에서는 "안보이는"을 "안 보이는"으로 수정해야 함.

      "공부를 하면 안보이던 것이 보이기 시작합니다."
      위에서도 "안보이던"을 "안 보이던"으로 수정해야 하는데,
      표현을 "보이지 않던"으로 하는 것이 더 좋은 표현입니다.

      "안들리던 것이 들리기 시작합니다."
      여기서도 마찬가지로 "안들리던"을 "안 들리던"으로 수정해야 하는데,
      "들리지 않던"으로 하는 것이 더 좋은 표현입니다.

      "Source라고 하는 버튼을 눌러봅시다."
      위에서는 "눌러봅시다."를 "눌러 봅시다."로 수정해야 함.

      "편집기에 따라서 html이라고 적혀있는 경우도 있습니다."
      위에서는 "적혀있는"을 "적혀 있는"으로 수정해야 함.

      "이 버튼도 공부하기 전에는 안보였겠죠."
      여기서도 "안 보였겠죠."를 "안 보였겠죠."로 수정해야 하는데,
      역시 "보이지 않았겠죠."라고 하는 것이 더 좋은 표현입니다.

      "코드가 다른 것이 얼마나 중요한지를 설득해볼께요."
      위에서는 "중요한지를"은 "중요한 지를"로, "설득해볼께요."는 "설득해 볼게요."로 수정해야 함.

      "누구의 코드가 더 좋은지에 대한 심판을"
      위에서는 "좋은지에"를 "좋은 지에"로 수정해야 함.

      "누구나 차별없이 정보에접근할 수 있어야 한다는 철학을"
      위에서는 "정보에접근할"을 "정보에 접근할"로 수정해야 함.

      "예를들어서 시각장애가 있는 사람은"
      위에서는 "예를들어서"를 "예를 들어서"로 수정해야 함.
    • BY Chin
      감사합니다
    • 이유리
      감사합니다.
    • twori
      휴머니즘의 뜻까지 있는지는 몰랐네요..! 잘봤습니다
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기