[CSS] 파일 확장자별 아이콘 지정하기 + 배경이미지 디브에 맞추기

<a href="/files/downloadMessengerFile.files?savedname=savedname&oriname=myFile.pdf">
  <div class="flex-item">
    <div class="fileIcon"></div>
    <span id="filename">파일이름</span>
  </div>
</a>

/*파일 확장자별로 아이콘 띄우기*/
/* a 태그 href속성 마지막 글자(.pdf)로 비교 후 / fileIcon 디브의 배경에 확장자 이미지 불러오기*/
a[href$=".pdf"] .fileIcon {
  background-image: url("/icon/file_format/pdf-file-format-symbol.png");
  background-size: cover;
}
a[href$=".ppt"] .fileIcon {
  background-image: url("/icon/file_format/ppt-file-format.png");
  background-size: cover;
}
a[href$=".rar"] .fileIcon {
  background-image: url("/icon/file_format/rar-file-format.png");
  background-size: cover;
}

[CSS 풀이]

1. 선택자 지정

a[href$=".pdf"] :  href 속성 마지막 값이 .pdf로 끝나는 a 태그

이미지만 버튼으로 두고싶다면 a태그에 바로 지정해도 된다. 위의 예제는 파일이름과 아이콘을 같이 띄우기 위해 a 태그 아래의 fileIcon이라는 이름의 디브를 선택했다. 

2. 백그라운드 이미지를 저장해놓은 아이콘 경로로 지정

3. 디브의 크기에 맞춰서 아이콘 크기 늘리거나 줄이기

**위의 방법대로 하려면 %로던 px로던 내용물 없이 fileIcon 디브의 크기가 존재해야한다. 

 

[참고]

$ : 마지막 값 // a[href$=".abc"] : href속성 마지막 값이 .abc 로 끝나는 a 태그 선택

^ : 처음 값 // a[href^="hi"] : href속성 처음 값이 hi 로 시작하는 a 태그 선택

 

[참고]

배경이미지의 크기를 디브 크기에 맞추기

background-size: cover; 이미지 비율이 늘어나더라도 빈틈없이 매워짐

background-size: contain; 원본비율 유지하면서 최대한 맞추기