생활코딩 WEB1 - 10. html이 중요한 이유 > HTML

생활코딩 | WEB1 - 10. html이 중요한 이유

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

생활코딩님의 HTML강의 청각장애인을 위한 자막

누구나 기초가 중요하다고 말합니다

하지만 기초가 중요하다는 말을 잘 들어보면 응용으로 가는 과정으로써
기초가 중요하다 는 뜻인 경우도 많이 있더라구요
근데 사실 기초는 기초 만으로도 할 수 있는 일이 많습니다
우리는 웹 사이트를 만든다 는 거대한 목표를 향해서 나아가고 있습니다 만
지금까지 우리가 배운 것은 그런 큰 목표가 아니라도 이것 자체로 쓸모가
많습니다
이번 시간에는 우리가 배운 것만으로도 할 수 있는 일 않아 소개해드릴
거에요
그 과정에서 html 이 왜 중요한 지를 이해할 수 있는 시간이 되었으면
좋겠습니다
자 지금 보고 계신 이 화면은 여러분이 실습하고 있는
일제의 미래의 모습입니다 오픈 튜토리얼 쓰고 알지 라는 사이트 인데요
어 이런 서비스는 글쓰는 화면이 있죠 뭐 블로그 일수도 있고 또 sns
일수도 있습니다
자 우리가 글을 쓸 때 내부적으로 어떤 일이 일어나는가를 좀 살펴 볼 수
있는 기회 이기도 하고
예 일반인이 글을 쓸 때와 우리처럼 배운 사람들이 지식인들이 그랬을 때는
어떤 차이가 생기고 그것이 미래의
얼마나 큰 차이를 가져오는지 를 뭐 생각해보는 시간을 가져보겠습니다
자 일반인이 만약에 이렇게 생긴 곳에다가 글을 쓸 때 코딩 이라고 하는
코딩 이라고 이렇게 글을 쓰고 요 그리고 지식인 에코 지식인이 코딩
이라고 쓰면
이 두 사람이 요 코딩을 제목으로 정했을 때 어떤 차이를 가질 까요
여러분이 일반 일 때는 분명히 아마도 이렇게 쓸 겁니다 선택을 하고 그
글씨 크기를 선택한 다음에
1 22 빅 셀 정도
그리고 이렇게 진하게 표시하고 요렇게 하면 제목처럼 보이니까 이렇게
하겠죠 하지만 여러분은 일반인니라 지식인 입니다
지식인은 9분 돼야죠 여러분은
요 코드를 에다가 커서를 갖다 놓고
지금까지 눈앞에 있는데도 한번도 신경 써 본 적이 없을 수도 있는 요렇게
생긴 화면을 봅니다
그리고 거기에서 여러분이
타이틀 아니 정도를 요렇게 하면
보시기에 위에 있는 것과 밑에 있는건 거의 똑같죠
똑같아 고칩시다 예 그런데 내부적으로 어떤 차이가 생기는지 를 볼 거예요
자 여기 보시면 소스 라고 하는 버튼이 있는데요
저거 또 역시 마찬가지 우리가 공부했을 때 효용을 보여줍니다
여러분 아마 이런 편집기에서 소스 라는 것이 눈앞에 있어도 안 보였을
겁니다
또는 저 html 이라고 적혀 있을 수도 있어요
자 그러면 이제부터 이런 것들이 보이기 시작하는데 클릭하면 어떤 일이
생기는지 를 봅시다 자 자 자 우리가 이런 편집기를 이용해서 글을 쓴다는
것은 콘텐츠를 만든다는 것은 내부적으로 html 코드를 생산하는 행위였다
라는 것을 알 수 있는 장면이죠
우리가 html 을 몰라도 사실 우리는 html 을 만들어 내고 있었던
겁니다
다시 얘기로 돌아와서 여기보면 일반인의 제목과 지식인의 제목 사이에는
차이가 있어요
주식인 의 제목은 보시는 것처럼 깔끔하죠 그리고 제목이 h3 라는 태그로
감싸져 있기 때문에
어디서부터 어디까지가 세 번째로 중요한 제목 이다 라고 하는 정보가 태그
상에 코드 상에 나타나고 있습니다 하지만 일반인이 작성한 코드는 보시는
것처럼 스트롱 이라고 하는 정보가 정보가 아닌
예 그냥 진하게 표시 한다. 라고 하는 태그와
그리고 여기 폰트 사이즈 22 픽셀이 라고 하는 우리 아직 배우지
않았지만 css 라는 언어로 디자인 쪽으로 꾸며져 있을 뿐입니다
자 그렇다면 여기 있는 이 코딩 이라고 하는
지식인이 쓴 글과
밑에 있는
지식인이 쓴글니죠 이 위에 있는 코딩 이라고 하는
일반인의 제목과 그리고 아무런 꾸밈이 없는 쪽 코딩 이라고 하는 조
텍스트는 완전히 동 급입니다
하지만 여기있는 이 코딩과 밑에 있는
h3 태그로 감싸져 있는 코딩은
완전히 격이 달라요
자 그러면 우리 이 차이가 별거 아닌 것처럼 보일 수 있겠지만 이것이
얼마나 중요한지를
어 제가 여러분들에게 설득하는 시간을 좀 가져보도록 하겠습니다 자 여기
두가지 방식이 있습니다
일반인이 제목을 작성하는 방식과
어 그리고 지식인이 제목을 작성하는 방식이 있습니다
이 두가지를 한번 우리 비교해 볼 건데요 자의 비교 의 누가 심판의 막힐
거 아냐 며 검색엔진 심판의 맡을 겁니다
그 여러분이 어 이런 사안들을 대할 때 항상 극단적인 생각을 하실 필요가
있습니다
다시 말해서 어쩌다가 제목을 가끔씩 쓰는 것니라 여러분이 10년
동안 정말 부지런하게 글을 써서
어여 여러분의 웹 사이트의
이렇게 깨에 웹페이지가 일반인은 저런 방식으로 코딩이 되어 있고 지식인은
저런 방식으로 코딩이 되어 있다라고 할 때 10년 뒤에 이 두 사람의
인생이 어떻게 바뀔 것인가 를 관전 해보십시오
자 검색엔진은 전 세계에 있는 모든 웹페이지를 다운로드 받아서 그
웹페이지 예
html 코드를 분석합니다 그리고 그 코드에 있는 내용에서
어이 웹페이지에 제목은 뭐 구나 또 2배 웹페이지는
어떤 내용들을 가지고 있구나 이런 것들을 바로 이 태그를 근거로 해서
정리 정돈 해 놓습니다
그리고 사용자가 와서 이렇게 코딩이 라고 검색했을 때 왜 그 검색엔진은
일반인의 웹페이지 이렇게 대해서도 알고 있고 지식인 웹페이지 이렇게
대해서 알고 있는데 만약에 이렇게 코딩 이라고 검색을 하면
제목이
코딩 인 사이트와
그냥 시각적으로 만 제목 처럼 보이는 코딩 이라는 정보를 가지고 있는
사이트 중에 검색엔진은 누구의 편을 들어 주겠어요
당연히 제목이 코딩 사이트에 편을 들어 줄 겁니다 다시 말해서 제목이
코딩 인 지식인의 사이트가 좀 더 위쪽에 올라오고
일반인의 사이트는 자 여기 100페이지 뒤에 나타나 될겁니다
요런 100페이지 뒤까지 가본 적 있으신가요 없죠
오늘날 현대사회에서 검색엔진이 차지하는 위상이 너무나 크기 때문에
검색엔진 에게 노출되지 않는다 라는 것은
혈 실질적으로 존재하지 않는다 라는 의미를 갖기 때문에 여러분이 이 웹을
만들면서
이 화려하게 만들고 싶고 뭔가 더 편리하게 만들고 싶고
예 여러가지 욕심 들이 생기겠지만 그런 것들보다 어쩌면 훨씬 더 중요한
것은 바로 이 웹이 갖고 있는 본래의 의미
정보라는 것을 탄탄이 하는 것이 훨씬 더 중요한 이슈 라는 거죠 그래서
경우에 따라서는
뭐랄까요 좀 문서를 예쁘게 보이게 하기 위해서
이미지로 그 글을 쓰는 경우가 많이 있죠
예 포토샵 같은걸 이용해서 그런데 그렇게 하게 되면 검색엔진 에게는
존재하지 않는 페이지가 됩니다
그럼 10년 뒤에는 그
큰 손해를 보게 된다는 것이죠 바로 이렇게
html 을 의미에 맞게 정확하게 사용한다.는 것은 비즈니스 적인 측면에서
정말 생명 줄과 같이 중요한 문제라는 것을 여러분이 인지 하셨으면
좋겠습니다
html 이 중요한 또 하나의 이유가 있어요
웹의 핵심적인 저랑은 접근성이 인데요
웹은 모든 운영체제에서 동작하고
웹 페이지의 소스 코드에는 누구나 볼 수 있었고
웹은 저작권이 없는 순수한 공공재 입니다
바로 이것이 웹을 다른 기술과 구별되는 특별한 기술로 만드는 것이라고
저는 생각해요
이런 개방성 을 접근 썩 용어로는 엑세스 프리티 라고 합니다
웹이 중요하게 생각하는 접근성이 중의 하나는
신체적인 장애가 있는 분들도 정보로부터 소외되지 않도록 노력해야 한다.는
것입니다
예를 들어 시각장애가 있는 분들은 시각적인 정보를 첨 각화 해서 정보를
접하게 되는데요
스크린 리더 라는 프로그램 이나 각종 보조 장치를 이용해서 정보를 접하게
됩니다
그런데 웹페이지를 만들때 웹페이지를 예쁘게 만들고 싶다는 생각에서
문짝 까지 통으로 이미지로 만든다면 시각장애가 있는 분들에게는
존재하지 않는 정보가 됩니다 시각장애인을 배려하기 위한 여러가지 기술과
테크닉이 있습니다만 그 중요한 첫 출발은 html 태그를 정확히 알고
의미에 맞게 사용하는 것입니다
우리가 이렇게 한다.면 우리도 모르게 누군가에겐 큰 도움을 주고 있는
겁니다
이렇게 html 은 비즈니스적인 측면에서 중요할 뿐만 아니라 휴머니즘
적인 측면에서도 매우 중요한 기술입니다.