CSS - 4

- font awesome 아이콘 폰트 사용하기

순서

1. CDN 코드 카피

2. 코드에 CDN 페이스트

3. 아이콘 서치

4. 아이콘 선택

5. 아이콘 코드 카피

6. 코드에 아이콘 코드 페이스트

대략 이런 순서

코딩으로 본다면

```html
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>폰트 어썸</title>		
		<style>	
		</style>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	</head>
	<body>
		<nav>
			<ul>
				<li>				
					<i class="fa-solid fa-house-chimney"></i>
					<a href="#">메뉴1</a>
				</li>
			</ul>
		</nav>
	</body>
</html>
```

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

- Cool Symbols & Cool Fonts - Symbols, Emoji & Fonts ✮✢❂✶✧ (쿨 심볼)

Cool Symbols & Cool Fonts - Symbols, Emoji & Fonts

A collection of cool symbols that provides access to many special fancy text symbols, letters, characters... It also comes with a cool font generator tool.

coolsymbol.com

* 아이콘 - 이미 만든 아이콘을 사용(폰트 어썸, 쿨 심볼 같은 사이트 이용)

* 링크하기 - class는 직관적으로 적기

- 프론트엔드 개발자와 UI디자이너가 모르면 손해 보는 사이트

프론트엔드 개발자와 UI디자이너가 모르면 손해 보는 사이트

프론트엔드 개발과 UI디자인을 시작한 분이라면 꼭 알고 있어야 할 사이트를 정리해 보았습니다.도움 되기를 바랍니다. https://blog.naver.com/moolsaess/222771641173 UI디자인 레퍼런스 베스트디자인 레퍼

lshjju.tistory.com

- CSS color property

정의 및 적용 범위

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

상속: 부모 요소에 지정된 color 값은 특별한 설정이 없는 한 자식 요소로 전달(상속)됩니다
확장: 텍스트 외에도 테두리(border)나 구분선(hr) 등에 색상을 줄 때는 border-color, background-color 처럼 접두사가 붙은 속성을 사용합니다

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

1) 색상 이름 (Color Names)

브라우저에 미리 정의된 키워드를 사용합니다

예: red, blue, gold, transparent(투명) 등 약 140여 가지가 있습니다
장점: 기억하기 쉽고 간단합니다

2) 16진수 코드 (Hex Code)

가장 대중적인 방식으로, # 뒤에 6자리(또는 3자리) 16진수를 입력합니다

구조: #RRGGBB (빨강, 초록, 파랑의 조합)
예: #ff0000 (빨강), #000000 (검정), #ffffff (흰색)
장점: 정교한 색상 표현이 가능하며 코드 길이가 짧습니다

3) RGB / RGBA

빛의 3원색인 빨강, 초록, 파랑의 양을 0~255 사이의 숫자로 지정합니다

RGBA: 마지막에 Alpha(투명도) 값을 추가한 것입니다. (0: 투명 ~ 1: 불투명)
예: rgb(255, 0, 0), rgba(255, 0, 0, 0.5) (반투명한 빨강)

4) HSL / HSLA

색상(Hue), 채도(Saturation), 명도(Lightness)를 기준으로 지정합니다

Hue: 0~360도의 색상환 위치
Saturation/Lightness: 0~100% 비율
장점: 인간이 직관적으로 색의 밝기나 선명도를 조절하기에 매우 편리합니다

* 웹에서 텍스트 컬러 넣을때

알파 값이 필요하다 > RGB

그 외 > Hex Code

실전 예제 코드

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

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

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

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

<h1>CSS Color Guide</h1>
<p>다양한 방식으로 색상을 입혀보세요.</p>
<span>강조 텍스트</span>

색상 지정 방식 요약표

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

학습 정리

텍스트 색상을 고를 때는 배경색과의 **대비(Contrast)**를 고려하여 시각 장애가 있는 사용자도 읽기 편하도록 배려하는 것이 중요합니다

- CSS text style property

text-align (가로 정렬)

텍스트를 컨테이너 안에서 가로 방향으로 어떻게 정렬할지 결정합니다

left / right: 왼쪽 또는 오른쪽 정렬입니다
center: 가운데 정렬입니다
justify: 양끝 정렬로, 가로 너비에 맞춰 글자 사이 간격을 자동으로 조절합니다

line-height (줄 간격)

텍스트 줄 사이의 수직 거리를 설정합니다

특징: 보통 숫자(예: 1.5)를 입력하여 글자 크기의 배수로 지정합니다
가독성: 너무 좁으면 가독성이 떨어지므로 보통 1.4 ~ 1.6 사이를 권장합니다
꿀팁: 박스의 height와 동일한 값을 line-height에 주면 한 줄짜리 글자를 수직 중앙에 배치할 수 있습니다

* 박스는 선테 정렬이란 기능 X
* 텍스트에서만 있음

text-decoration (장식선)

텍스트에 선을 긋거나 제거하는 장식적인 효과를 줍니다

* none: 선을 제거합니다 (<a> 태그의 기본 밑줄을 없앨 때 필수입니다)
underline: 밑줄을 긋습니다 (사용 X)
line-through: 취소선을 긋습니다
overline: 글자 위에 선을 긋습니다

* text-transform (대소문자 변환)

HTML 원본 텍스트를 바꾸지 않고 영문 대소문자 표기법만 변경합니다

uppercase: 모든 글자를 대문자로 바꿉니다
lowercase: 모든 글자를 소문자로 바꿉니다
capitalize: 각 단어의 첫 글자만 대문자로 바꿉니다

letter-spacing & word-spacing (간격)

글자와 단어 사이의 밀도를 조절합니다

letter-spacing: 개별 글자 사이의 간격(자간)을 조절합니다
word-spacing: 단어와 단어 사이의 공백(어간)을 조절합니다

* 단위를 하나로 통일하는게 마냥 좋지 않음 (why? 다국어 때문에 _ 나라마다 언어(문법이)가 달라서

실전 예제 코드

<style>
  .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;
  }
</style>

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

텍스트 주요 속성 요약표

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

학습 정리

디자인의 완성도는 letter-spacing을 미세하게 좁히고(-0.05em 등), line-height를 넉넉히 주는 데서 시작됩니다
하이퍼링크의 밑줄이 거슬린다면 text-decoration: none;으로 깔끔하게 지울 수 있습니다

* 디버깅 순서 (오류가 생겼을 시 사용하는 방법)

1. 디버깅 찾아주는 사이트 이용

2. 일단 버그 구역을 크게 잡고 점점 작게 구역을 나눠서 찾아주기
(body > head > body (한 태그씩 복붙) > head (style)

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

영어 텍스트 콘텐츠를 마크업 할 때 알아두면 좋은 팁

일반 문장은 영어 원문 그대로 붙여넣기 하면 됩니다

하지만 문장/타이틀/메뉴 의 경우는 조금 생각을 해봐야 합니다

영문 단어는 일반적으로 이러한 구성일 것입니다

Home About Manpower Map Contact

home about manpower map contact

HOME ABOUT MANPOWER MAP CONTACT

즉, 대문자 소문자를 어떻게 배치하느냐 입니다

이때 필자는

Home About Manpower Map Contact

이렇게 세팅 하는 것을 추천 합니다

왜냐하면 일단 이것이 문법적으로 맞습니다

그리고 대문자 소문자는 CSS로 콘트롤 가능합니다

그러므로 기본 텍스트는 앞글자만 대문자로 쓰는 것을 추천 합니다

이후 벌어지는 상황은 CSS로 충분히 처리 가능합니다

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

영문 텍스트의 대소문자를 변경할 때는 text-transform 속성을 사용합니다

이 속성을 사용하면 HTML 원본 데이터를 수정하지 않고도 디자인에 맞춰 스타일만 자유롭게 바꿀 수 있습니다

주요 CSS 속성 설명

속성값	효과	활용 사례
none	입력된 그대로 표시	일반 본문 텍스트
uppercase	모든 글자를 대문자로 변환	강조할 메뉴, 버튼, 강렬한 타이틀
lowercase	모든 글자를 소문자로 변환	부드러운 느낌의 디자인 요소
capitalize	각 단어의 첫 글자만 대문자로 변환	제목, 리스트 항목

예시 코드 (HTML & CSS)

필자분께서 추천하신 "첫 글자만 대문자로 작성(Capitalize)"된 원문을 기준으로,

상황에 따라 어떻게 CSS로 변환하는지 보여주는 코드입니다

HTML

<nav class="menu">
  <a href="#" class="item default">Home</a>
  <a href="#" class="item upper">About</a>
  <a href="#" class="item lower">Manpower</a>
  <a href="#" class="item cap">Map</a>
  <a href="#" class="item">Contact</a>
</nav>

CSS

/* 기본 스타일링 */
.menu {
  display: flex;
  gap: 20px;
  font-family: sans-serif;
  font-weight: bold;
}

.item {
  text-decoration: none;
  color: #333;
}

/* 1. 모든 글자를 대문자로 (강조형 메뉴) */
.upper {
  text-transform: uppercase; /* 결과: ABOUT */
}

/* 2. 모든 글자를 소문자로 (미니멀 디자인) */
.lower {
  text-transform: lowercase; /* 결과: manpower */
}

/* 3. 단어 첫 글자만 대문자로 (원문이 소문자일 때 유용) */
.cap {
  text-transform: capitalize; /* 결과: Map */
}

이 방법이 좋은 이유 (Tip)

유지보수의 편리함: 디자인 컨셉이 바뀌어 "모든 메뉴를 대문자로 바꿔주세요"라는 요청이 들어와도 HTML을 일일이 수정할 필요 없이 CSS 한 줄만 고치면 됩니다
검색 엔진 최적화(SEO): 스크린 리더나 검색 로봇은 CSS 변환 전의 원문 데이터를 읽습니다. 의미가 명확한 표준 대소문자 표기법을 유지하는 것이 웹 접근성에도 좋습니다

'CSS' 카테고리의 다른 글

CSS - 5 _ 2 (0)	2026.03.18
CSS - 5 (0)	2026.03.18
CSS - 3 (0)	2026.03.17
CSS - 2 (0)	2026.03.13
CSS - 1 (3)	2026.03.12

땅굴

CSS - 4

- font awesome 아이콘 폰트 사용하기

순서

- 프론트엔드 개발자와 UI디자이너가 모르면 손해 보는 사이트

- CSS color property

정의 및 적용 범위

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

1) 색상 이름 (Color Names)

2) 16진수 코드 (Hex Code)

3) RGB / RGBA

4) HSL / HSLA

실전 예제 코드

색상 지정 방식 요약표

학습 정리

- CSS text style property

text-align (가로 정렬)

line-height (줄 간격)

text-decoration (장식선)

* text-transform (대소문자 변환)

letter-spacing & word-spacing (간격)

실전 예제 코드

텍스트 주요 속성 요약표

학습 정리

* 디버깅 순서 (오류가 생겼을 시 사용하는 방법)

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

영어 텍스트 콘텐츠를 마크업 할 때 알아두면 좋은 팁

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

주요 CSS 속성 설명

예시 코드 (HTML & CSS)

이 방법이 좋은 이유 (Tip)

'CSS' 카테고리의 다른 글

티스토리툴바

CSS - 4

- font awesome 아이콘 폰트 사용하기

순서

- 프론트엔드 개발자와 UI디자이너가 모르면 손해 보는 사이트

- CSS color property

정의 및 적용 범위

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

1) 색상 이름 (Color Names)

2) 16진수 코드 (Hex Code)

3) RGB / RGBA

4) HSL / HSLA

실전 예제 코드

색상 지정 방식 요약표

학습 정리

- CSS text style property

text-align (가로 정렬)

line-height (줄 간격)

text-decoration (장식선)

* text-transform (대소문자 변환)

letter-spacing & word-spacing (간격)

실전 예제 코드

텍스트 주요 속성 요약표

학습 정리

* 디버깅 순서 (오류가 생겼을 시 사용하는 방법)

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

영어 텍스트 콘텐츠를 마크업 할 때 알아두면 좋은 팁

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

주요 CSS 속성 설명

예시 코드 (HTML & CSS)

이 방법이 좋은 이유 (Tip)

'CSS' 카테고리의 다른 글

'CSS' Related Articles

티스토리툴바