카카오 테크 캠퍼스 Start!

오늘부터 본격적인 카테캠이 시작되었다. 오후 6~7시까지 진행된 OT를 통해 강의 진행 방식과 여러가지 일정 등을 알려주었다. 사실 카테캠 노션 페이지에 TIL를 작성해도 상관없지만, 그래도 내 개인 블로그를 활성화 시켜보자는 생각으로 하루하루 공부한 것들에 대해 작성해서 남겨볼려고 한다!
그리고, 카테캠에서 제공하는 강의는 패스트캠퍼스라는 회사의 초격자 패키지의 강의를 제공하는 것 같다. 첫 강의부터 스타벅스 클론코딩이라는 느낌으로 진행되어 꽤 흥미로웠다..!

1강 - 파비콘, 스타일 초기화

우선, 강의에서 알려준 github 주소로 가서, git clone 을 진행하여 필요한 자료들을 가져와서 내 폴더로 옮겼다. 필요한 자료들은 icon과 image 들이었다.

01. 파비콘?

강의에서 파비콘이라는게 나왔는데, 파비콘이 무엇인지 부터 알아보자.

파비콘이란?

파비콘(Favicon)이란 웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지를 의미한다.
쉽게 말해, 웹 브라우저상에서 주소창 옆에 작게 표시되는 아이콘을 말한다.

파비콘 적용 방법

기본 HTML 파일 구조에서 head 태그 영역에 아래 코드를 추가해보자.

<link rel="icon" href="/파일 경로" type="image/x-icon">

ico는 아이콘 파일 확장자로, 파비콘으로 사용될 수 있는 파일확장자는 크게 ico와 png가 있다.

강의에서는 ico 파일을 사용했으며, 크기가 너무 작을 경우 png 파일을 사용하라고 했다.

02. 스타일 초기화

브라우저(chrome, safari, ... ) 마다 기본 css 의 스타일에 차이가 있다.
따라서 같은 화면을 제공하기 위해 css를 초기화 해주는 reset-css 을 활용한다.

구글에 reset css cdn 으로 검색한 뒤 jsDelivr 가 만든 사이트에 들어가거나 아래 주소에서 URL 을 복사하여 head 태그 영역에 아래 link 태그를 추가하여 적용시킨다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css" />

적용할 경우 프로젝트의 css 코드가 초기화 됨을 알 수 있다!