책 씹어먹는 즐거움

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