Q
나는 최근에 font icons에 대해 많은 것을 읽었고 내가 보는 거의 모든 사이트는 글꼴 아이콘을 DOM에 삽입하기 위해 속성 과 함께 :before및 :after의사 요소를 사용합니다.
그러나 글꼴 아이콘에 이러한 유사 요소를 사용하는 것의 이점은 없습니다.
사실, 나는 그것들을 사용하는 데 두 가지 큰 단점이 있다고 생각합니다.
IE7 이하에서는 지원되지 않고, 그것들(:before.:after)을 사용하여 콘텐츠를 배치하기 어려울 수 있습니다
나는 그것이 스크린 리더와 관련이 있을지도 모른다고 생각했지만, 요즘은 모든 글꼴 아이콘 서비스가 글꼴 아이콘을 유니코드 PUA(Private Use Areas)의 코드 포인트에 할당하는 것 같습니다. ), 어쨌든 스크린 리더는 소리내어 읽지 않습니다.
→ 웹 접근성도 아닌 것 같다?
A
•
이론적인 이유다. 생성된 콘텐츠가 document의 일부로 간주되지 않고 semantic한 가치가 없다는 것이다. 검색엔진과 오디오 페이지 리더, 스크린 리더에 의해 무시되어야만 한다.
pseudo elements 방식은 no semantic인 visual decoration을 추가하는 걸 원할 때 적합하다.
예를 들면 배경이미지로 항목을 강조표시하거나 이미지를 alt=””로 표시하는 것과 비슷하다.
•
font icons는 semantic하게 디자인되어 있지 않다는 건 동의한다.
font icons를 많이 사용하는 사이트를 디자인 중인데 link에 대한 콘텐츠로 아이콘이 전부다. 그래서 그냥 아이콘만 적을 수 밖에 없다면 HTML entities를 사용하는 것이 가장 좋을 것이다.
U+E000 같은 문자가 여러 의미를 가질 수 있는 제멋대로인 code point인 건 맞다.
•
각각의 선언에 대한 개별 img 태그보다 CSS background-image를 통해 그것들을 로드하는 것이 훨씬 쉽다.
내 사이트에서는 한 페이지에 최대 30개의 아이콘이 일부는 호버 상태를 가질 수 있습니다. HTTP 요청을 줄이기 위해 sprite가 논리적입니다.
데스크탑 브라우저/가정용 광대역에서는 그리 큰 문제가 되지 않을 수 있지만, 모바일 장치에서는 확실히 문제가 되고 있으며, 현대에는 트래픽의 대부분이 여기서 오는 것으로 보인다. 모바일에 적응해야 할 때입니다.
•
브라우저 간에 호환되지 않는 CSS와 HTML을 갖게 한 원인이며, 이제 겨우 바로잡기 시작한 것입니다
•
•
Few suggested to use img as it's semantic and contains alt tag.
But, we should not also use img because even empty src sends a request to server.
•
<span class="icon-fb" role="img" aria-label="facebook"></span>
•
스타일링 때문에 추가 마크업을 사용하는 건 나쁜 관행이다. 그래서 내용물과 스타일을 구분하기 위해서 유사 요소가 발명됐다. 하지만 기존 브라우저를 지원해야 할 필요성을 느끼면 어쩔 수 없이 이러한 작업을 수행해야 할 때가 있습니다.
추신. 아이콘이 'i'로 시작하고 <i> 태그가 있다는 사실은 완전히 우연의 일치입니다.
•
<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">
이렇게 하면 아이콘인지 툴팁도 얻을 수 있고 <i>보다 낫다. w3c 표준을 통과한다.
가상 요소 선택자 pseudo elements는 꾸밈을 위한 의미없는 태그를 추가하는 대신 가상으로 처리하는 용도
가상 클래스 선택자 pseudo class는 element의 특별한 상태를 지정하는 용도다.
:before
:after
가상 요소 선택자는 꾸밈을 위해서 의미없는 태그를 더 추가해야 될 때, 태그 대신에 가상으로 처리해 주는 쓸모 많은 css 기능입니다. 만일 html 구조에서 필요한 내용이라면 가상 요소 선택자로 만들면 안되겠죠~
의미없는 태그를 쓰지 않도록 도와줌, 태그 최소화.
어떤 사항일 때 css 가상 요소 선택자를 사용하나요?
•
목록형 꾸밈
•
버튼 꾸밈
•
간단한 아이콘 만들기(닫기버튼, 화살표 등) ** 도형을 만들 때 주의할 점: 보여지는 픽셀두께가 세밀하지 않기 때문에 비주얼적으로 중요한 아이콘이면 이미지를 쓰는 것을 추천
•
이미지 아이콘을 넣고 싶을 때
•
꾸밈 한글을 넣고 싶을 때 (tag의 #, 또는 콤마 등)
:before 와 ::before의 차이
차이는 없다. 오히여 더블콜론(::)::before을 쓴다면 ie8 이하 버전은 적용이 되지 않기 때문에 클론 하나만(:):before 쓰는 것이 좋다고 볼 수 있다.css2에서는 콜론이 하나였다가, css3에는 더블클론으로 바뀌었다.
가상선택자 적용이 안되는 경우
1.
폼(form, input...) 태그와 이미지 태그(img)는 가상선택자가 적용되지 않는다.(이 부분은 지금까지도 몰랐던 사실.. 예시를 만들면서 알게됨)가상선택자 이슈
2.
ie7 이하버전은 지원하지 않는다.
3.
ie8 이하버전은 더블콜론(::)이 적용되지 않음
