이번 시간에는 정말 중요한 태그를 배울 것입니다. 정보 기술의 혁명이라고 할 수 있는 웹이 웹이 될 수 있었던 것은 이 태그 때문이라고 해도 과언이 아닐 것입니다. 또 HTML의 약자인 Hypertext Markup Language의 Hypertext가 바로 이 태그를 의미합니다. 또 여러분은 하루에도 100번 이상 이 태그로 구현된 기능을 사용합니다. 이 태그의 이름은 이것입니다.
a
바로 링크에 대한 이야기입니다. 우리가 만든 웹페이지는 문서다운 모습을 갖게 되었지만, 링크가 없기 때문에 마치 고립된 섬과 같습니다. 링크를 도입해서 문서와 문서를 연결시켜보겠습니다. 그 과정에서 속성이라는 문법도 배우게 될 것입니다.
아래에서 선택한 문자 HTML에 링크를 걸어서 웹의 표준을 관장하는 국제민간기구인 w3c.org로 연결되도록 해보세요. 추천 검색어는 HTML link tag 입니다.
아래와 같이 하면 됩니다. (변경사항)
맥사용자는 TextEdit의 특성으로 링크가 제대로 열리지 않을 수 있습니다. 이 문제는 수업 끝에 언급했습니다. (바로가기)
태그 명 a는 anchor의 약자입니다. anchor는 배가 정박할 때 사용하는 쇠뭉치인 닻을 의미합니다. 정보의 바다에 대한 시적인 표현이죠. 컴퓨터 공학은 물질을 기반으로 하지 않기 때문에 모든 것이 비유와 은유로 이루어져 있습니다. 거대한 시(poet)라고 할 수 있죠.
href="http://www.w3.org" 는 속성(attribute)라는 문법입니다. 태그의 이름만으로는 정보가 부족할 때 이렇게 속성을 사용합니다. 속성 덕분에 태그는 더 많은 정보를 수용할 수 있게 되었습니다. 참고로 href는 Hypertext Refrence의 약자입니다.
축하합니다. 웹이 도시라면 링크는 도로입니다. 웹이 인체라면 링크는 혈관과도 같습니다. 링크가 없다면 웹도 없었을 것이고, 정보기술의 혁명도 지체되었을 것입니다. 하루에 백번 넘게 사용하는 링크의 소비자로만 살다가, 처음으로 생산자가 된 것입니다. 진도를 나가는 것도 좋지만, 이 순간을 음미하는 여유도 가져보세요.
만약 링크를 클릭했을 때 현재 탭이 아니라 새로운 탭이 열리고 그곳에서 페이지가 열리게 하고 싶다면 아래와 같이 하시면 됩니다. (변경사항)
target="_blank" 속성 자체는 중요하지 않습니다. 여기서 언급한 것은 속성을 통해서 태그에 더 많은 정보를 추가할 수 있다는 점을 보여드리기 위함이었습니다. 또 속성의 순서는 중요하지 않습니다. target 속성이 href 속성 보다 앞에 나와도 상관없습니다.
이렇게 해서 우린 HTML 태그에 대한 모든 문법을 완전히 배웠습니다. 또 a 태그를 비롯한 매우 중요한 태그들을 충분히 살펴봤습니다.
TextEdit 사용자를 위한 보충설명
맥 사용자 중 TextEdit 사용자를 위한 설명입니다.
TextEdit로 웹페이지를 만들면 링크가 제대로 동작하지 않는 현상이 있을 수 있습니다. 아래처럼 되는 현상입니다.
주소를 잘 보시면 w3c.org가 아니라 file://로 시작하는 것을 볼 수 있습니다. 그 이유는 아래 코드의 큰따옴표를 TextEdit가 장식된 따옴표로 자동으로 바꾸기 때문입니다!
<a href="http://w3c.org"
이런일을 못하게 하기 위해서는 TextEdit의 설정을 바꿔야 합니다. TextEdit > 환경설정(Preferences...)을 선택해서 설정 화면을 열어주세요.
옵션에서 스마트 인용(Smart quotes)와 맞춤법에 따라서 맞춤법 자동 수정(Correct spelling automatically)의 체크를 없애주세요. 이렇게하면 TextEdit가 자동으로 입력한 텍스트를 수정하지 못하게 합니다.
html 파일을 열어서 수정하고 싶을 때는 아래 옵션을 체크해줍니다.
열기 및 저장하기(Open and Save) > 개별 도큐멘트에 대한 설정을 선택하도록 포맷 메뉴를 사용하십시오(Display HTML files as HTML code instead of formatted text)
파일을 열 때는 아래와 같이 다음으로 열기(Open With)를 이용하면 됩니다.
