[HTML, CSS] 헤더 아이콘 수정 1

의미있는 아이콘, 없는 아이콘을 구별하여 다른 방법으로 icon 을 태그해야한다.

 

이런 아이콘들은 의미있는 아이콘이다.

 

그런데 요즘은 이미지를 background 속성으로 태그한다.

이는 웹 접근성 때문인데, 다룸에 가서 대체 텍스트 속성을 보면 

alt 속성을 이용해서 제공하라는 규칙이 나와있다. 

그래서 img 를 쓰게되면 무조건 alt 태그를 써야만 한다.

 

그런데 naver 태그를 보면 img 태그를 안쓴 대신에 대체문자를 사용했다. 

이미지가 없어도 Naver라고 뜸 - span 태그로 되어있음.

 

뭔가 강의 때랑 태그가 좀 달라진 것 같다

이 방식은 이미지를 background 로 넣고 가상으로 대체 문자를 만들어준다. (웹표준준수때문) -> 이미지 스프라이트 기법을 사용.

이는 작업하기 편하고 이미지 용량이 줄어든다.

 

- 이미지 스프라이트 기법

http://darum.daum.net/convention/image

다룸, Darum 웹표준을 다루다

 

허나 이미지 스프라이트를 쓰면 웹표준 준수를 하지 못하기 때문에,

가상으로 대체 문자를 만들어준다. (-> IR 효과)

이 방식은 처음에는 만들기 어렵지만 나중으로 갈 수록 더 작업하기 편함!

 

- 코드 작성

               <!-- 이미지를 표현하는 방법
                   1. img 태그로 표현 (의미가 있을 때) / alt 태그 - 대체 문자 표현 
                   2. background 속성으로 표현 (의미가 없을 때) - 대체 문자 x
                   3. (최근) 이미지를 background 속성으로 표현 - 웹 표준을 준수하기 위해서는 
                       가상으로 대체 문자를 만들어줌 (IR 효과)
                       이미지 스프라이트 효과
                -->
               <div class="header-icon">
                   a[#].icon$*4>span{icon$}
               </div>

여기서 a[#].class$*4>span{icons} 는 emmet 기능으로써

               <div class="header-icon">
                   <a href="#" class="icon1"><span>icon1</span></a>
                   <a href="#" class="icon2"><span>icon2</span></a>
                   <a href="#" class="icon3"><span>icon3</span></a>
                   <a href="#" class="icon4"><span>icon4</span></a>
               </div>

요렇게 만들어준다! 

 

 

 

 

---

 * emmet 기능을 더 알고싶다면

https://docs.emmet.io/cheat-sheet/

Cheat Sheet