【CSS】 SNS 아이콘을 글자로 만드는 방법 ⋆ Our Small Joy

SNS 버튼 만들기

이번 포스트에서는 SNS 버튼을 만드는 방법에 대해서 알아보겠습니다. SNS 버튼을 만들려면 해당 SNS의 이미지가 필요합니다. 이러한 이미지를 직접 만들려면 굉장히 성가신 작업이 되겠죠? 하지만 Font Awesome을 이용하면, 직접 이미지를 만들 필요없이 CDN으로 이미지를 다운로드하여 마치 폰트처럼 사용할 수 있습니다.

[1] Font Awesome 사용법

예제 목표

Font Awesome의 기본 사용법을 알아보겠습니다.

전체 코드

먼저 전체 코드와 결과부터 보겠습니다.

HTML

1
2
3
4
5
6
7
<link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css”>
<div id=“wrapper”>
    <a href=“#”><i class=“fab fa-facebook-f”></i></a>
    <a href=“#”><i class=“fab fa-twitter”></i></a>
    <a href=“#”><i class=“fab fa-instagram”></i></a>
    <a href=“#”><i class=“fab fa-youtube”></i></a>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    * {
        box-sizing: border-box;
    }
    #wrapper {
        height: 100%;
 
        display: flex;
        justify-content: center;
        align-items: center;
 
        margin: 0 auto;
        max-width: 1180px;
        padding: 0 10px;
        overflow: auto;
    }
</style>

RESULT

코드 설명

코드에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

<link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css”>

출력 결과가 없습니다.

구현 목표
- Font Awesome을 CDN 방식으로 다운로드하는 방법을 알아봅니다.
<link rel=”stylesheet” href=”CSS 파일 주소”>
- CSS 파일을 여러가지 방법으로 다운로드 할 수 있습니다. 이 중에서 link 태그를 이용하여 다운로드 받아보겠습니다.
- rel 속성
 - relation의 약자로써, 불러올 파일과의 관계를 뜻합니다. 여기서는 CSS 파일을 다운로드하기 때문에 stylesheet라고 넣으면 되겠습니다.
- href 속성
 - hypertext reference의 약자로써, 불러올 파일의 주소를 뜻합니다. 여기서는 CDN 방식으로 다운로드하는데, 위의 주소를 그대로 사용해도 되고, 최신버젼의 CDN을 받고자 한다면 cdnjs 홈페이지에서 찾아 볼 수 있습니다.

<div id=“wrapper”>
    <a href=“#”><i class=“fab fa-facebook-f”></i></a>
    <a href=“#”><i class=“fab fa-twitter”></i></a>
    <a href=“#”><i class=“fab fa-instagram”></i></a>
    <a href=“#”><i class=“fab fa-youtube”></i></a>
</div>
　

구현 목표
- SNS 아이콘을 만들기 위해 어떻게 HTML을 작성하는지를 알아봅니다.
<div id=”wrapper”>
- 예제를 둘러쌀 기본적인 래퍼를 하나 만듭니다. 래퍼의 필요성과 개념은 [참고2. 래퍼의 기본 개념과 CSS 설정]에 자세히 다루고 있습니다.
<a href=”#”></a>
- 이 부분이 Font Awesome의 핵심 구현 부분으로써, AI 패턴(a태그와 i태그)으로 기억하면 좋습니다. 최외각에는 클릭시 해당 홈페이지로 이동할 수 있도록 a 요소를 적어주고, 그 안에 SNS 아이콘을 만들 i 요소를 적어줍니다.
- <a href=”#”>
 - a요소의 href 속성은 hypertext reference의 약자로써, 클릭시에 이동할 주소를 적어주면 됩니다. 여기서는 단순히 예제이므로 따로 주소를 적진 않았습니다. 참고로 #은 특정 id값을 가지는 요소로 이동할 때 사용합니다. [참고4. a href=”#”의 사용법]
- 
 - SNS 종류를 선택하기 위해서는 i 요소의 class를 바꿔주기만 하면 됩니다. 페이스북의 경우에는 “fab fa-facebook-f”, 트위터의 경우 “fab fa-twitter”, 인스타그램의 경우 “fab fa-instagram”, 유튜브의 경우 “fab fa-youtube”로 적어주면 됩니다.
 - class에서 fa: font awesome의 약자입니다.
 - class에서 fab: font awesome brands 약자로써, 더 자세한 사용방법이 궁금하시면 공식 사이트를 찾아보실 수 있습니다. [참고3. Font Awesome Doc]
구현 결과
- SNS 아이콘이 생성되었습니다.

<style>
    * {
        box-sizing: border-box;
    }
    #wrapper {
        height: 100%;
 
        display: flex;
        justify-content: center;
        align-items: center;
 
        margin: 0 auto;
        max-width: 1180px;
        padding: 0 10px;
        overflow: auto;
    }
</style>

*의 CSS
- box-sizing: border-box; 전체 요소들을 border-box로 설정합니다.
#wrapper의 CSS
- height: 100%; 래퍼의 높이를 부모 요소의 높이로 설정합니다.
- display: flex; 자식 요소(a 요소)를 정렬하기 위해 flex로 설정합니다.
- justify-content: center; 자식 요소(a 요소)를 수평 가운데 정렬합니다.
- align-items: center; 자식 요소(a 요소)를 수직 가운데 정렬합니다.
- 그 외의 프로퍼티들은 기본적인 래퍼에 대한 설정들입니다. 이렇게 설정한 이유는 [참고2. 래퍼의 기본 개념과 CSS 설정]에서 자세히 다루고 있으니 참고하시면 되겠습니다.
구현 결과
#wrapper의 flex 설정으로 인해 SNS 아이콘들이 수평, 수직 가운데 정렬이 되었음을 확인할 수 있습니다.

[2] 원형 버튼 만들기

예제 목표

앞에서 SNS 로고를 그렸으니, 이번에는 원형 형태의 아이콘을 만들어 보겠습니다. CSS로 요소를 원 형태로 만드는 방법과 여러 응용 방법은 [참고5. CSS만으로 원 그리기]에 자세히 나와 있습니다.

전체 코드

먼저 전체 코드와 결과부터 보겠습니다.

HTML

<div id=“wrapper”>
    <a href=“#”><i class=“fab fa-facebook-f”></i></a>
    <a href=“#”><i class=“fab fa-twitter”></i></a>
    <a href=“#”><i class=“fab fa-instagram”></i></a>
    <a href=“#”><i class=“fab fa-youtube”></i></a>
</div>

CSS

<style>
    * {
        box-sizing: border-box;
    }
    #wrapper {
        height: 100%;
 
        display: flex;
        justify-content: center;
        align-items: center;
 
        margin: 0 auto;
        max-width: 1180px;
        padding: 0 10px;
        overflow: auto;
    }
    #wrapper a {
        height: 35px;
        width: 35px;
        border-radius: 50%;
 
        text-align: center;
        line-height: 35px;
        font-size: 17px;
        color: white;
 
        background: coral;
 
        margin: 0 4px;
 
        border: 2px solid coral;
        transition: all 0.3s ease;
    }
    #wrapper a:hover{
      color: coral;
      background-color: white;
    }
</style>

RESULT

코드 설명

코드에 대한 설명은 아래 카드를 넘기면서 단계별로 볼 수 있습니다.

<style>
    * {
        box-sizing: border-box;
    }
    #wrapper {
        height: 100%;
 
        display: flex;
        justify-content: center;
        align-items: center;
 
        margin: 0 auto;
        max-width: 1180px;
        padding: 0 10px;
        overflow: auto;
    }
</style>
 
<div id=“wrapper”>
    <a href=“#”><i class=“fab fa-facebook-f”></i></a>
    <a href=“#”><i class=“fab fa-twitter”></i></a>
    <a href=“#”><i class=“fab fa-instagram”></i></a>
    <a href=“#”><i class=“fab fa-youtube”></i></a>
</div>

시작 코드는 앞 예제랑 동일합니다.

<style>
    #wrapper a {
        height: 35px;
        width: 35px;
        border-radius: 50%;
 
        text-align: center;
        line-height: 35px;
        font-size: 17px;
        color: white;
 
        background: coral;
 
        margin: 0 4px;
       /* 코드 더 있음 */
    }
</style>

#wrapper a의 CSS
- 원 테두리 설정
  - height: 35px; width: 35px; 너비x높이를 35x35px로 설정합니다.
  - border-radius: 50%; 테두리 모서리를 50%로 설정하여 원을 그립니다. [참고5. CSS만으로 원 그리기]
- 글자 관련 설정
  - text-align: center; 글자를 원 테두리의 수평 가운데로 정렬합니다.
  - line-height: 35px; 글자를 원 테두리의 수직 가운데로 정렬시키기 위해서, 줄 높이(line-height)를 위에서 설정한 원 높이 35px에 맞춥니다. 이렇게 함으로써 글자를 수직 가운데로 정렬시키는 효과를 가져올 수 있습니다. 수평 가운데 정렬에 비해, 글자를 수직으로 정렬시키는 방법은 까다롭습니다. 글자를 수직 가운데로 정렬시키는 여러가지 방법들은 [참고6. 글자 수직 가운데 정렬시키는 방법]에 소개되어져 있으니, 관심있으신 분들은 참고하시면 되겠습니다.
  - font-size: 17px; 글자의 크기를 원 테두리에 적당히 들어갈 수 있는 크기인 17px로 맞춥니다.
  - color: white; 글자 색깔을 흰색으로 지정하겠습니다. 글자의 색깔은 SNS 로고의 색깔에 해당합니다.
- 배경 관련 설정
  - background-color: coral; 아이콘 배경 색깔을 coral 색깔로 설정하겠습니다.
- 여백 관련 설정
  - margin: 0 4px; 여백을 위/아래는 0으로, 좌/우는 4px로 설정함으로써, 아이콘 사이의 간격을 벌립니다.
구현 결과
- SNS 로고들이 들어간 원형의 SNS 아이콘들이 만들어졌습니다.
참고
- 혹시나 위와 같이 설정했는데도 SNS 아이콘이 원형 가운데로 정렬이 되지 않는다면, html 파일 상단에 <!doctype html>이 설정되었는지 확인해보세요. 이렇게 설정이 되어 있지 않으면 원 가운데로 정렬이 안 되는 현상이 발생합니다.

<style>
    #wrapper a {
        line-height: 31px; /*수정*/
        /* 위쪽 코드 생략 */
        border: 2px solid coral;
        transition: all 0.3s ease;
    }
    a:hover {
      color: coral;
      background-color: white;
    }
</style>

구현 목표
- 더 나아가서, 아이콘 위에 마우스 올렸을 때, 테두리선 색깔은 그대로 두고 안쪽 부분의 색깔만 흰색으로 바꾸는 Hover 효과를 만들어 보겠습니다.
#wrapper a의 CSS
- 테두리선 관련 설명
  - border: 2px solid coral; 마우스의 hover 시에 테두리선은 그대로 두고 배경색깔만 변경되어야 합니다. 따라서 테두리선 색깔을 배경색과 같은 coral로 설정합니다.
  - transition: all 0.3s ease; hover이 되어 색깔을 변경될 때, 변화가 천천히 진행되도록 만들어줌으로써 애니메이션 효과를 향상 시킬 수 있습니다. 전환 효과를 적용할 대상은 all로 지정하고, 전환 시간은 0.3초, 그리고 전환시킬 때 변화 함수를 ease로 설정하겠습니다.
- 라인 높이 관련 설명
  - line-height: 31px; 앞에서는 35px로 설정했는데, 테두리선을 2px로 설정했기 때문에, 윗쪽과 아랫쪽 테두리선 총 4px를 빼줘야합니다. 따라서 35 – 4 = 31px로 수정해주겠습니다. 만약 수정을 해주지 않는다면 아이콘이 원테두리의 가운데 보다 약간 밑으로 정렬되어 버립니다. 이러한 수정이 조금 번거롭다고 생각하실 수 있습니다. 만약 flex와 같은 다른 방식으로 글자를 수직 가운데 정렬을 시킨다면, 일일이 다시 수정해줄 필요가 없습니다. 다른 방식의 글자 수직 가운데 정렬방법은 [참고6. 글자 수직 가운데 정렬시키는 방법] 포스트에 설명되어 있습니다.
a:hover의 CSS
- 글자 관련 설정
  - color: coral; 마우스가 SNS 버튼 위로 올라갔을 때, SNS 로고의 색깔을 흰색→coral 색깔로 변경시키기 위해, a:hover의 color를 coral로 설정합니다. 글자색깔(color)을 변경하면 SNS 로고의 색깔이 바뀝니다.
- 배경 관련 설정
  - background-color: white; SNS 로고의 색깔과 대비되게, 배경색깔을 coral→흰색으로 바꾸겠습니다.
구현 결과
- 마우스를 아이콘에 올리면, 아이콘의 안쪽 부분의 색깔이 흰색으로 변화되는 것을 확인할 수 있습니다. 또한 전환 시간을 0.3초로 설정해주었기 때문에 색깔이 부드럽게 변합니다.

[3] 정리

Font Awesome을 이용하여 SNS 아이콘을 만들려고 하면, 다음 2가지를 기억하면 됩니다.

CDN으로 폰트관련 CSS를 받습니다.^{[참고1. Font Awesome CDN 주소]}
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css”>
i 요소에 자신이 원하는 SNS 클래스명을 넣어줍니다.

참고

[1] Font Awesome CDN 주소
[2] 래퍼의 기본 개념과 CSS 설정
[3] Font Awesome Docs
[4] a href=”#”의 사용법
[5] CSS만으로 원 그리기
[6] 글자 수직 가운데 정렬시키는 방법
[ CSS 목차 보기 ]

【CSS】 SNS 아이콘을 글자로 만드는 방법

[1] Font Awesome 사용법

예제 목표

전체 코드

코드 설명

[2] 원형 버튼 만들기

예제 목표

전체 코드

코드 설명

[3] 정리

참고

Like this:

Leave a ReplyCancel reply

[1] Font Awesome 사용법

예제 목표

전체 코드

코드 설명

[2] 원형 버튼 만들기

예제 목표

전체 코드

코드 설명

[3] 정리

참고

Share this:

Like this:

You May Also Like...

Leave a ReplyCancel reply