img 태그 (image tag)

img 태그는 사진 파일을 불러올 수 있는 태그입니다.
빈 태그로 /는 작성해도, 안해도 상관 없습니다.
저는 주로 작성하는 편입니다.

그러면 무료 이미지 제공 사이트인 Pixabay에 있는 사진을 불러와보겠습니다.
(사진주소: https://cdn.pixabay.com/photo/2020/04/28/19/36/heart-5106075_960_720.png)

작성 예시

<img src="https://cdn.pixabay.com/photo/2020/04/28/19/36/heart-5106075_960_720.png" alt="" />

출력 결과

필수 속성

img태그는 반드시 src속성을 가져야 합니다. src에는 이미지 파일의 주소를 입력합니다.

그리고 필수 속성은 아니지만, 써주면 좋은 속성이 있습니다.
바로 alt속성입니다.
alt속성은 대체 텍스트(alternative text)속성으로, 접근성 요소입니다. 이 속성은 시각장애인을 위한 스크린 리더기가 이미지를 읽어주는 설명글을 입력하는 부분입니다. 동시에 이미지가 로딩이 되지 않았을 때 이미지에 대한 설명을 보여주기도 합니다.
웹 접근성을 향상시키기 위해 반드시 의미있게 작성하는 걸 권장합니다.

위에서 언급한 웹 접근성에 대해서는 다음 포스트에서 설명드리도록 하겠습니다.

경로(주소)

img태그에는 src속성을 필수로 작성해야합니다. 그런데 이 경로에는 두 가지 분류가 있습니다. 바로 절대경로와 상대경로입니다.

절대경로

예시

<img src="https://cdn.pixabay.com/photo/2020/04/28/19/36/heart-5106075_960_720.png" />

절대경로란, 어떤 위치에서 불러와도 항상 동일한 주소를 유지하는 경로를 의미합니다.
서버에 업로드되어 좌표가 고정된 경우나(https://~), 로컬에서 최상위 드라이브로부터 시작되는 주소, (C:\Documents~)등 현재 경로를 작성하고 있는 파일의 위치와 상관없는 고정 주소를 말합니다.

실생활의 예시로, 서울 시청의 주소를 작성해보겠습니다.

서울특별시 중구 세종대로 110

위같은 서울시청의 도로명 주소를 찾는다면, 서울시에서나 경기도에서나, 충청도, 전라도, 경상도, 제주 등 전국 어디에서 물어도 똑같은 결과를 알려줄 것입니다.

이처럼 내 (작성중인 파일의)위치에 상관 없이 고정된 주소를 절대 주소(Absolute Path)라고 합니다.

경로가 고정되어있기 때문에 어디서나 파일을 찾아낼 수 있지만, 그만큼 로딩 속도가 느릴 수 있다는 단점도 있습니다. 경로에 http://가 포함된 경우는 반드시 인터넷 연결이 필요합니다.

상대경로

예시

<img src="./img/my_logo.png" />

상대경로란, 현재 작성하고 있는 파일의 위치에 따라 달라지는 경로를 말합니다.
현재 파일을 기준으로 하기에, 동일한 파일을 참조하더라도 작성된 파일이 다르다면 전혀 다른 경로로 작성될 수 있습니다.

실생활의 예시로, 옆집의 주소를 생각해보시면 됩니다.

내가 살고 있는 곳의 옆집, 윗집?

경기도민의 옆집과 충청도민의 옆집, 전라도민과 경상도민, 제주도민의 윗집은 다를 수 밖에 없습니다.
왜냐하면 지금 내가 살고 있는 곳을 기준으로 정해지는 것이기 때문이죠. 옆집, 앞집, 아랫집, 윗집이라는 단어는 동일하지만, 어떤 곳에서 참조하느냐에 따라서 의미가 달라집니다.

이처럼 작성 중인 파일의 위치에 따라서 달라지는 주소를 바로 상대경로(Relative Path)라고 합니다.

내 위치를 기준으로 찾기 때문에 절대 경로에 비해 로딩 속도가 빠를 수 있습니다. 하지만, 작성중인 파일의 위치가 변경되면 경로를 계속 업데이트 해줘야 한다는 단점도 있습니다.

경로 작성법

경로를 작성할 때는 세가지 키워드만 알고 있어도 무방합니다.

/: 경로구분, 이동.
./: 현재 작성 중인 파일의 위치를 의미(html, css에선 생략 가능)
../: 상위 폴더로 이동

/는 폴더, 디렉토리를 열고 들어간다는 의미로 생각하시면 됩니다.
./는 말 그대로 현재 위치, 경로를 작성 중인 html, css 파일 등의 위치를 의미합니다. 생략해도 무방합니다.
../는 상위 폴더로 이동을 의미합니다.

예시를 보며 설명드리겠습니다.

├── my_logo.png
├── my_prjt
│      ├── index.html
│      └── my_style.css
└───────────

가상의 폴더 구조를 간단히 나타냈습니다.
현재 index.html과 my_style.css는 my_prjt폴더 안에 들어있습니다.
index.html이 현재 작성 중인 html파일이라 생각해봅시다.
저는 현 html 파일 보다 상위 폴더에 들어있는 my_logo.png를 불러오려고 합니다.
이 때, 현재 파일에서 로고 파일의 위치는 ./../my_logo.png 또는 ../my_logo.png로 작성할 수 있습니다.

경로는 위처럼 이미지를 불러오는데 사용할 수도 있고, html이나 css, js 등을 연동할 때, 멀티미디어 컨텐츠를 불러올 때도 사용할 수 있습니다.