🚩 img vs background-image
HTML에는 img태그가 있고 CSS에는 background-image라는 속성이 있다. 두 개의 기술 모두 이미지를 웹페이지에 넣는 방식이다. 두 가지는 어떤 차이가 있고, 언제 사용하는게 좋을까?
대체 텍스트
HTML
<img src="이미지 경로" alt="이미지 설명">CSS
background-image: url("이미지 경로");위의 코드를 보면 쉽게 확인할 수 있듯이 HTML의 img태그에서는 이미지에 대한 설명을 줄 수 있지만 CSS의 background-image에서는 바로 이미지 설명을 줄 수 없다. 이미지 설명 텍스트는 검색 엔진이 인덱싱할 수 있게 돕기 때문에 SEO에 긍정적인 역할을 한다. 또한 이미지 설명은 스크린 리더에게도 읽혀 웹 접근성 측면에서도 중요하다. 따라서 img태그를 사용한다면 alt속성이나 title 속성을 사용하는 것이 좋겠다.
background-image를 사용한다고 해서 대체 텍스트를 아예 줄 수 없는 것은 아니다. IR기법을 사용하면 가능한데 이는 이후에 다시 자세하게 알아보도록 한다.
이미지 개수
img 태그에서는 하나의 이미지만 지정할 수 있지만 background-image를 사용하면 여러개의 이미지를 쌓임 맥락에 따라 배치될 수 있도록 하는 것이 가능하다.
background-image: url("../../image1.png"),
url("../../image2.png");역할
이미지가 단지 디자인적인 역할을 하지 않고, 컨텐츠와 밀접하게 연관되어 있을 때는 img태그를 사용한다. 반면에 단순히 컨텐츠와 연관되지 않고 그 자체로 디자인 요소일 경우에는 background-image를 사용한다. 따라서 로고, 아이콘 등의 반복적인 이미지들을 사용할 때 유용하게 사용된다.
성능
성능 측면에서는 img 태그를 사용하는 것이 background-image속성을 사용하는 것보다 더 좋다. 큰 사이즈의 이미지를 background-image를 통해 가져오기 위해서는 꽤 오랜 시간이 걸리지만 img태그는 상대적으로 빠른 시간 내에 가능하다. 그러나 이후에 알아볼 IS기법과 background-image를 결합하여 함께 사용한다면 이미지 수정, 보관 등에 용이해지고 로딩 속도도 더 빨라지게 된다.
프린트
페이지를 프린트할때 그림도 함께 프린트되기를 원한다면 img를 사용하는 것이 좋다. img태그의 이미지도 함께 프린트 되도록 기본 설정되어 있기 때문이다. 반면 background-image에서는 이미지가 출력되지 않기 때문에 이미지가 출력되면 곤란한 경우에 주로 사용한다.
🚩 IR기법
IR(Image Replacement)기법은 이미지를 볼 수 없는 사용자에게 적절한 텍스트를 제공하는 것을 말한다. img 태그의 alt속성을 사용하여 대체 텍스트를 사용할 수 있지만 길이가 너무 길 때 IR기법을 사용하기도 한다. 또한 background-image를 사용할 때 IR기법으로 대체 텍스트를 제공한다.
사실 시각적으로 보이지 않게 하기 위한 방법 중 스크린 리더에서 인식되는 기법들이 진정한 IR기법이라고 볼 수 있다. 그래서 CSS를 사용하여 시각적으로 보이지 않게 하는 방법을 차근차근 알아보며 어떤 것이 올바른 IR기법인지 알아보려고 한다.
1. display:none
만약 어떤 엘리먼트에 display:none 속성을 준다면 그 엘리먼트의 내용은 물론 해당 공간도 차지하지 않게 된다. 영역이 존재하지 않기 때문에 클릭과 같은 이벤트가 동작하지 않는다. 요소가 아예 없는 것으로 인식 하는 것이다. 따라서 이 속성을 사용하면 검색 엔진과 보조기가 인식하지 못한다. 웹 접근성에 위배되기 때문에 사용을 지양하는 것이 좋다.
2. visibility: hidden
이 속성을 사용하면 컨텐츠가 보이지 않지만 여전히 공간은 차지하게 한다. display:none과 마찬가지로 클릭같은 이벤트가 작동하지 않으며 스크린 리더가 읽을 수 없기 때문에 웹 접근성이 떨어진다.
3. 요소의 크기를 0으로
width: 0;
height: 0;
font-size: 0;
line-height: 0;width, height, font-size, line-height를 0으로 설정하는 것 또한 시각적으로 보이지 않게 하는 방법 중 하나이지만 이 방법도 일부 스크린 리더가 인식할 수 없다고 한다.
4. opacity:0
이 방법은 opacity를 0으로 지정해 투명하게 만들어 눈에 보이지 않게 하는 방법이다. 이벤트가 동작 하고, 스크린 리더에는 읽히지만 visibility:hidden 처럼 여전히 공간은 남기 때문에 좋은 방법은 아니다.
5. text-indent
text-indent 속성은 들여쓰기, 내어쓰기를 해주는 속성이다. 값이 양수인 경우 들여쓰기가 되고, 음수이면 내어쓰기가 된다.
text-indent:-9999px이 방법은 내어쓰기를 아주 멀리까지 해서 화면에 보이지 않게 하는 기법이다. 이 방법을 사용하면 자리를 차지 하지만 스크린 리더에 읽힌다. 그러나 이것이 가장 좋은 방법은 아니다. 전체 레이어의 크기가 지나치게 크게 잡힐 수 있고, 검색엔진 최적화에 부정적인 영향을 줄 수 있기 때문이다.
6. clip, clip-path
지금까지 요소를 숨기기 위한 많은 방법이 있다는 것을 살펴봤지만 모두 좋은 방법이 아니었다. 이제 살펴볼 기법이 좋은 IR기법이다.
.hidden{
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: polygon(0 0, 0 0, 0 0); /* clip:rect(0px,0px,0px,0px) */
}코드의 속성을 하나씩 분석하면서 각 속성이 어느 역할을 하는지 알아보자.
일단 position:absolute로 설정 해서 일반 문서의 흐름에서 벗어나 다른 레이아웃들에 영향을 주지 않도록 해야 한다. position:absolute를 사용하면 주변의 다른 요소들이 absolute된 속성을 무시하고 배치된다는 것을 기억하자.
그 다음 width, height를 1px로 설정해 아주 작은 영역만 차지하도록 하고, margin:-1px로 화면 상에 안나오게 한다.
그 후 overflow:hidden으로 하여 컨텐츠가 숨겨지도록 한다.
clip과 clip-path는 요소의 특정 부분만 나오도록 하는 속성으로 이미지를 자를 때 유용하게 사용된다.
clip:rect(10px 30px 20px 50px);처럼 상우하좌 순으로 px을 지정해 자를 수 있다. 여기서는 0px로 설정해 아예 숨긴 것이다. 비슷한 속성으로 clip-path라는 것이 있는데 클리핑 범위를 지정하고 이 범위를 넘는 부분은 자른다. 여기서는 polygon( 0 0, 0 0, 0 0)으로 해 요소를 숨긴 것이다.
🚩 IS기법
HTML의 img태그가 background-image보다 로딩 속도가 빠르긴 하지만 img태그를 가지고 하나씩 이미지들을 불러오는데에는 시간이 오래 걸린다. 이때 유용하게 사용될 수 있는 방법이 IS(Image Sprite)기법이다. IS기법은 사용하고자 하는 이미지들을 모아 하나의 이미지로 만들어 그 이미지 파일만 서버에 요청하고, CSS의 background-image와 background-position 속성을 이용해 원하는 이미지가 있는 부분을 잘라서 사용한다. background-position은 배경 이미지의 위치를 지정하고 배치하는 속성이다.
.icon{
background-image:url('이미지 주소');
background-repeat:no-repeat;
display:inline-block;
height:66px;
width:66px;
}
.icon1{
background-position:0 0;
}
.icon2{
background-position:-66px 0;
}
.icon3{
background-position:-132px 0;
}
.icon4{
background-position:-198px 0;
}IS기법과 IR기법을 함께 사용하면 서버로의 요청 횟수를 최소화하여 웹 페이지의 로딩 속도를 줄일 수 있고, 이미지들을 관리하기 쉬워진다.
출처 및 참고
