가상셀렉터로 icon 만들기

목차

 

 

저번에 가상셀렉터에 대하여 포스팅했었는데

 

가상셀렉터

가상셀렉터는 icon 생성하는데 많이 쓴다.

호버나 클릭 시 같은 건 Js 배우면 eventListener에서 좀 더 세세한 설정이 가능해서

그걸 많이 쓴다고 생각한다.

eventlistener

물론 간단한 건 css 가상셀렉터가 더 편하겠지만

Js에 이벤트 따로 css에 이벤트 따로면 그것 또한 이상하지 않을까.

 

어쨌든! 이번엔 가상셀렉터로 아이콘 만들기이다.

장점

가상셀렉터로 아이콘을 만들면 뭐가 좋을까.

음 일단 관리하기 편하다.

어떤 요소의 앞/뒤에 아이콘을 생성하다 보니,

어떤 요소를 옮기면 자동으로 따라가는 점과,

i태그를 써서 아이콘을 넣으면 태그가 2개가 필요할 수도 있다.

i태그 하나, 아이콘과 텍스트를 감싸는 태그 하나

 

두 번째로, 대량 생산할 때 편하다.

세팅된 가상셀렉터에 클래스 네임만 추가로 적어주면 되니 편하다.

 

만들기

아이콘은 대중적으로 잘 쓰이는 Font Awesome을 쓰겠다.

아직 Font Awesome의 사용법을 모르겠다면,

 

무료 icon 쓰기 / fontAwesome

해당 포스트에서 익히고 오자.

지금은 다른 사이트에서 쓰고 있을지라도,

언젠가는 쓰는 날이 올만큼 정~말 자주 쓰이는 사이트다.

 

설명서 읽기

간혹 나중에 사용법을 까먹더라도,

설명서가 어디 있는지만 안다면 금방 해결할 수 있다.

Font Awesome

폰트어썸 사이트에 들어간다음,

Font Awesome 사이트 상단의 Docs 메뉴를 눌러주자.

그 후,

우측 메뉴 리스트에서 좀 밑에 부분에서

CSS Pseudo-Elements를 찾아 클릭해주자.

 

Font Awesome

그럼 해당 창이 뜨게 되는데,

주목해야 할 부분은

이 부분과

이 부분이다.

 

가상셀렉터로 아이콘을 만들 때,

3가지 항목이 필요한데,

• font-family  : 글씨체
• font-weight : 글자 굵기
• content      : 글자 내용

이다.

아이콘이 아니더라도 이 3가지는 글자를 꾸밀 때 자주 쓰는 설정이니

기억해두자.

표를 보면 무료로 사용할 때 제한된 font-weight와,

font-family를 쓸 수 있다는 걸 알 수 있다.

font-weight	font-family
400	Font Awesome 5 Brands
900	Font Awesome 5 Free

위의 두 가지 사항만 가능하다.

코딩

이번 실습은 Font-Awesome에서 보여주는 실습을 써보자.

<style>
  .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  .login::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
  }

  .tps::before {
    font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea";
  }

  .twitter::before {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }
</style>

<ul style="margin: 0;">
  <li><span class="icon login"></span> Login</li>
  <li><span class="icon tps"></span> TPS Reports</li>
  <li><span class="icon twitter"></span> Twitter</li>
</ul>

span 에다가 icon과 내용 두 개의 클래스를 부여했다.

전체적인 class인. icon의 가상 클래스엔 공통 설정을,

개별 class인 내용엔 각자 콘텐츠와 family를 설정했다.

 

커스터마이징

아이콘 외에 가상셀렉터를 커스터마이징하고 싶다면,

<style>
  .login::before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #71c9ce;
    border-radius: 10px;
  }
</style>

<div class="login">Login</div>

간단하게 했을 때 이렇게 되는데,

일단 content에 무조건 무언가를 설정해야 한다.

undefined랑 null이랑은 다르다.

 

둘째로 기본 display설정이 inline인데

inline특징은, 내용만큼만 크기가 설정된다.

그렇기 때문에, inline-block로 설정 후,

크기를 설정해줘야 한다.

끝