CSS3 ::before ::after 가상요소 활용하여 폰트어썸 아이콘 적용시키는 방법

폰트어썸(Font Awesome) 이라고 하는 아이콘 형태의 폰트가 있습니다. 이것을 이용하면 직관적이며 개성 넘치는 웹페이지를 구현할 수 있습니다. 이미지가 아닌 폰트로 적용되기 때문에 font-size 같은 스타일 요소로 크기를 변경할 수 있으며 폰트처럼 색상 변경도 가능합니다.


CSS의 가상요소와 이 폰트어썸을 활용해서 작업이 가능합니다. 만약 한두개의 위치에만 폰트어썸을 사용해야 한다면, HTML 태그 안쪽에 폰트어썸에서 제공하는 i 태그를 그대로 붙여넣기를 하면 손쉽게 적용할 수 있지만, 꽤 많은 공통 태그 부분에 일괄적으로 적용해야 한다면 일일히 수동으로 넣는건 한계가 있습니다. 물론 수동으로 삽입하여 쓸 수도 있지만, 일괄적으로 변경하고자 할 때 꽤나 번거롭습니다. 그래서 가상요소를 이용한다면 일괄 적용이 되어 편리한 유지보수가 가능합니다.


before / after 가상요소 활용하여 Font Awesome 적용시키기

가상요소란 말 그대로 HTML상 마크업이 없는 요소를 임의로 만들어내서 적용시키는 스타일 방식입니다. 가상 클래스는 (:hover 같은 것) 콤마가 1개지만, 가상요소는 보시는 것 처럼 콤마가 두쌍입니다. 사실 하나만 작성해도 적용은 됩니다. 가상요소가 지원되는 브라우저는 다음과 같습니다.


익스플로러9 이상, 파이어폭스 v1.51 이상, 크롬, 오페라, 사파리 v4.0 이상


그럼 우선 아래의 예제부터 먼저 살펴봐주시기 바랍니다.


See the Pen oJaeax by rgy0409 (@rgy0409) on CodePen.


첫번째는 p태그들이 엄청 많이 있는 경우입니다. 지금 보시면 앞쪽에 폰트어썸 아이콘 중 하나인 ">" 가 적용이 되어있는것을 확인하실 수 있습니다.  HTML 상태를 보시면 분명 p태그에는 텍스트만 있으며 i와 관련된 폰트어썸 태그는 없습니다.


바로 CSS의 가상요소로 적용이 된 상태입니다. 어떤식으로 적용시키는건지 알아보겠습니다.



https://fontawesome.com/start


폰트어썸 홈페이지를 들어가셔서 가장 먼저 할 일은 폰트어썸 CDN 주소를 가지고 오는 일 입니다. 위의 홈페이지에 접속하시어 현재 표시된 저 부분의 주소를 복사하시고 적용시키고자 하는 HTML 문서의 <head> 안쪽에 붙여넣기를 해주시면 됩니다. 다 복사할 필요는 없고 css 까지만 복사하시면 됩니다. 괄호 닫는것을 유의해 주세요.




그리고 검색창에서 바로 아이콘을 영어 이름으로 검색하시거나 Icons 메뉴로 들어가시면 됩니다.




저는 오른쪽 관련 아이콘으로 검색했습니다. 오른쪽이 영어로 right 이므로 해당 키워드로 검색을 했고 원하는 아이콘을 찾았습니다. 반드시 영어로 검색해야 나옵니다. 찾으셨으면 해당 아이콘을 눌러주세요.




그러면 폰트어썸 아이콘 상세 페이지로 들어가게 됩니다. 여기서 필요한 부분은 딱 두 가지 입니다. 파란색으로 표시된 부분은 알고만 있으시면 되고, 실제 사용되어질 부분은 저 빨간색 부분입니다. 빨간색 부분을 클릭하시어 복사합니다. 이제 CSS 스타일에 적용시킬일만 남았습니다. 먼저 위의 예시에 있는 부분을 한번 더 아래에 작성해 보겠습니다.


.p1::before {

    content: "\f054";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    margin-right: 10px;

}


선택자가 p1이라고 하는 클래스값을 가지고 있는 모든 태그들의 ::before 이므로, ~이전 이라는 뜻이 되니까, p1 클래스 요소의 이전에 새로운 요소를 만들겠다는 뜻이 됩니다. 예제에서는 p태그가 모두 선택되어지게 됩니다. 그리고 빨간색으로 표시된 부분을 잘 봐주시기 바랍니다.


가상요소에는 늘 content 라고 하는 스타일이 들어갑니다. 말 그대로 콘텐츠 내용을 넣는 공간으로 큰 따옴표 안에 한글 텍스트를 입력하면 그대로 p태그 앞에 입력한 텍스트가 출력됩니다. f054 라고 하는건 우리가 아까 폰트어썸에서 제공하는 아이콘 코드라는걸 기억하실 것입니다. 그런데 앞에 \이 붙습니다. 윈도우에서는 "\"로 표시가 되지만 컴퓨터에서는 "\" 으로 인식합니다. 이 기호의 이름은 역슬러시라고 합니다. 그리고 폰트어썸에서 제공하는 이 코드를 유니코드라고 합니다. 폰트어썸의 유니코드를 content 안쪽의 큰 따옴표 안에 \를 입력 후, 그대로 붙여넣기만 해주시면 됩니다.


여기서 끝이 아닙니다. 두가지를 더 작성해 주셔야 합니다. font-family와 fint-weight 부분입니다. font-family는 무조건 예시에 나온대로 "Font Awesome 5 Free" 라고 입력해 주세요. 대소문자 구별 있으며 띄어쓰기 구별 있으니까 유의해 주시기 바랍니다. 또한 font-weight에도 규칙이 있습니다. 규칙은 아래와 같습니다.


Solid → 900

Regular, Brands → 400

Light → 300


방금전에 폰트어썸 사이트에서 파란색 표시가 된 부분을 유심히 봐달라고 말씀 드렸을 겁니다. 거기에는 해당 아이콘이 Solid 방식인지, Regular 혹은 Brands 방식인지, 마지막으로 Light 방식인지 표시되어 있습니다. 각 아이콘의 방식을 보시고 font-weight에 지정된 수치대로 폰트 굵기를 입력하셔야 정확히 출력이 됩니다. 지금까지 언급한 것 중 하나라도 맞지 않으면 폰트 아이콘이 □ 으로 표시가 되면서 깨진채로 출력이 됩니다. 예시에서는 정상적으로 마크업이 되어 있기 때문에 폰트어썸이 정확히 깨짐없이 출력이 되고 있습니다.


::after 도 마찬가지 입니다. before가 지정된 태그 요소의 앞쪽에 적용이 된다면 after는 반대인 맨 뒤에 적용이 됩니다. 해당 예시가 두번째 경우 입니다. 마우스를 올렸을 때, 빨간색 추천 아이콘이 표시가 되고 있을 것 입니다. 방법은 방금 위에서 설명드린 부분과 동일합니다. 추가 설명할 부분이 있다면 선택자를 지정하는 부분입니다.


.ul1 li:hover::after


이 뜻은 ul1 이라고 하는 클래스명을 가지고 있는 태그의 자식요소 li에 :hover 가 되면, ::after 가상요소가 적용되는데 맨 뒤에 적용이 된다는 의미를 갖습니다. 그래서 추천 아이콘이 텍스트 맨 마지막에 적용이 되는 것 입니다.


이제 사용법도 배우셨고, 가상요소가 어떤 역할을 하게 되는지도 알게 되셨으니 실제로 응용해 보시기 바랍니다. 눈으로 보고 직접 코딩을 해보지 않으면 금방 까먹더라구요. 저 역시 새로 배우는 스킬들을 바로바로 포스팅을 하면서 복습겸 한번 더 익히게 되니까 확실히 기억에 오래 남습니다. 그러면 나만의 멋진 홈페이지를 만들어 보시기를 바랍니다. 끝.





이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

댓글(1)

Designed by JB FACTORY