생활코딩

Coding Everybody

코스 전체목록

닫기

HTML 태그의 제왕

 

우리는 지금까지
문서를 만드는 방법을 충분히 자세히 살펴봤습니다.

 

 

태그를 결합하는 방법을 완전히 마스터했고,
빈도수가 절대적으로 높은 태그들을 살펴봤습니다.

앞으로 배울 것 보다,
지금까지 배운 것에 기쁨을 느끼셨으면 좋겠습니다.
기쁘시죠? ㅎㅎ

 

 

우리 수업에는 두개의 혁명적 순간이 있습니다.
하나는 태그라는 문법을 배운 순간이고,
또 하나는
지금부터 설명할 태그를 알게 된 순간입니다.
이 태그가 무엇일지 맞춰 보세요.

태그가 웹의 왕국이라면
지금부터 설명드릴 태그는
이 왕국의 제왕입니다.

현대의 HTML은
150여개의 태그로 이루어져 있지만
이들 모두 이 태그의 아래에 있습니다.
이 태그가 무엇일까요?

검색엔진들은
이 태그 덕분에 전세계의 웹을 항해하면서
웹페이지들을 발견할 수 있고,
이 태그 덕분에 더 좋은
검색결과를 만들 수 있었습니다.
이 태그가 없다면 검색엔진은 존재하지 않았을 것입니다.
우리의 일상에서
검색엔진이 없다면 어떤 일이 생길지 생각해 보세요.
이 태그가 무엇일까요?

이 태그는
도시의 길과
인체의 혈관과 같은 것입니다.

 


이 태그가 없다면
전세계의 모든 웹페이지는
고립될 것이고,
정보혁명도 시작되지 않았을 것입니다.
이 태그가 무엇일까요?

이 태그는
매일 백 번 넘게 사용하는 기능을 표현하는 태그입니다.
하루에 백 번도 넘게 하는 일은 많지 않습니다.

HTML의 약자
HyperText Markup Language의
HyperText가 바로 이 태그를 의미합니다.

이 태그의 이름은 anchor의 첫글자 a입니다.
앵커는 배가 정박할 때 사용하는 닻을 의미합니다.
정보의 바다에 정박한다는 의미의 시적인 표현인
a 태그는 어떤 기능을 표현하는 것일까요?

 

 

 

 

 

 

 

 

 

 

 

 

 

이 태그는 바로

 

 

링크
입니다

 

 

 

 

 

 

 

 

 

 

우리 프로젝트의 내용 중에
아래 텍스트에
Hypertext Markup Language (HTML)
HTML의 공식 사용설명서 페이지를
링크로 걸어보겠습니다.
주소는 아래와 같습니다.
https://www.w3.org/TR/html5/

 

 

알려드리기 전에
링크 거는 방법을 직접 찾아보세요.
추천 검색어는 아래와 같습니다.
 

html link

 

아래와 같이 하시면 됩니다.
a는 anchor의 약자이고,
href는 HyperText Reference의 약자입니다.

변경사항 

 

 

위 예제에서
target="_blank"는
링크를 클릭했을 때
새창에서 페이지가 열리게 하는 속성입니다.

 

 

또 title은
이 링크가 어떤 내용을 담고 있는지를
툴팁으로 보여주는 기능입니다.

 

자 이렇게 해서
웹을 웹답게 하는 가장 중요한 기능인
링크를 알아봤습니다.

 

 

링크를 소개하고 보니까
링크와 저의 관계에 대해서
이야기해 보고 싶어졌어요.

저는 학교에 다닐 때 공부를 잘 못했습니다.
딴 생각이 많은 학생이었거든요.
선생님이 무슨 말을 하면
자꾸 수업과는 관련이 없는 것들이 연상되서
잠깐 한눈 팔고 돌아와보면 진도가 보이지 않는 거에요.
특히 수학처럼 논리적인 과목은
정말 못했습니다.
수학포기자였죠.

제가 수업시간에
제일 많이 하는 딴 생각이 뭐였는지 아세요?
딴 생각하지 말아야지라는 딴 생각이었어요.
저는 그것이 그냥 저의 결함이라고 생각했습니다.
실제로 그 시대에 이런 성향은 결함이었습니다.

 

 

누구도 그렇게 이야기하지 않았지만,
저 스스로 나는
공부를 못하는 사람이고,
공부를 싫어하는 사람이라고 믿게 되었죠.
성적표가 움직이지 않는 증거였구요.
그렇게 저는 고등학교를 졸업했어요.

그리고 곧 웹이 뜬다는 소문이 돌기 시작했어요.
얼마 후에
집집마다 웹을 쓰기 위해서
인터넷을 도입하기 시작했습니다.

그 때부터 저는 링크를 통해서
제가 필요한 정보를 탐험하기 시작했어요.

 

 

떠오르는 딴 생각들을 따라서
정신없이 링크를 따라다니다 보면
많은 것을 알게 되었습니다.

생각해 보면
인류 역사를 통틀어서
저처럼
수업시간에 딴 생각을 하는 사람이
얼마나 많았을까요?

제가 고등학교를 졸업한 직후에
인터넷과 웹이
인류 역사상 처음으로
퍼지기 시작했던 거에요.

 

 

이것이 얼마나 큰 행운인지 모르겠습니다.
시대가 조금만 저를 비껴갔다면
저는 다른 인생을 살고 있었을거에요.

 

 

처음엔 링크를 따라 여행하는 웹서핑을
공부라고 생각하지 않았지만,
이제는 그것이
진정한 공부라고 생각하게 되었어요.

나는 공부를 좋아하는 사람이
되었다는 것을 알게 되었구요.

 

 

이 수업에 참여하고 계신 학우 여러분도
링크를 통해서
정보를 탐험하고,
문제를 해결하고 있으면서
그 과정이 즐겁다면
여러분은 이미
공부를 좋아하고,
잘하고 있는 것입니다.

 

 

그 사실을 인정하셨으면 좋겠습니다.

댓글

댓글 본문
  1. hanryang
    [태그의 제왕]

    <a> : anchor 닻,정박하다 = 외부 링크 연결
    <a href="클릭시 연결할 링크">
    <target="_blank"> : 링크 클릭 시 새탭으로 열기
    <title=""> : 링크에 마우스오버하면 설명 툴팁 노출
  2. ikurpw(iKnowYourPassword) : )
    <a href="https://www.w3.org/TR/2011/WD-html5-20110405/index.html" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a>

    <a> Anchor 닻을 뜻한다.
    <herf> HyperText Reference 줄임

    target="_blank"의 유무:
    - 없으면 현재 페이지에서 링크된 페이지로 전환
    - 있으면 새창으로 전환

    title="html5 specification" 링크에 커서 올리면 정보

    test
    <br>
    test
  3. 칠리치즈
    a, href, taget, tittle 의 각 개념들이 이해가 가지 않으실 땐
    " https://blog.naver.com......220 "
    이 블로그 게시물을 활용해 보세요! 저도 뭔가 글이 읽히는데 이해가 잘 가지않아서
    찾아보다가 정리가 잘되어있어서 많은 도움 받았습니다:)
  4. 할수있다.
    2024.02.26 완료
  5. 사슴튀김소스
    24.2.18 링크연결이 왜 안되는지 모르겠네요ㅠㅡㅠ.....흠...
  6. 안제경
    2024.02.16
  7. 미래도비
    0205
  8. 2024.01.29 완료
  9. 4월의눈꽃
    20240129
  10. 헬로키팅
    2024.01.25
  11. 로삶
    2024.01.25 완료
  12. 레나
    2024.01.21 완료
  13. 재원
    24.01.20
  14. ECLECTIC
    시작
  15. 김현지
    2024.1.4
    설명을 너무 잘해주세요!
  16. 축구는개발,마음은개발
    24.01.04
    WEB1 - 14
  17. 20232216 done
  18. PigeonLabs
    혹여나 아랫분처럼 새로운 단어가 이해되지 않는다면 이번 수업내용에 나와있다시피 검색을 통해 "필요한 정보를 탐험"하시면 되겠습니다..5초만 써서 구글에 툴팁 검색만 하셔도 아주 친절하게 알려주거든요!
    솔직히 이정도면 과잉친절이라 생각될만큼 초보자 눈높이에 맞춰서 하나하나 떠먹여주는 수준인데..이정도로 친절한 강의 잘 없어요

    훌륭한 강의에 감사드립니다!!
  19. 달고양이
    <a title=""> 툴팁이라고 하셨는데 무엇인지 이해되지 않아 한참 해맸네요. 마우스를 링크에 올리면 나오는 텍스트를 말하는 것이라고 그림 한장 있었으면 좋겠습니다. 아니면 최소한 글이라도...
  20. 집게사장
    2023.11.20 수강완료
  21. 박화경
    2023.11.16.목 - 2nd (7)
  22. 므갱이
    2023.11.06 완료
  23. nicktheman
    23.10.26
  24. KunWoo
    231025
  25. abiooi
    20231021
  26. 19.10.2023
  27. 샌디에고러버
    231018 수강 완
  28. 코율
    231015 3일차 완
  29. 한비치야
    20230927 p 3:38
  30. 4Tomorrow
    오늘도 멋진 말씀 감사!! 230927
  31. 리니웹
    230926 완료
  32. 율무차
    2023.09.23 완료
  33. 정연세
    230921완
  34. LI_ANLI
    23.09.18 완료
  35. 굴러들어온돌맹이
    230908 완
  36. 정윤수
    23.09.04 완
  37. carpediem
    2023.09.02 완료!!
  38. 윤슬
    2023.08.24 완료
  39. 30늦은나이아니라고해줘
    2023-08-22 완료
  40. 나쵸
    20230821 완료
  41. 박은서
    비록 공부 2일차지만 이강의가 정말 엄청난 강의라고 생각이 듭니다 이런강의를 듣게해주셔서 정말로 감사합니다!!
  42. 양념묻은비니
    230816 완료
  43. 니코니코드
    2023.08.12.
  44. helloworldjs
    title도 있습니다. 또한 a태그도 태그이기 때문에 속성 맞습니다.
    예를들어 이렇게 할 수 있습니다: <a href="https://google.com" target="_blank" title="구글로 이동">구글</a>
    https://bskyvision.com......%B1
    대화보기
    • 뽀롱보더
      이고잉님 감사합니다

      a테그 속성에대해 검색해봐도 target은 있어도 title은 없어요

      https://www.w3schools.com......asp

      a테그 안에서 동작하는 속성이 왜 안나오나요? 속성이 아닌가요?

      속성값 title은 어디에서 찾아봐야하나요

      감사합니다
    • 오옹오옹
      23.08.04
    • 달리세
      2023.08.03
    • 후리후리
      2023.07.07
    • 코딩두
      23.07.05 완료
    • 아멜리아
      2023.06.27
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기