웹에서 이미지를 html으로 img태그로 넣는 게 일반적이다. 하지만 HTML5에서 figure 태그를 추가하면서 이미지 캡션까지 담을 때 사용한다. 이외에도 이미지를 HTML이 아니라 CSS를 활용해 넣을 수도 있다.
웹에서 이미지 표현하기
CONTENTS
HTML 이미지 담는 IMG
웹에서 이미지를 넣은 가장 간단한 방법은 HTML에서 IMG태그를 사용하는 것이다. img 태그에 이미지가 있는 경로를 src 속성에 속성값으로 넣으면, 웹에서 이미지가 드러난다. 참고로 src 속성은 source을 축약한 것이다.
img 태그에 src 속성과 alt 속성은 필수로 들어간다. alt 속성에 들어가는 속성값은 이미지를 대체할 텍스트를 담는다. alt 속성에 담기는 속성값은 스크린 리더에서 읽혀지는 기능 뿐만 아니라 잘못된 경로를 적어서 이미지가 화면에 보이지 않을 때 alt 속성값이 화면에 나타나 이미지를 대체하는 기능을 지니고 있다.
또 하나 속성으로 title이 있는데, 이 title 속성은 반드시 들어갈 필요는 없다. title 속성은 a 태그에서 사용하는 title 속성처럼 튤팁 효과를 지닌다.
HTML에서 img 태그는 이미지를 담는 중요한 태그로, 반드시 인라인블럭요소라는 점을 주지해야 한다. 원칙적으로 img 태그는 인라인요소이므로 크기 변경이 불가능하다. 하지만 img 태그는 인라인요소이지만 유일하게 넓이, 높이를 줄 수 있는 블럭요소 특징도 보유하고 있다. 즉, img 태그는 속성에 width와 height를 사용해 속성값을 통해 넓이와 높이를 조절할 수 있는 인라인블럭요소라는 게 가장 중요한 포인트이다.
img 태그는 단독으로 사용하기도 하지만, 일반적으로 p, div 태그 또는 a 태그 안에 넣어서 사용한다. 또한 width, height를 img 태그 안에 속성으로 넣기도 하지만 인라인 스타일 방법을 사용해 넓이, 높이를 지정하기도 한다.
HTML5 이미지 추가 태그 figure
HTML5에서는 이미지를 담는 태그로 figure가 추가됐다. figure 태그는 이미지 캡션까지 담을 수 있도록 만들어졌다. figure 태그는 기존 img 태그를 담는 껍데기 태그 역할이다.
위의 코드처럼 figure 태그 안에는 기존 img 태그가 지닌 속성을 그대로 사용하고, 뒤에 이미지를 설명하는 캡션을 담는 figurecaption 태그가 담긴다. 참고로 figure 태그와 figurecaption도 인라인스타일 또는 CSS 파일을 통해 스타일을 줄 수 있다.
CSS로 이미지 표현하기
HTML로 이미지를 담는 img 태그와 figure 태그를 사용하는 방법 이외에 CSS로 이미지를 표현하는 방법도 있다. 이와 관련한 자세한 사용법은 CSS 백그라운드 이미지에서 따로 살펴봐야 할 만큼 범위가 넓다. 여기에서는 이미지를 HTML 이외에도 CSS로 담을 수 있다는 점만 알면 된다.
HTML 이미지와 관련하여 특별한 상황에서 사용하는 이미지맵과 picture 태그가 있다. 이미지맵은 뉴스레터를 제작할 때 자주 사용되므로, 사용 방법을 숙지할 필요가 있다.
여기에서는 참조할 수 있는 W3 Schools 페이지만 남긴다.
picture 태그는 여러 이미지를 한 번에 담을 수 있는데, 이를 활용해 브라우저 크기 또는 디바이스에 따라 다른 이미지를 보여줄 수 있다. picture 태그는 멋있긴 하지만 다른 방식으로도 동일한 기능을 표현할 수 있어, 그렇게 널리 사용되지는 않는다. 하지만 picture 태그는 매력적인 기능을 보유했기에 picture 태그를 애용하는 개발자들도 꽤 있다.
picture 태그도 필요 시에 참조할 수 있도록 링크만 추가한다.
