1. 브라우저의 탭 아이콘을 설정하는 방법 (난이도 1~100 중 15?)
사용하는 방법은 거의 다 비슷하고 어렵지 않은 과정이죠. 물론 다른 프로젝트를 진행하게 된다면 또 다른 부분이 필요할테지만 지금은 Angular을 사용하고 있으니, 이런 것이 있구나, 이렇게 부르는 구나 정도를 알아보고 Angular로 브라우저의 탭에 들어가는 아이콘, 즉 Favicon 을 설정하는 방법을 기록한다
Angular에서 가장 처음 프로젝트를 생성한다면 app.component.ts가 src 최상단에 생기게 된다. app.component.ts로 간다. 거기서 가장 처음 내가 한 행위는 Favicon 설정, 다중 언어를 사용하는 사이트이기 때문에 처음에 언어를 영어로 설정하는 방법을 세팅했다. → 네비게이션 바에 국기버튼을 만들어 그 국기를 누를 때 마다 그 나라의 언어로 변경이 되도록 localize를 설정함.
Angular 에서의 Favicon
private ngxFavicon: AngularFaviconService,
import { AngularFaviconService } from 'angular-favicon';→ favicon을 설정하는 방법은 여러 가지가 있지만, 내가 아는 한 정말 쉬워보이는 방법인 이 방법을 선택. 물론 검색해서 이 녀석을 일단 프로젝트에 가져와야한다. (너무 기본 적인 것이라 이정도 말한것만 해도 상세.. → 개발을 하면서 최소한 핑거 프린세스가 되려고는 하지 말자)
private ngxFavicon: AngularFaviconService,→ 사용해야 하니 가져오자
ngOnInit():void {
// favicon 설정하는 방법. 여기서 파비콘을 바꾸면 브라우저 상단 ui 바꿀 수 있다
this.ngxFavicon.setFavicon("../assets/img/favicon/bbc-logo.jpg");
// 사이트의 default 언어를 영어로 설정
this.translate.setDefaultLang('en');
// 사이트의 default 언어를 정하는 부분
this.language = 'en';
}→ .setFavicon : 파비콘 설정하기
2. 브라우저의 탭 글귀를 설정하는 방법 (난이도 1~100 중 1.1?)
index.html 설정
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 브라우저 탭에 들어갈 부분~ </title>
</head>
</html>title 부분에 넣으면 끝~
'Font-End' 카테고리의 다른 글
| 줄바꿈, 칸 크기 조절 가능한 입력창 만들기 (0) | 2021.07.07 |
|---|---|
| Angular modal 활용 (0) | 2021.07.06 |
| <select> <option value =1> number (int), string 오류 해결 (0) | 2021.07.06 |
| 버림, 반올림 없이 소수점 2번째 자리까지 표현 (0) | 2021.05.18 |
| <a></a> href 없이 사용하기 (0) | 2021.05.11 |
