fontello 

    

fontello 폰텔로 웹폰트 다운 받는사이트
올린 벡터 이미지를 폰트화 시키는 기능도 있음
https://fontello.com/


올린 벡터 이미지를 폰트화 시키는 기능 설명 위키
https://github.com/fontello/fontello/wiki/How-to-use-custom-images 

# fontello 와 utf 체계
UTF-8(유니코드) 체계를 이해하는 것은 생각보다 복잡할 수 있지만, 아이콘 폰트와 같은 간단한 용도로 사용하려면 몇 가지 기본 개념만 이해하면 돼요. Fontello를 활용해 아이콘 폰트를 만들 때, UTF 코드 체계를 잘 활용하면 원하는 아이콘을 쉽게 포함시킬 수 있습니다. 우선, UTF와 Fontello의 관계를 설명하고, UTF를 활용하여 아이콘을 추가하는 방법을 정리해 볼게요.

### 1. Fontello와 UTF 체계 이해하기
Fontello는 SVG 파일을 기반으로 웹폰트(icon font)를 생성하는 도구예요. 즉, SVG 아이콘 파일을 업로드하면 Fontello가 해당 아이콘을 유니코드(UTF-8) 체계에 매핑하여 웹에서 사용할 수 있는 폰트 파일(`.woff`, `.ttf` 등)과 CSS 파일을 만들어줘요.

Fontello에서 아이콘 폰트를 사용할 때, 각각의 아이콘은 특정한 유니코드 값(예: `U+E001`)에 매핑돼요. 이 매핑된 유니코드 값을 사용하여 CSS에서 `content` 속성으로 아이콘을 불러올 수 있어요.

### 2. 기본 유니코드 체계 이해하기
유니코드 체계는 전 세계의 문자와 기호를 통합하여 표현하기 위한 표준 체계예요. UTF-8은 유니코드를 효율적으로 인코딩하여 사용하게 해 주는 방식 중 하나고요.

- 유니코드는 보통 `U+XXXX` 형식으로 표현됩니다. 여기서 `XXXX`는 16진수 코드값이에요.
  - 예를 들어, `U+0041`은 대문자 `A`의 유니코드 값입니다.
  - `U+1F600`은 😀 이모티콘의 유니코드 값입니다.

- 웹에서 사용할 때는 HTML이나 CSS에서 이 유니코드 값을 참조할 수 있어요.
  - HTML: `A` → A
  - CSS: `content: "\0041";` → A

### 3. Fontello에서 UTF 아이콘 추가하기
Fontello에서는 주어진 아이콘에 직접 유니코드 값을 할당할 수 있어요. 이를 통해 특정 유니코드 값에 맞춰 아이콘을 불러올 수 있습니다.

1. **Fontello 접속 및 아이콘 추가**:
   1. Fontello 웹사이트([Fontello.com](http://fontello.com))에 접속합니다.
   2. 기본 제공되는 아이콘을 선택하거나, 자신만의 SVG 아이콘을 업로드하세요.

2. **아이콘의 유니코드 값 설정**:
   1. 아이콘을 선택한 후, 오른쪽 패널에서 아이콘의 유니코드 값을 확인할 수 있어요.
   2. 원하는 유니코드 값으로 변경하거나 기본값을 사용하세요.
      - 예를 들어, `U+E001`과 같은 유니코드 영역은 보통 사용자 정의 영역(Private Use Area)로 사용되며, Fontello는 기본적으로 이 영역을 활용해 아이콘을 매핑합니다.

3. **아이콘 폰트 다운로드**:
   1. 설정이 완료되면 오른쪽 상단의 `Download Webfont` 버튼을 클릭하여 폰트 파일을 다운로드하세요.
   2. 다운로드된 폰트 파일을 사용해 CSS에서 해당 유니코드 값을 참조할 수 있어요.

4. **아이콘 사용하기**:
   - 다운로드한 폰트 파일(`fontello.eot`, `fontello.woff`, `fontello.ttf`)과 함께 제공된 `fontello.css` 파일을 프로젝트에 포함시키세요.
   - CSS에서 아이콘 폰트를 적용하려면 다음과 같이 `content` 속성에 유니코드 값을 입력하여 사용하세요:

   ```css
   .icon-home:before {
     font-family: 'fontello';
     content: "\E001"; /* 아이콘의 유니코드 값 */
   }
   ```

5. **HTML에서 아이콘 사용하기**:
   - HTML 파일에서 다음과 같이 해당 클래스를 사용하면, 해당 유니코드 값에 매핑된 아이콘이 표시됩니다:

   ```html
   <span class="icon-home"></span>
   ```

### 4. 유니코드 값 선택 팁
- **`U+E000 ~ U+F8FF`**: 이 영역은 유니코드의 **개인 사용자 영역**(Private Use Area, PUA)으로, 아이콘 폰트에서 많이 사용돼요. 즉, 일반 텍스트나 기호와 겹치지 않고 아이콘을 저장할 수 있는 안전한 영역입니다.

- Fontello에서도 기본적으로 이 영역을 사용하며, 이 영역 안의 값을 직접 설정하여 원하는 아이콘을 특정 유니코드 값으로 고정할 수 있어요.

### 5. 유니코드 체계의 자세한 이해가 필요한 경우
유니코드 체계를 더 깊이 이해하고 싶다면, 다음과 같은 자료를 참고할 수 있어요:
- [유니코드 공식 사이트](https://unicode.org/)
- [유니코드 체계 및 코드 포인트 설명](https://unicode-table.com/)
  
이런 자료를 통해 유니코드의 범위, 각 코드 포인트가 나타내는 문자 및 기호 등을 확인할 수 있습니다.

# 유니코드의 개인 사용자 영역

유니코드의 **개인 사용자 영역(Private Use Area, PUA)**는 총 137,468개의 코드 포인트를 제공하고 있습니다. 이 영역은 유니코드 표준에서 문자나 기호로 예약되어 있지 않고, 사용자가 임의로 사용할 수 있는 값이에요.

PUA는 다음과 같이 세 가지 영역으로 나뉩니다:

### 1. 기본 다국어 평면(BMP, Basic Multilingual Plane)의 PUA
- **범위**: `U+E000 ~ U+F8FF`
- **개수**: 6,400개
- 이 영역은 일반적으로 폰트 파일이나 아이콘 폰트에서 가장 많이 사용하는 영역이에요.
- 예: Fontello나 FontAwesome과 같은 폰트들은 이 영역을 아이콘에 매핑합니다.

### 2. 보충 다국어 평면(SMP, Supplementary Multilingual Plane)의 PUA
- **범위**: `U+F0000 ~ U+FFFFD`
- **개수**: 65,534개
- 이 영역은 BMP를 넘어서는 추가 코드 포인트를 사용할 수 있도록 제공됩니다.

### 3. 보충 사전 전용 평면(SIP, Supplementary Ideographic Plane)의 PUA
- **범위**: `U+100000 ~ U+10FFFD`
- **개수**: 65,534개
- 이 영역은 SMP와 유사하게 BMP 외의 추가 공간을 제공합니다.

### 총 정리
- 총 `137,468`개의 개인 사용자 영역(Private Use Area) 코드 포인트:
  - `BMP PUA`: 6,400개 (`U+E000 ~ U+F8FF`)
  - `SMP PUA`: 65,534개 (`U+F0000 ~ U+FFFFD`)
  - `SIP PUA`: 65,534개 (`U+100000 ~ U+10FFFD`)

### 참고 사항
일반적으로 BMP의 PUA(`U+E000 ~ U+F8FF`)는 호환성과 접근성 때문에 가장 많이 사용됩니다. 웹 폰트나 아이콘 폰트를 만들 때도 이 영역을 활용하면 대부분의 환경에서 문제없이 동작하죠. 그러나 BMP를 넘어서는 코드 포인트는 일부 환경에서 지원되지 않거나 폰트 렌더링이 제대로 되지 않을 수 있어요. 

따라서 아이콘 폰트 제작 시에는 BMP의 PUA 영역(`U+E000 ~ U+F8FF`) 내에서 사용하는 것을 권장합니다.

# 웹폰트 vs 아이콘 폰트
웹폰트와 아이콘 폰트는 웹 개발에서 주로 사용되는 폰트 파일 형식으로, 글자뿐만 아니라 그래픽 요소를 표현할 수 있는 도구입니다. 각각의 개념과 사용 목적을 설명해 드릴게요.

### 1. 웹폰트(Web Font)란?
웹폰트는 웹 페이지에서 사용하는 글꼴 파일을 말합니다. 웹 개발 초기에는 웹페이지에서 글꼴을 지정할 때 사용자의 컴퓨터에 설치된 기본 폰트만 사용할 수 있었습니다. 하지만 웹폰트가 등장하면서 특정 폰트 파일을 웹 서버에 포함시키고, 이를 웹 페이지에 로드하여 사용자가 동일한 글꼴을 볼 수 있게 되었죠.

- **예시**: Google Fonts에서 제공하는 `Roboto`, `Open Sans` 같은 폰트들은 웹폰트입니다.

- **웹폰트 사용의 장점**:
  1. **일관된 스타일**: 사용자가 어떤 환경에서 접속하든 동일한 폰트를 보여줄 수 있어 일관된 디자인을 유지할 수 있어요.
  2. **브랜드 아이덴티티**: 특정 글꼴을 통해 브랜드의 아이덴티티를 더 잘 표현할 수 있어요.

- **웹폰트의 파일 형식**:
  - `.woff` (Web Open Font Format)
  - `.woff2` (WOFF의 개선 버전, 더 효율적인 압축 제공)
  - `.ttf` (TrueType Font)
  - `.eot` (Embedded OpenType, 주로 구형 IE에서 사용)
  - `.svg` (SVG 포맷으로 된 글꼴, 모바일 및 일부 구형 브라우저 지원)

### 2. 아이콘 폰트(Icon Font)란?
아이콘 폰트는 글자 대신 **아이콘(기호)**을 폰트 파일로 표현한 것입니다. 즉, 아이콘을 글자처럼 사용할 수 있도록 만든 특수한 폰트 파일이에요. 웹 개발에서는 아이콘을 이미지 파일로 넣기보다는 아이콘 폰트를 사용하는 것이 더 유연하고 관리하기 쉬운 경우가 많아요.

- **아이콘 폰트의 특징**:
  1. **확장성**: 벡터 기반으로 만들어지기 때문에, 이미지처럼 크기를 조정해도 품질이 떨어지지 않아요.
  2. **경량화**: 여러 개의 아이콘을 한 폰트 파일로 묶어 제공하므로, 여러 이미지를 개별로 로드하는 것보다 파일 크기를 줄일 수 있어요.
  3. **스타일 변경 용이**: 글꼴처럼 CSS로 쉽게 색상, 크기, 그림자 등을 변경할 수 있어요.

- **아이콘 폰트의 사용 예**:
  - FontAwesome: 매우 유명한 아이콘 폰트 라이브러리로, 웹 개발에서 다양한 아이콘을 제공해요.
  - Material Icons: Google의 머티리얼 디자인 아이콘 폰트.
  - Ionicons, Typicons 등 다양한 아이콘 폰트 라이브러리들이 존재해요.

- **아이콘 폰트의 파일 형식**:
  웹폰트와 마찬가지로 `.woff`, `.woff2`, `.ttf` 등의 파일 형식을 사용합니다.

### 3. 웹폰트와 아이콘 폰트의 차이점
- **웹폰트(Web Font)**: 주로 텍스트 글자 형태로 사용되는 폰트.
  - 예: 일반적인 텍스트 글꼴인 Arial, Roboto, Open Sans 등.

- **아이콘 폰트(Icon Font)**: 아이콘을 포함한 폰트로, 문자가 아닌 아이콘을 표현.
  - 예: FontAwesome, Ionicons, Material Icons 등.

웹폰트는 기본적으로 텍스트를 디자인하고 서식을 설정하기 위한 목적으로 사용되지만, 아이콘 폰트는 아이콘을 웹 페이지에 삽입하기 위해 만들어졌습니다. 아이콘 폰트는 폰트 파일 내에서 각 아이콘을 특정 유니코드 값에 매핑하여 사용하며, CSS로 스타일링이 가능하다는 점에서 유사점이 있습니다.

### 4. 아이콘 폰트 사용 예시
아이콘 폰트를 웹에서 사용하는 가장 일반적인 방식은 CSS의 `content` 속성을 이용하거나 HTML 태그에서 직접 클래스를 사용하는 것입니다.

**예시**: FontAwesome 아이콘 폰트 사용하기
1. **HTML**:
   ```html
   <!-- FontAwesome 아이콘 폰트를 포함하는 HTML -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

   <body>
     <!-- 글자처럼 아이콘을 사용 -->
     <i class="fas fa-home"></i> <!-- Home 아이콘 -->
     <i class="fas fa-user"></i> <!-- User 아이콘 -->
   </body>
   ```

2. **CSS**:
   ```css
   /* 아이콘 폰트의 유니코드 값을 사용하여 스타일링 */
   .icon-home::before {
     font-family: "FontAwesome";
     content: "\f015"; /* FontAwesome에서 Home 아이콘의 유니코드 값 */
   }
   ```

### 5. 왜 아이콘 폰트를 사용할까?
이미지 기반 아이콘 대신 아이콘 폰트를 사용하는 이유는 다음과 같습니다:

1. **가벼운 파일 크기**: 여러 개의 아이콘을 하나의 폰트 파일로 묶어서 사용하므로, 각각의 아이콘 이미지를 로드하는 것보다 파일 크기를 줄일 수 있어요.

2. **스타일링 및 조정의 용이성**: CSS로 폰트 크기, 색상, 투명도 등을 쉽게 변경할 수 있어요.

3. **벡터 그래픽**: 아이콘 폰트는 벡터 형식으로 만들어져 있어서, 화면 크기에 따라 아이콘 크기를 키우거나 줄여도 해상도가 유지됩니다.

4. **브라우저 호환성**: 대부분의 현대 브라우저와 IE9 이상에서는 웹폰트 및 아이콘 폰트가 기본적으로 지원됩니다.

### 6. 아이콘 폰트의 단점
아이콘 폰트도 몇 가지 단점이 있어요:
- **접근성 문제**: 아이콘 폰트는 시각적으로는 아이콘처럼 보이지만, 본질적으로는 폰트이기 때문에 스크린 리더와 같은 보조 도구에서 읽히지 않을 수 있어요. 이 문제를 해결하기 위해 `aria-label` 같은 접근성 속성을 추가하는 것이 필요합니다.
- **유니코드 충돌 가능성**: 여러 아이콘 폰트를 사용하거나, 사용자 정의 유니코드 값을 사용할 때 유니코드 값이 충돌할 가능성이 있어요.

이러한 점을 고려하면서 웹폰트와 아이콘 폰트를 적절히 활용하면 웹 페이지의 디자인을 더 아름답고 효율적으로 만들 수 있습니다!

댓글

댓글 쓰기

이 블로그의 인기 게시물

js 스트링에서 요소 갯수 세기

이상하다 https://stackoverflow.com/questions/881085/count-the-number-of-occurrences-of-a-character-in-a-string-in-javascript If you're looking for the commas: (mainStr. split ( "," ). length - 1 ) //3 If you're looking for the str (mainStr. split ( "str" ). length - 1 ) //4   console . log (( "str1,str2,str3,str4" . match ( /,/g ) || []). length ); //logs 3 console . log (( "str1,str2,str3,str4" . match ( new RegExp ( "str" , "g" )) || []). length ); //logs 4
Read more »

STUDY

@GetMapping("/proxy-download") public ResponseEntity<Resource> proxyDownload() {     String sourceUrl = "https://example.com/file-to-download.bin";     ResponseEntity<byte[]> response = restTemplate.exchange(         sourceUrl,         HttpMethod.GET,         null,         byte[].class     );     byte[] fileBytes = response.getBody();     // 👉 원본 Content-Disposition 헤더에서 파일 이름 추출     String disposition = response.getHeaders().getFirst(HttpHeaders.CONTENT_DISPOSITION);     String filename = "default.bin"; // fallback     if (disposition != null && disposition.contains("filename=")) {         // Content-Disposition: attachment; filename="some_file.bin"         filename = disposition.split("filename=")[1].replace("\"", "").trim();     }     HttpHeaders ...
Read more »

javascript cheatsheet

JavaScript 기능들을 정리한 치트시트를 제공합니다. 이 치트시트는 데이터 구조와 알고리즘을 구현하는 데 필요한 기본적인 구문과 기능을 포함하고 있습니다. ## JavaScript Coding Cheat Sheet ### 1. **기본 문법** #### 변수 선언 ```javascript let variable = value;   // 변수 선언 (변경 가능) const constant = value; // 상수 선언 (변경 불가) ``` #### 함수 선언 ```javascript // 함수 선언식 function functionName(params) {   // 함수 내용 } // 함수 표현식 const functionName = function(params) {   // 함수 내용 }; // 화살표 함수 const functionName = (params) => {   // 함수 내용 }; ``` ### 2. **기본 데이터 구조** #### 배열 (Array) ```javascript let arr = [1, 2, 3]; // 배열 길이 console.log(arr.length); // 배열 요소 접근 console.log(arr[0]); // 배열의 끝에 추가 arr.push(4); // 배열의 끝에서 제거 arr.pop(); // 배열의 앞에 추가 arr.unshift(0); // 배열의 앞에서 제거 arr.shift(); ``` #### 객체 (Object) ```javascript let obj = {   key1: 'value1',   key2: 'value2' }; // 속성 접근 console.log(obj.key1); // 속성 추가 또는 변경 obj.key3 = 'value3'; // 속성 제거 delete obj.key2; ``` ### 3. **반복문 및 조건문** #### 반복문 ```javascript // for 반복문 for (let i = 0; i ...
Read more »