사이트를 만들다 보면 이미지를 넣어야 하는 경우가 많은데 나는 작은 이미지들은 html에 img 태그로 다 넣고 크게 깔리는 배경들만 css에서 background 속성으로 이미지를 채웠었다. 하지만 이는 좋은 방법은 아니라고 한다.
🤔 img 태그와 background-img 속성의 차이점은?
이 둘의 가장 큰 차이점은 img 는 시맨틱 태그라는 점이다. 시맨틱 태그는 컴퓨터와 사람 모두에게 의미를 명확하게 설명해주는 역할을 한다. 그럼 의미를 명확하게 설명해주는 시맨틱 태그인 img 를 사용하면 어떤 점이 좋을까?
검색시 노출이 된다.
시각장애가 있는 사용자가 화면 판독기로 페이지를 탐색할때 탐색이 가능하다.
이미지가 로딩이 되지 않을때 alt 속성으로 대체 텍스트가 뜬다.
html이 구문 분석이 될때 요청이 이뤄지므로 성능이 좋다. 예) img태그로 쓰여진 이미지를 우클릭 하면 웹이 미지로 인식을 해서 이미지 저장, 이미지 주소 복사 등이 뜨지만 background 속성 으로 이뤄진 이미지는 우클릭하면 웹이 이미지로 인식을 하지 못하는것을 볼 수 있다.
결론
background-img 은 디자인적인 요소로 사이트를 꾸며주거나 이미지를 불러오지 못해도 콘텐츠에 영향을 미치지 않을때 사용하는 것이 좋다. 만약 의미가 없는 이미지를 img 태그를 사용해서 남발하게 되면 유의미한 정보처리가 불가능해진다.
img 태그 사용법
<img src="경로" alt="대체텍스트">
img 태그에서 alt의 역할은 매우 중요합니다
src에 지정한 이미지를 제대로 불러오지 못했을 때 alt 값에 적힌 대체 텍스트를 노출합니다.
시각장애인을 위한 스크린리더를 지원합니다
💡 img를 사용할 때 주의해야할 점은 이미지 밑에 하단 공간이 생긴다는 점입니다 이미지 밑에 생기는 하단공간 하단 공간이 생기는 이유는 img 태그가 인라인 요소 이기 때문인데 img의 세로 정렬이 글자의 baseline을 따르게 됩니다. 이런 오류를 해결해 주기 위해선 css 에서 vertical-align:top으로 인라인 요소의 수직 정렬을 맞춰주면 해결됩니다. line-height
img style 속성들
이미지는 inline 요소이나 이미 내장된 이미지의 크기가 정해져 있어 width, height, margin, padding, border등 다양한 속성들을 img에 적용할 수 있다. 내가 가장 어려웠던 부분은 이미지의 비율을 맞추는 것이었다. 아래 처럼 가로가 긴 이미지를 정사각형 박스안에 꽉 채워서 비율에 맞게 넣어보도록 하자
🤔이미지 비율은 어떻게 정할까?
먼저 img 의 비율을 정사각형으로 만들어 보자! aspect-ratio 는 기본 가로 세로 비율을 결정하는 속성이다. 기본 가로 세로 비율은 width 를 따릅니다. 만약 height 앞의 문자가 생략 되면 그때 height 의 값을 따른다.
img {
aspect-ratio: 비율 / 비율;
}
🤔 이미지 비율은 어떻게 맞출까?
현재 aspect-ratio 를 사용해서 이미지의 비율을 1:1로는 맞췄지만 이미지의 세로 길이를 억지로 늘렸다보니 늘어난 상태이다 이걸 해결하는 속성이 object-fit 이다.
💡object-fit: 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정하는 속성
fill : initial value 요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어납니다.
contain: 대체 콘텐츠의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다.
cover: 대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다.
댓글