생활코딩 | WEB1 - 14. HTML 태그의 제왕
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
생활코딩님의 HTML강의 청각장애인을 위한 자막
우리는 지금까지 문서를 만드는 방법을 충분히 자세히 살펴봤습니다
태그 를 결합하는 방법을 완전히 마스터 했고빈도수가 절대적으로 높은 태그들을 살펴봤습니다
앞으로 배울 것보다 지금까지 배운 것에 큰 기쁨을 느꼈으면 좋겠습니다
예쁘 시죠 1 우리 수업의 는 2개의 혁명적 순간이 있습니다 하나는 태그
라는 문법을 배운 순간 이고 또 하나는 바로 지금부터 설명 들을 태그를
알게 된 순간 입니다
우리가 배울 태그가 무엇인지 제가 6 고개를 내 볼 테니까 맞춰보세요
태그가 웨브 이 왕국이 라면
지금부터 설명 들을 이 태그는
이 왕국의 제왕 입니다 현대 html 은 150여 개 태그 이루어져
있지만 이들 모두 이 때 그 아래에 있습니다
이 태그는 무엇일까요
검색 엔진들은 이 태그 덕분에 전 세계에 웹을 항해 하면서
웹페이지를 발견할 수 있고 이 태그 덕분에 최고의 검색 결과를 만들 수
있었습니다
이 태그가 없다면 검색엔진은 존재하지 않습니다
우리의 일상에서 검색엔진이 없다면 어떤 내리 생기겠지
생각해보세요 이대 그가 무엇일까요
이 태그는 도시의 길과 인체의 혈관과 같은 것입니다
태그 가 없다면 전세계 모든 웹 페이지는 고립될 것이고 정보 혁명도
시작되지 않았을 겁니다
이 태그가 무엇일까요
이 태그는 우리가 매일 100번도 넘게 사용하는 태그입니다
우리 일상에서 하루에 백번도 넘게 하는 일은 그렇게 많지 않습니다
이 태그는 무엇일까요 또 html 의 약자
하이퍼텍스트 마크업 랭귀지 에 적극 짜 하이퍼텍스트 가 바로 이 태그를
의미합니다
이 태그는 무엇 일까요
이 태그의 이름은 앵커의 첫 글자를 딴 a 입니다
앵커는 배가 정박할 때 사용하는 다스 를 의미합니다
정보의 바다에 정박 간다는 의미 에 시적인 표현인 a 태그는 어떤 기능을
표현하는 것일까요
바로 링크입니다
자 지금까지 우리가 만든 웹 페이지를 보니까 음 방금 제가 말씀드린
링크가 없네요
그렇죠 뭔가 좀 썰렁 하지 않았었어요 제가 여기에다가 우리가 링크를
할건데 전 요걸 여기 있는 져 하이퍼텍스트 마크업 랭귀지 에다가 왠지
html 이라는 기술의 공식 사용설명서를 링크를 걸면 좋을 것 같아요
그래서 왜 다 공식 사용 설명서를 한번 링크를 걸어 보겠읍니다
자 사용설명서를 여러분이 찾을 때 요런 검색어를 써보세요
html sp sp kis psp 케이션 이라는 것은
한국어는 명세 라고도 하는데 설명서 라고 생각하시면 됩니다
즉 html 을 만드는 w3c 에 라는 국제기구에서
만든 공식 설명 석 정도로 생각하시면 되겠습니다
자 그렇게 해서 찾은 문서가 이겁니다
예 여기 있는 이 문서는 w3c 라는
예 국제기구에서 운영하고 있는 분서 이구요
그리고 w3c 엘레콤 & 이션 이라고 되어 있죠 건곤 아니란 뜻입니다
왜 이름에 권고안이 냐 면 w3c 는 직접 브라우저를 만들지 않습니다
w3c 는 w3c 의 멤버들이 모여서 미래의 외부 너 또 해야 되는가
라는 거에 대해서
의논해서 미래의 외박 기술을 결정 하면 이렇게 오래 코맨드 이션 이라는
문서를 발표하고 이 문서를 웹브라우저 제작 업체들이 보고 그에 따라서
웹브라우저를 만들어 가게 되는 겁니다
예 그래서 여기 보시면은 음 이렇게 쭉 보면 여러가지 내용들이 있는데 좀
어려워요 무섭게 생겼어요 그래서 이걸로 공부한 사람은 없습니다
예 요 저 a 태그 가 무엇인지에 대해서 이렇게 기술적으로 나와 있죠
아무 10l 우리는 이 주소로
이 텍스트를 링크를 걸고 싶어요
자 제가 링크는 태그 명의 뭐라고 했죠
a 입니다 그러면 여러분이
링크를 걸고 싶은 곳에다가 a 태그로 감싸면 되겠죠
이렇게 자 그다음에 리로드를 해보면 링크가 걸린 r 앙 걸리죠 왜요
정보가 부족합니다
이 링크가 어디에
앵커를 내려야 될지 에 대한 정보가 부족합니다 그래서 여기 있는 요
주소를 복사 해서
여기로 가져온 다음에 예
여기다가 속성을 적는데 음 하이퍼텍스트 가 링크 라고 제가 말씀드렸죠
그 찾고 잊자 h 그리고 웹브라우저 한테 웹브라우저 얇 이 링크는 이
값을 참조 해 라고 할 때 참조 영어로 레퍼런스 인데 그 중에 새 글자
다리에 풉니다
여기에다가 그렇게 붙여넣기 하시면 됩니다
자 리로드 한번 해볼게요 짜잔 링크가 걸렸고 클릭했을때 w3c html5
스페이시 pk 션으로 이동하는 것을 볼 수가 있습니다
작 이론으로 아세요 그게 만약에 클릭했을 때 새 탭이 열리게 하고 싶다
그러면 뭐 여러분 사용설명서를 보고 알아내면 되겠죠 띄우고
타겟은 언더바 블랭크
저장 했구요 리로드 해보면
보시는것처럼 클릭했을때 색 탭으로 열립니다
또는 여기 있는 로 링크가 클릭하기 전에 무엇인지를 알려주고 싶다
툴팁 으로 그럼 여기다가 이렇게 타이트
그리고 html5 sp
케이션 이라고 하고
로드를 안 다음에 어스 올려나 보면 보시는 것 처럼 저렇게 툴팁이 뜨는
것을 볼 수가 있습니다
자 이렇게 해서 링크를 만드는 방법을 지금까지 살펴봤습니다 자 링크로
소개하고 보니까 링크와 저의 관계에 대해서 읽게 보고 싶은게 생겨서요
예 석가는 관계가 없으니까 넘어가셔도 되는 얘기입니다
음전하 그 때 공부를 잘 못했어요 예 딴 생각이 많은 학생 이었거든요
선생님이 무슨 말을 하면 자꾸 속과 는 관련 없는 것들이 연상이 돼서
잠깐 한눈 팔고 돌아보면 증도가 안보이는 거에요
특히 수학처럼 논리적인 과목은 정말 못했습니다
서 포기 잤던 거죠 제가 수업시간에 제일 많이 하는 딴 생각에 뭐였는지
아세요
딴 생각하지 말아야지 라는 딴 생각이었습니다
저는 거지 그냥 제 결함이라고 생각했었어요
누구도 저에게 그렇게 얘긴 하지 않았지만 저 스스로 나는 공부를 못하는
사람이고 공부를 싫어하는 사람이라고 믿게 되었죠
왜냐하면 성적표가 그 움직일 수 없는 증거 였으니까요
그렇게 저는 고등학교를 졸업했습니다
그리고 꽃 웹이 든다 는 소문이 돌기 시작했어요
얼마의 집집마다 웹을 쓰기 위해서 인턴의 붓을 도입하기 시작했구요
그때부터 저는 링크를 통해서 제가 필요한 정보를 탐험하기 시작했습니다
정신없이 링크를 따라 가다보면 정말 많은 것을 알게 되더라구요
생각해 보면 인류 역사를 통틀어서 저처럼 수업시간에 딴 생각하는 사람이
얼마나 많았을까 요 제가 고등학교를 졸업한 직후 예
인터넷과 웹 2 인류 역사상 처음으로 퍼지기 시작했던 거에요
이것이 저에게 얼마나 큰 행운인지 모르겠습니다
시대가 저를 조금만 비껴 갔다고 해도 저는 완전히 다른 사람이 인생을
살고 있었겠죠
처음엔 링크를 따라 여행하는 웹서핑을 공부라고 생각하지 않았지만 이제는
그것이 진정한 공부라고 생각하고 요 있어요
5 나는 공부를 좋아하는 사람이 되었다는 것도 알게 됐구요
이 수업이 더 크게 진 하고 여러분들도 링크를 통해서 정보를 탐험하고
문제를 해결하고 있다면 또 그 과정이 즐겁다면 여러분은 이미 공부를
좋아하고 잘하고 있는 겁니다
그 사실을 인정 하셨으면 좋겠습니다.
댓글 0개
등록된 댓글이 없습니다.