이번 포스팅에서는 이미지를 표시할 수 있는 이미지 태그와 리스트를 만들 수 있는 리스트 태그에 대하여 다뤄보겠습니다.
또한, 이미지 태그에 경로 지정이 필요하기 때문에, 상대경로와 절대경로에 대해서도 이야기해 보겠습니다.
1. 이미지 태그
웹 브라우저를 사용하다보면 텍스트와 이미지들이 다양하게 사용되는 것을 확인하실 수 있는데요.
적절한 위치에 이미지를 사용하면 이해도 더 잘되고, 시선을 끌기에도 유리합니다.
이렇게 이미지를 웹 브라우저에서 사용하기 위해서는 이미지 태그를 활용해야 하며, 이미지로 사용할 수 있는 파일 형식이 있습니다.
[웹에서 사용 가능한 이미지 파일 형식]
- GIF : 표시할 수 있는 색상 수가 256가지뿐이지만 파일 크기가 작아 아이콘 등의 작은 이미지에 많이 사용하며, 투명한 배경이나 움직이는 이미지를 만들 수 있습니다.
- JPG/JPEG : 사진을 위해 개발된 형식이며, GIF보다 다양한 색상과 명암을 표현할 수 있습니다.
- PNG : 투명 배경을 만들면서 다양한 색상 표현도 가능하여 최근에 가장 많이 사용하는 추세이며, 개인적으로도 가장 많이 사용하는 이미지 파일 형식입니다.
이미지로 사용할 파일이 준비되었다면 이미지를 삽입하기 위하여 <img> 태그를 사용하면 되는데요.
<img> 태그의 속성으로는 경로를 지정하는 "src"와, 대체 텍스트를 입력하는 "alt"가 있습니다.
이미지의 경로는 뒤에서 다룰 상대경로와 절대경로로 지정이 가능하며, 웹 접근성을 준수하기 위하여 대체 텍스트를 입력하는 것이 좋습니다.
시각 장애인의 경우 화면 낭독기를 통하여 웹 브라우저를 듣기 때문에, 이미지에 대체 텍스트가 입력되어 있으면 시각 장애인도 어떤 이미지인지 파악이 가능합니다.
또한, <img> 태그에는 width, height 속성으로 이미지 크기를 조정할 수도 있습니다.
이미지 크기를 조정할 때에는 이미지 비율을 유지한 채로 조정하는게 화질면에서 유리하며, 레티나 디스플레이에 대응하기 위하여 2배 이미지를 1배로 줄여 사용을 많이 합니다.
2. 상대경로, 절대경로
이미지의 경로는 상대경로와 절대경로로 지정이 가능하다고 말씀드렸는데요.
상대경로와 절대경로의 지정 방법에 대하여 예시를 통해 확인해보겠습니다.
[상대경로]
<img src="../img/test.png" alt="테스트 이미지">
[절대경로]
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbeqKfB%2FbtsbbsLgGs5%2FObPZVckhVng4s9A8AkmEK0%2Fimg.jpg" alt="테스트 이미지">
상대경로는 웹 문서 파일의 위치를 기준으로 정해지는데요.
현재 작업중인 HTML 파일과 이미지 파일이 같은 폴더라면 "test.png"와 같이 파일 이름만 적으면 됩니다.
상대경로 예시의 "../"은 이전 폴더로 이동하는 의미이며, 풀어서 해석해보면 현재 작업중인 HTML 파일의 이전 폴더로 이동한뒤 img 폴더로 들어가 test.png 파일을 불러오는 것입니다.
절대경로는 웹 상의 이미지 링크 주소를 복사하여 입력해 주시면 됩니다.
3. 리스트 태그
리스트를 표현하는 태그에는 <ol>, <ul>, <dl>이 있는데요.
어떤 의미를 갖고, 어떤 상황에 사용해야 하는지 알아보겠습니다.
<ol> : <ol> 태그는 ordered list의 약자로, 순서가 있는 리스트를 표현할때 사용합니다.
<ol>
<li>1. 냄비에 물을 넣고 끓인다.</li>
<li>2. 물이 끓으면 면과 스프를 넣고 끓인다.</li>
<li>3. 기호에 맞게 파나 계란 등을 넣고 끓인다.</li>
</ol>
<ol> 태그의 하위 요소로는 <li> 태그가 위치해야 하며, 발생하는 순서에 맞게 사용하면 됩니다.
<ul> : <ul> 태그는 unordered list의 약자로, 순서가 없는 리스트를 표현할때 사용합니다.
<ul>
<li>리그오브레전드</li>
<li>배틀그라운드</li>
<li>스타크래프트</li>
</ul>
<ul> 태그의 하위 요소로는 <ol> 태그와 동일하게 <li> 태그가 위치해야 하며, 순서와 상관없이 나열하면 됩니다.
<dl> : <dl> 태그는 definition/description list의 약자로, 용어와 그에 대한 정의를 나타낼때 사용합니다.
<dl>
<dt>동물원</dt>
<dd>일정한 시설을 갖추어 살아있는 동물(좁은 의미에서는 육상동물)을 사육하고 관람시키는 곳</dd>
<dt>아쿠아리움</dt>
<dd>물속에 사는 생물을 모아 놓고 기르는 설비</dd>
</dt>
<dl> 태그는 위의 <ol> 태그와 <ul> 태그와는 다른 구조를 갖고 있는데요.
용어와 그에 대한 정의를 나타내야 하기 때문에, 하나의 세트로 구조가 형성된다고 생각하시면 됩니다.
용어를 입력하는 <dt> 태그를 사용하고, 용어에 대한 정의를 입력하는 <dd> 태그를 사용하면 됩니다.
만약, 용어 하나에 여러 개의 정의가 들어간다면, <dt> 태그 하나에 여러 개의 <dd> 태그를 사용해도 무관합니다.
리스트 태그는 시멘틱 마크업을 위하여 각 태그의 의미에 맞게 사용하는 것을 유념해 주시면 좋을 것 같습니다.
오늘도 읽어주셔서 감사드립니다.
좋은 하루 보내세요! :)
댓글