CSS3 ::before ::after 가상요소 활용하여 폰트어썸 아이콘 적용시키는 방법
폰트어썸(Font Awesome) 이라고 하는 아이콘 형태의 폰트가 있습니다. 이것을 이용하면 직관적이며 개성 넘치는 웹페이지를 구현할 수 있습니다. 이미지가 아닌 폰트로 적용되기 때문에 font-size 같은 스타일 요소로 크기를 변경할 수 있으며 폰트처럼 색상 변경도 가능합니다. CSS의 가상요소와 이 폰트어썸을 활용해서 작업이 가능합니다. 만약 한두개의 위치에만 폰트어썸을 사용해야 한다면, HTML 태그 안쪽에 폰트어썸에서 제공하는 i 태그를 그대로 붙여넣기를 하면 손쉽게 적용할 수 있지만, 꽤 많은 공통 태그 부분에 일괄적으로 적용해야 한다면 일일히 수동으로 넣는건 한계가 있습니다. 물론 수동으로 삽입하여 쓸 수도 있지만, 일괄적으로 변경하고자 할 때 꽤나 번거롭습니다. 그래서 가상요소를 이용한다..