1. <a> 요소의 기본적인 사용법

HTML은 월드와이드웹(www)에서 웹페이지를 부호화하고 HyperText 링크를 제공하는 언어이다. 이때, HyperText 링크를 제공하는 요소가 바로 앵커(anchor)를 의미하는 <a> 요소이다.

<a> 요소는 링크를 눌렀을 때 다른 페이지가 열려야 하므로 기본적으로 열어야할 목적지 주소와 링크로 제시될 내용이 포함되어 다음과 같은 형식으로 작성한다.

<a> 요소의 내용(contents)은 이미지 요소나 텍스트 형식으로 링크가 어디로 연결될지 보여주는 라벨의 역할을 수행한다. 라벨은 브라우저에서 클릭할 수 있다는 것을 나타내기 위해 밑줄이 처진 상태로 보이고 그 위에 마우스 커서를 올리면 커서가 작은 손 모양으로 바뀐다.

2. href 속성

href 속성은 hypertext reference의 줄임말로 링크가 연결될 목적지 주소(destination address)를 <a> 요소에 부여하는 필수적인 속성이다. 웹 브라우저는 바로 이 href의 속성값을 읽어 목적지의 문서를 연결한다. <a> 요소에 href 속성이 없으면 웹 표준 위반이다.

다음의 HTML 문서를 작성해서 0019.html로 만들고  sun.jpg파일을 같은 디렉터리에 놓고 실행해보자. 

다음은 sun.jpg 파일이다. 

0019.html 파일은 웹 브라우저에 다음과 같이 나타난다. 

href 속성으로 제시할 수 있는 목적지의 형식은 URL, 상대경로, id 이동이 있는데 이를 위의 예제 웹페이지는 전부 집어넣어 보았다. 하나하나 살펴보자. 

① URL로 링크걸기 : 책 씹어먹는 즐거움

이 부분에 해당하는 HTML은 <p> 요소 내부에 다음과 같이 작성된 부분이다.

가장 흔히 볼 수 있는 URL로 링크 걸기이다. 외부 사이트에 링크를 만들 경우에는 URL을 이용하여 링크한다. URL에 대해서는 0015 URL 간략하게 이해하고 연습하기를 참조하길 바란다.

② 이미지에 링크걸기

그 다음은 이미지에 링크를 건 경우이다. 태양 사진이 있고 이를 클릭하면 본 블로그로 이동한다. 이는 <a> 요소 내부에 <img /> 요소를 아래와 같이 중첩시켜 만들었다(0019.html 파일과 sun.jpg 파일이 같은 디렉터리에 있어야 한다.).

③ 로컬 링크를 상대경로로 링크

이 부분에 해당하는 HTML은 <p> 요소 내부에 다음과 같이 작성된 부분이다.

상대경로에 대해서는 앞의 0016 이미지를 보여주는 img 요소 01 사용법 및 src 속성의 하단부에 정리된 src 속성에서 상대경로 작성법과 동일하다.

클릭하면 서버 내에 웹페이지 파일과 같은 디렉터리에 있는 sun.jpg 파일을 브라우저로 열게 된다. 이렇게 같은 사이트 내에서 서버 내부의 파일로 연결하는 링크를 로컬 링크(local links)라고 한다. 

로컬 링크의 경우에는 다음과 같은 이유에서 href 속성의 속성값으로 URL이 아닌 상대경로를 사용하도록 권장된다. 

④ 특정 id를 가진 요소로 이동

이 부분에 해당하는 HTML은 <p> 요소 내부에 다음과 같이 작성된 부분이다.

이를 클릭하면 제목(<h2>요소)으로 되어 있는 “a요소의 href 속성으로 다양한 링크 걸기”로 이동한다. 이는 다음과 같이 제목의 요소(<h2>요소)에 아이디(id) 속성 "first"가 부여되어 있기 때문이다. 즉, href 속성값으로 "#first"가 부여되어 있으면 같은 페이지에 있는 요소 중에 아이디(id)가 "first"인 요소로 이동한다. 

아이디(id) 속성은 원하는 요소(element)를 다른 요소와 구별되어 그 자체로 고유하게 만드는 속성이다. 똑같은 <h1> 요소라고 해도 아이디(id)를 통해서 다른 <h1> 요소와 구별되는 것이다. 나중에는 이 아이디(id) 속성을 이용하여 CSS로 특정 id의 요소만 스타일링 하거나, Javascript로 특정 id의 요소만 조작하는 등으로 응용할 수 있어 가장 많이 사용되는 속성(attribute) 중에 하나이다.

HTML 웹페이지의 요소에 필요한 아이디(id) 속성을 부여하고 이제 <a> 요소의 href 속성에 "#아이디" 형태의 문자열을 속성값으로 부여하면 같은 페이지에 있는 해당 아이디(id)를 가진 요소로 바로 이동할 수 있다. 

아이디(id)로 이동은 같은 페이지 내부의 이동에만 사용되는 것은 아니다. 앞서 배운 URL 뒤에 "#아이디" 형태의 문자열을 붙이거나, 상대경로의 뒤에 "#아이디" 형태의 문자열을 붙여서 다른 페이지의 해당 아이디(id)를 속성으로 가진 요소로 바로 이동할 수 있다. 가령, 다음과 같다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0019 a요소 01 사용법 및 href 속성.apkg

2019/01/02 am 1:27 본문 및 Ankilog 파일에 id 속성값으로 올 수 있는 문자들 문구 수정

1. <img /> 요소 사용법

HTML 페이지에 사진이나 그림 등의 이미지를 잘 사용하면 세련된 페이지를 만들 수 있다. 이런 경우 이미지를 집어넣기 위해서 사용하는 요소가 <img /> 요소다.

<img /> 요소는 이미지를 정의하는 빈요소로 보통 다음과 같은 형식으로 작성한다.

<img /> 요소에서는 src, width, height, alt의 4가지 속성을 잘 알아두어야 한다. 

2. <img /> 요소의 src 속성

<img /> 요소는 내용(content)이 없이 이미지를 보여주는 것이므로 속성(attribute)을 이용하여 해당 이미지를 불러와야 한다. 이 때 필요한 것이 src 속성이다. 

src 속성은 이미지 파일의 위치를 명시한다. 파일의 위치는 상대적인 파일의 위치뿐만 아니라, URL을 넣을 수도 있다. 

사용하는 URL에 대해서는 0015 URL 간략하게 이해하고 연습하기 포스팅에서 간단하게 다루었으니 참조하기 바란다. 

아래는 src 속성에 속성값을 URL로 넣은 경우다.

여기서 주의할 점은 URL의 마지막은 파일명이 되고, 웹페이지의 디폴트 파일처럼 디폴트 이미지라는 것이 설정되지는 않기 때문에 파일명까지 정확하게 써야 한다는 점이다. 

웹에서 원하는 이미지를 보았을 때, 보통 아래와 같이 마우스 우클릭으로 이미지 주소 복사를 통해 해당 URL을 얻을 수 있다.

src의 속성값으로 URL말고 상대적인 파일 위치를 넣을 수 있다. 즉, 서버 내의 특정 디렉터리에 있는 파일을 불러오는 로컬 링크(link)의 경우 웹페이지 파일이 속한 디렉터리를 기준으로 원하는 이미지 파일의 위치에 도달하는 경로를 명시할 수 있는데 이를 상대경로(relative path)라고 말한다.

가령, 불러오고 싶은 sun.jpg 라는 이미지 파일이 웹 페이지 파일과 동일한 디렉터리에 있으면 아래와 같이 속성값에 파일의 이름을 그대로 기입하면 된다.

sun.jpg 이미지 파일이 웹 페이지가 있는 디렉터리의 하위 디렉터리(가령, images 디렉터리)에 있을 경우 해당 디렉터리의 이름 바로 뒤에 슬래쉬(/)를 붙여 이어서 경로를 작성한다. 이건 운영체제와 상관없이 슬래쉬(/)이다. 그리고 하위 디렉터리가 있는 만큼 얼마든지 슬래쉬로 이어서 하위로 내려갈 수 있다.

sun.jpg 이미지 파일이 웹 페이지가 있는 디렉터리 보다 상위에 있다면 마침표 2개(..)로 나타내면 된다. 이는 최상위 디렉터리인 루트까지 이어질 수 있다.

사례를 한 번 살펴보자. 다음은 서버에 있는 웹사이트 관련 파일들의 디렉터리 구조다. 

각각의 웹페이지 파일의 <img /> 요소에서 src 속성의 속성값으로 sun.jpg 파일에 도달하는 상대경로를 기입한 경우다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0016 이미지를 보여주는 img 요소 01.apkg

일반적으로 URL이라고 함은 웹 브라우저 주소창에 입력하는 다음과 같은 주소를 말한다.

HTTP(HyperText Transfer Protocol)는 월드와이드웹(WWW)에서 클라이언트와 서버 사이에 정보를 주고받기 위해 만들어진 상호규약(protocol)을 말하고 http://는 HTTP(HyperText Transfer Protocol)로 통신한다는 것을 의미한다.

www.ankilog.com 은 웹 사이트의 이름이다. 

/index.html 은 index.html 이라는 파일이 위치한 루트로부터 절대 경로를 말한다.

URL에서 절대 경로란 루트 디렉터리를 기준으로 특정 파일이나 페이지를 찾아가는 경로를 말한다. 먼저 루트 디렉터리는 슬래쉬(/)에서 시작하고 디렉터리를 넘어갈 때마다 슬래쉬(/)로 구분한다.

즉, 전체적으로 해석해보면 개인 컴퓨터(클라이언트라고 한다.)에서 www.ankilog.com 이라는 웹사이트의 서버에 루트 디렉터리에 있는 index.html 파일을 HTTP로 요청하는 것이다. 이에 서버는 해당 파일을 찾아서 HTTP로 응답할 것이고 파일이 없으면 404 not found 에러를 보여준다.

사례를 들어보자. 아래의 그림은 www.ankilog.com 이라는 가상의 사이트 서버 안에 있는 디렉터리와 파일들이다. 즉, www.ankilog.com 이라는 사이트에 관련된 파일은 전부 그림에 있는 main, about, menu, etc, images 디렉터리에 있는 것이다. 

여기서 루트(/) 디렉터리는 보통 main 디렉터리가 된다. (웹 서버 컴퓨터의 루트 디렉터리가 아니라 웹페이지의 루트 디렉터리라는 점을 주의) 그리고 개인 컴퓨터(클라이언트)에서 웹 브라우저 주소창에 http://www.ankilog.com 이라고 입력하면 웹 서버는 이를 아래와 같이 루트(/)인 main 디렉터리에 접속시킨다. 

웹페이지는 html 파일이므로 디렉터리에 접속한다는 개념은 이상하다. 하지만  사람들이 어디에 어떤 html 파일이 있는지를 전부 알고 개별 파일을 접속하기는 어렵기 때문에 해당 디렉터리에 접속했을 때 그 디렉터리의 웹페이지 파일을 자동으로 보여주게끔 하는데 이 파일을 디폴트 파일(default file)이라고 부른다. 디폴트 파일은 루트에만 적용되는 것이 아니다. 각각의 디렉터리마다 디폴트 파일이 있다. 

디폴트 파일은 기본적으로 'index.html', 'default.htm'이 된다. 이 사례에서는 index.html 파일을 쓰고 있다.

즉, 개인 컴퓨터(클라이언트)에서 웹 브라우저 주소창에 http://www.ankilog.com 이라고 입력하면 웹 서버는 main 디렉터리에 있는 index.html 파일을 자동으로 보여준다.

위의 그림과 같은 디렉터리 구조를 보이는 웹사이트 www.ankilog.com에서 개인 컴퓨터(클라이언트)가 이 웹사이트의 특정 파일에 접근하려고 할 때 URL을 어떻게 작성해야할지 살펴보자. (구분하기 쉽게 색깔과 폰트를 변경함)

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0015 URL 간략하게 이해하고 연습하기.apkg

플래쉬 카드 류 앱은 상당히 많다. 이 중에서 Anki가 아닌 다양한 앱들이 인기가 있는데 그 중 하나가 퀴즐렛(Quizlet)이다. 

개인적으로는 자유롭게 조작할 수 있는 Anki를 선호하지만 퀴즐렛(Quizlet)은 단순 암기 카드를 만드는데 매우 유리하고 클래스를 개설하여 공동 공부를 하기에도 좋기 때문에 많은 사랑을 받고 있는 것으로 알고 있다. 그러다 보니 퀴즐렛(Quizlet)에서 학습을 했거나 아니면 그 곳의 다양한 학습자료를 원하는 사람들이 퀴즐렛(Quizlet)의 학습 자료를 Anki에 옮기고 싶어하는 경우가 종종 있는 것으로 보인다. 

마침, 어떤 분이 본 블로그에 퀴즐렛(Quizlet)의 자료를 어떻게 Anki로 옮기는지 물어봐 왔기에 그 방법을 찾아본 결과 간단한 추가기능(add-on)의 설치만으로 가능하다는 것을 알게 되었고 마침, Anki의 추가기능(add-on)에 대해 소개하는 포스팅을 올려보려던 참이어서 

발견한 내용을 공유하기 위해서 그 추가기능에 대한 포스팅을 해보려고 한다.

그 추가 기능의 이름은 다음과 같다.

Improved Quizlet to Anki Importer

즉, 퀴즐렛(Quizlet)을 Anki로 가져오게 하는 보다 발전된 추가기능이라는 명칭이다.

관련 설명을 읽어보면 퀴즐렛(Quizlet)을 Anki로 가져오는 다양한 추가 기능들이 있어왔지만 매번 오류가 있어서 스스로 조금씩 고치다 보니까 어느새 대부분 다시 만들게 되었다고 설명하고 있다. 그리고 아래에 달린 댓글(Reviews)를 보면 많은 사람들이 이 추가기능(add-on)을 써보고 매우 만족해하면서도 여전히 몇가지 문제점이 남아있고 이를 고칠 방법을 제시하는 댓글도 같이 붙어있다. 

제시된 문제점은 모바일 버전에서 퀴즐렛(Quizlet)의 이미지 파일을 다운받을 때 저해상도의 이미지로 다운된다는 문제와 오디오(Audio)가 작동하지 않는다는 점 정도가 제시되고 있다. 이는 앞으로도 계속 추가적인 개선이 이루어질 것이라는 점을 암시한다. 

그렇다면 이제 이 추가 기능(add-on)을 사용해 보자. 

추가 기능(add-on)의 설치는 Miscellanea(기타)에서 언급한 바가 있지만 Improved Quizlet to Anki Importer 를 기준으로 다시 설명하고자 한다. 

우선, Anki를 실행하고 상단 메인메뉴에서 도구 → 추가 기능(A) → 둘러보고 설치하기의 순으로 클릭한다. 

그러면 아래와 같이 추가 기능 설치 창이 나타나는데 이 때, 설치할 코드 번호를 알면 코드를 그대로 기입해서 확인을 눌러서 설치를 하면된다. 하지만 지금의 경우 코드 번호를 모르므로 탐색을 클릭하여 설치할 추가 기능(add-on)을 찾아 코드 번호를 확인해야 한다.

그러면 앙키웹(Ankiweb)의 추가 기능을 보여주는 화면이 아래와 같이 나타난다. 다양한 추가 기능(add-on)들이 레이팅과 함께 나타난다. 즉, 상위에 배치된 추가 기능들은 사람들에게 인정받고 있는 좋은 추가 기능이라는 의미이다. 그 리스트를 주욱 흝어보면 우리가 원하는 Improved Quizlet to Anki Importer 가 보인다. 이를 클릭한다.

Improved Quizlet to Anki Importer 에 대한 소개와 리뷰 그리고 설치 코드가 나타난다. 설치 코드는 590899480이다. 

이번에는 앞서 나타났던 추가 기능 설치 창에 해당 코드를 집어넣고 확인을 클릭한다. 

설치가 진행되고 Anki를 재시작하라는 메시지가 나온다. 확인을 클릭하여 Anki를 재시작한다. 

Anki를 다시 시작하고 도구를 클릭해보면 메뉴 하단에 "Import from Quizlet"이라는 메뉴가 나오는데 이를 클릭한다. 

그러면 아래와 같이 해당 퀴즐렛(Quizlet)의 웹주소(URL)을 넣는 창이 나타난다. 

Anki에 가져오고 싶은 퀴즐렛(Quizlet)의 카드뭉치를 찾아서 이를 넣어보자. 퀴즐렛 홈페이지에 가서 원하는 학습 세트를 클릭하여 해당 페이지로 이동한다. 그리고 그 페이지의 상단 주소를 위의 퀴즐렛(Quizlet)의 웹주소(URL)을 넣는 창에 집어넣고 "Import Deck" 버튼을 누른다.

그러면 가져오기(import) 처리가 이루어지고 성공할 경우 아래와 같이 성공 메시지가 뜬다. 

그리고 카드뭉치 화면으로 돌아오면 아래와 같이 두산2 5-2의 카드 10개가 새로운 카드뭉치로 나타난다.

해당 카드뭉치를 클릭해서 학습을 해보면 아래와 같이 카드의 질문과 해답이 제대로 나타나는 것을 확인할 수 있다.

0004_웹브라우저를 열어보자.

웹브라우저는 우리가 흔히 마주치는 인터넷 익스플로어, 크롬, 사파리 등이다. 이러한 웹브라우저가 어떤 것인지에 대해서 전에는 전혀 관심이 없었다. 주소와 검색, 그리고 앞으로 가기와 뒤로가기 정도를 사용하고 마지막으로 즐겨찾기 정도 쓰는 수준이다. 그런데 이제 HTML을 공부하려고 하니 이 웹브라우저라는 것에 대해서 흥미가 생긴다. 그래서 이번에는 웹브라우저라는 것에 대해서 몇가지 호기심을 채워보려고 한다. 

웹브라우저는 무척 간단한 쓰임새를 가지고 있지만 다양한 자료가 웹브라우저에 올라온다. 우리는 웹브라우저를 통해서 예쁘게 꾸며진 웹페이지의 글, 동영상, 음악, 사진 등등을 보고 듣고 즐긴다. 갑자기 브라우저의 다재다능함이 어느 정도 수준인지 호기심이 생겨서 이것저것 실험을 해보고 싶어졌다.

여러 HTML 관련 교재를 읽어보니 브라우저에 무엇인가를 쓰는 방법은 매우 간단했다. 

우선 메모장(Notepad)을 열고 거기에 쓰고 싶은 내용을 쓴다. 그리고 저장할 때 확장자를 .txt가 아닌 .html로 저장한다.

그래서 아래의 그림처럼 만들어서 저장해보았다.

그랬더니 이 파일의 아이콘이 웹페이지 아이콘으로 나타났다. 그리고 그 파일을 크롬하고 인터넷 익스플로어의 두 종류의 웹브라우저로 열어보았다. 

크롬과 인터넷 익스플로어의 웹브라우저에 Hello World! 라고 쓰여진 문장이 보인다. 

평소 URL을 보여주던 주소입력 부분에는 파일 경로가 나타난다. (URL과 파일의 경로가 어느 정도 유사한 개념인가 보다?)

탭 부분은 크롬에서는 파일명을 보여주고 있지만, 인터넷 익스플로어에는 파일경로가 들어간 것이 조금 다르다. 

메모장으로 확장자를 .html로 만들어서 저장하면 해당 파일이 브라우저에서 열린다는 사실을 알게 되었다. 

그런데 또 궁금하다. .html로 뒤이어 붙여야만 되는 것일까?

그냥 메모장에 .txt로 쓴 것도 웹브라우저가 읽을까?

이번에는 메모장(Notepad)에 Text 방식으로 다음과 같이 적어 보았다.

저장하면서 start002.txt 라고 저장하니 더블 클릭을 하면 메모장만 열리지 웹브라우저가 열리지 않는다.

그래서 웹브라우저를 열고 거기에 start002.txt 파일을 드래그해서 집어넣으니 훌륭하게 다음과 같이 읽힌다.

(여기서 확장자라는 것은 컴퓨터에게 이 파일을 열 때 어떤 프로그램을 쓰는지 가르쳐주는 것일뿐 해당 파일의 내용을 좌지우지 하는 것은 아니라는 점을 처음으로 알게 되었다.)

이번에는 메모장에서  굵게, 기울임꼴 등.... 여러 가지 서식을 적용해보고 이를 웹브라우저로 읽어보았지만 웹브라우저에는 해당 서식은 전혀 적용되지 않고 그냥 위의 그림처럼 평면적인 텍스트만 보여주었다.

그 외에도 평소 자주 사용하는 다양한 파일을 드래그해서 웹브라우저에 넣어 보았다. 

한글2010 파일과 MS의 파워포인트, 워드 파일은 전혀 열리지 않았다.

사진은 바로 화면에 표시되고 음악은 바로 플레이되지만 동영상은 열리지 않았다. 

요약하면 이렇다.

이와 같은 몇가지 실행을 통해 추정해 볼 수 있는 점이 이것이다. 사진과 음악, 그리고 서식이 적용되지 않은 텍스트는 웹브라우저에서 바로바로 해당 파일을 읽어서 표시할 수 있는 형식이다. 하지만 특별한 글의 서식이나 화면 분할, 동영상 같은 것은 웹브라우저에서 쓰는 방식과 다른 워드프로세스 프로그램, 동영상 프로그램에서 쓰는 방식과는 차이가 있는 것 같다. 그렇다는 이야기는 웹브라우저에서 서식을 지정하고 동영상을 플레이함에 있어서 몇가지 제약이 있을 것으로 추정된다. 

이번 앙키로그(Ankilog)는 실습이자 실험이므로 간단하게 해당 실습을 환기할 수 있는 수준의 간단한 Anki 파일로 만들었으니 이점 참고하시고 아래의 파일을 다운받기 바랍니다. 

Anki 학습 파일 :  0004_웹브라우저를 열어보자..apkg

0003_HTML에 대한 간단한 소개

정식 명칭 : Hyper Text Markup Language

월드와이드웹(www)에서 웹페이지를 부호화하고 Hyper Text 링크를 제공하는 언어

Markup의 측면과 Hyper Text의 두 가지 측면이 있음

Markup적인 측면에서 머리말, 문단, 도표 등의 구조를 제공하고

Hyper Text적인 측면에서 앵커로 웹주소(URL)을 가리켜 다른 웹페이지의 링크를 제공한다.

Anki로 공부하시려면 아래의 파일을 다운받아 공부하시면 됩니다.

Anki 학습 파일 2가지 버전

0003_HTML에 대한 간단한 소개(기본_질의_응답_형식).apkg

0003_HTML에 대한 간단한 소개(빈칸_채우기_형식).apkg