[TIL] CSS : 아이콘 폰트와 텍스트 제어 및 컬러 속성

• 아이콘 폰트 활용 - Font Awesome과 CoolSymbol을 이용한 효율적인 아이콘 적용 및 접근성 고려
• CSS Color 속성 - RGB 기반의 4가지 색상 지정 방식과 웹 접근성을 위한 대비 설정
• CSS Text Style 속성 - 텍스트 정렬, 간격, 장식 및 영문 대소문자 제어를 통한 가독성 향상과 SEO 최적화

 

 

Font Awesome 아이콘 폰트 사용하기

 

 

1. 아이콘 폰트의 필요성과 적용 순서

 

Font Awesome 공식 라이브러리 (https://fontawesome.com/)

코딩할 때 이미지 아이콘보다 폰트 아이콘이 더 효율적인 경우가 많다.

프론트엔드 개발자는 사용자를 배려하는 것이 중요하며, 아이콘 폰트 사용은 웹 접근성을 높이는 것과 깊은 연관이 있다.

실무에서 아이콘 폰트를 사용하는 간단한 순서는 다음과 같다.

1. CDN 코드 카피
2. 내 코드에 CDN 페이스트
3. 사이트에서 아이콘 서치
4. 원하는 아이콘 선택
5. 아이콘 코드 카피
6. 내 코드에 아이콘 코드 페이스트

 

 

2. 간단한 특수문자 활용법

CoolSymbol (https://coolsymbol.com/)

아주 간단한 아이콘이나 특수문자는 쿨심볼(CoolSymbol) 사이트를 이용할 수 있다.

CDN 설치 없이 HTML에 텍스트를 붙여넣기 하는 것만으로 일반적인 특수문자와는 비교도 안 되는 퀄리티의 특수문자를 제공한다.

 

 

 

 

[표] 주요 아이콘 제공 사이트 요약표

사이트명	특징	링크
Font Awesome	실무에서 가장 많이 사용하는 아이콘 라이브러리 (CDN 필요)	https://fontawesome.com/
CoolSymbol	CDN 없이 복붙으로 사용하는 고퀄리티 특수문자	https://coolsymbol.com/

 

 

 

[예제 코드] 폰트 아이콘 적용 개념

HTML

 

<i class="fas fa-camera"></i>

 

 

 

CSS color property

 

 

1. 정의 및 적용 범위

웹 페이지의 분위기와 브랜드 이미지를 결정하는 가장 직관적인 속성이다.

웹에서는 인쇄용인 CMYK를 쓰지 않고 빛의 3원색인 RGB를 사용한다.

color 속성은 기본적으로 텍스트(글자)의 색상을 지정하는 데 사용된다.

상속: 부모 요소에 지정된 color 값은 특별한 설정이 없는 한 자식 요소로 전달(상속)된다.

확장: 텍스트 외에도 테두리(border)나 구분선(hr) 등에 색상을 줄 때는 border-color, background-color처럼 접두사가 붙은 속성을 사용한다.

학습 정리: 텍스트 색상을 고를 때는 배경색과의 대비(Contrast)를 고려하여 시각 장애가 있는 사용자도 읽기 편하도록 배려해야 한다.

 

 

2. 색상을 지정하는 4가지 주요 방식

1. 색상 이름 (Color Names)기억하기 쉽고 간단하다는 장점이 있다.
2. 브라우저에 미리 정의된 약 140여 가지의 키워드를 사용한다. (예: red, blue, gold, transparent)
3. 16진수 코드 (Hex Code)정교한 색상 표현이 가능하며 코드 길이가 짧다. 알파(투명도) 값이 필요 없을 때 주로 쓴다.
4. 가장 대중적인 방식으로, # 뒤에 6자리(또는 3자리) 16진수를 입력한다. (구조: #RRGGBB)
5. RGB / RGBA 는 마지막에 Alpha(투명도 0~1) 값을 추가한 것이며, 컬러에 투명도가 필요할 때 사용한다.
6. 빛의 3원색인 빨강, 초록, 파랑의 양을 0~255 사이의 숫자로 지정한다.
7. HSL / HSLA인간이 직관적으로 색의 밝기나 선명도를 조절하기에 매우 편리하다.
8. 색상(Hue), 채도(Saturation), 명도(Lightness)를 기준으로 지정한다.

 

 

[표] 색상 지정 방식 요약표

방식	구문 예시	특징
Name	color: skyblue;	직관적이지만 종류가 한정적임
Hex	color: #f39c12;	표준적이고 가장 널리 쓰임
RGBA	color: rgba(0,0,0,0.5);	투명도를 조절할 때 필수
HSL	color: hsl(0, 100%, 50%);	색의 변화(밝기 등)를 계산하기 좋음

 

 

 

[예제 코드] CSS 컬러 지정 및 투명도 조절 예제

CSS

 

/* 키워드 사용 */
h1 { color: tomato; }

/* 16진수 코드 사용 */
p { color: #34495e; }

/* RGBA 사용 (반투명 효과) */
span { 
  background-color: rgba(52, 152, 219, 0.2); 
  color: rgb(41, 128, 185);
}

/* 텍스트 크기와 반투명 색상 동시 적용 */
.transparent-text {
  font-size: 180px;
  color: rgba(246, 250, 21, 0.5);
}

/* HSL 사용 (밝기 조절 용이) */
.button { color: hsl(200, 100%, 50%); }

 

 

 

 

CSS text style property

 

 

 

1. 텍스트 정렬 및 간격 조절

박스는 센터가 없지만 텍스트는 센터가 존재한다. 상하는 없고 좌우 정렬만 가능하다.

1. text-align (가로 정렬)
2. 텍스트를 컨테이너 안에서 가로 방향으로 정렬한다. (left, right, center, justify)
3. line-height (줄 간격)박스의 height와 동일한 값을 line-height에 주면 상하 중앙에 배치할 수 있다.
4. 텍스트 줄 사이의 수직 거리를 글자 크기의 배수(예: 1.5)로 설정한다. 가독성을 위해 1.4 ~ 1.6 사이를 권장한다.
5. letter-spacing (개별 글자 사이의 간격(자간)을 조절  & word-spacing (단어와 단어 사이의 공백(어간)을 조절) 
6. 글자 간격(자간)과 단어 간격(어간)의 밀도를 조절한다. 디자인의 완성도는 자간을 미세하게 좁히고 줄 간격을 넉넉히 주는 데서 시작된다.

 

 

2. 텍스트 장식 및 그림자

1. text-decoration (장식선)
2. 텍스트에 선을 긋거나 제거한다. a 태그의 기본 밑줄을 없앨 때 none 값을 필수로 사용한다.
3. text-shadow (글자 그림자)
4. 글자에 입체감을 주지만 UI에 좋지 않아 실무에서는 잘 쓰지 않는다.

 

 

3. 영문 텍스트 제어를 위한 CSS 속성 가이드

일반 문장은 영문 원문 그대로 쓰지만, 타이틀이나 메뉴는 대소문자 배치를 고려해야 한다.

문법과 검색 엔진 최적화(SEO)를 고려하여, HTML의 기본 텍스트는 앞글자만 대문자로 세팅(Capitalize)하는 것을 추천한다.

스크린 리더나 검색 로봇은 CSS 변환 전의 원문을 읽기 때문이다.

이후 강조형 메뉴(uppercase)나 미니멀 디자인(lowercase) 등 벌어지는 상황은 CSS의 text-transform 속성으로 충분히 처리할 수 있으며, 이 방식이 유지보수에도 압도적으로 유리하다.

 

 

 

[표] 텍스트 주요 속성 및 영문 변환 요약표

속성	설명	주요 값 예시
text-align	가로 정렬	center, justify
line-height	줄 간격	1.6, 150%
text-decoration	장식선	none, underline
text-transform	대소문자 변환	uppercase, lowercase, capitalize
letter-spacing	자간 조절	-1px, 0.1em

 

 

 

[예제 코드] 텍스트 정렬, 장식, 대소문자 변환 예제

HTML

 

<h1 class="main-title">Css Text Style</h1>
<p class="content-text">이 텍스트는 가독성을 위해 줄 간격과 단어 간격이 조정되었습니다.</p>

<p style="text-decoration:none">none</p>
<p style="text-decoration:underline">underline</p>
<p style="text-decoration:overline">overline</p>

CSS

 

/* 기본 텍스트 스타일링 */
.main-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 1px 1px 2px gray;
}
.content-text {
  line-height: 1.8;
  text-decoration: underline dotted blue;
  word-spacing: 5px;
}

/* 영문자의 대소문자 변환 */
.trans1 { text-transform: capitalize; } /* 앞글자만 대문자 */
.trans2 { text-transform: uppercase; }  /* 전체 대문자 */
.trans3 { text-transform: lowercase; }  /* 전체 소문자 */

/* 줄 높이와 자간 미세 조절 */
.small-line { line-height: 0.7; }
.big-line { line-height: 2.5; }
.spacing1 { letter-spacing: 0.2em; }

 

 

 

 

참고 자료

강사님 블로그: Font Awesome 아이콘 폰트 (https://lshjju.tistory.com/88)

강사님 블로그: CSS color property (https://lshjju.tistory.com/91)

강사님 블로그: CSS text style property (https://lshjju.tistory.com/767)

강사님 블로그: 영문 텍스트 제어 가이드 (https://lshjju.tistory.com/851)