[CSS] 이미지를 넣는 2가지 방법: img 태그, background 선택자

웹에 이미지를 띄우려면

html 파일에 <img> 태그로 넣거나

<img src="" alt="">

 

css 파일에 background를 넣는다.

background: url();

 

주변 개발자분들도 그렇고 보통은 후자의 background로 이미지를 넣는데 <img>로 하게 되면 html 파일이 늘어날 수록 관리하기가 힘들어지기 때문이라고 한다. css의 background로는 한 파일에서 여러 방법으로 링크를 정리할 수 있어서 선호하는듯

 

1. 이미지 대체 텍스트(IR기법)

css의 background는 <img src="" alt="">의 alt처럼 이미지를 설명할 수 있는 글자를 입력할 수 없으므로 대체텍스트가 필요하다. 그래서 html에서 이미지가 위치할 부분에 span이나 p처럼 특정 태그 안에 글자를 적고, 감추는 것이 좋다.

<span class="">북극곰</span>

 

 

2. 이미지 대체 텍스트 감추기

class=""에는 글자를 감추기 위해 공통으로 설정한 조건의 class가 들어가는데 이 방식 외에도 화면에 보이지 않도록 하는 방법은 여러가지가 있다.

span{display: none;}
span{opacity: 0;}
span{position:absolute; left:-9999px;}

 

이 3가지를 자주 들었는데 이 방식으로 글자를 감추게 되면 웹에서 보이지 않는 것 뿐만 아니라 화면 낭독기가 읽지 못한다.

 

*화면 낭독기: 시각 장애인들이 웹사이트를 이용할 때 불편함이 없도록 브라우저에서 음성으로 읽어주는 기능