노마드코더 코코아톡 클론코딩 7일차

#6 Cloning Time

• .DS_Store는 맥os나 윈도우에서 만든 보이지 않는 임시파일이다.
• .gitignore는 무시하고 싶은 파일 이름을 기록하는 파일이다. .gitignore에 .DS_Store을 쓰면 git에서 보이지 않는다.

 

• 대부분의 웹 서버가 디폴트로 index.html을 가장 먼저 찾아보도록 설정되어 있다.

 

• vsc에서 ! 만 쳐도 다음과 같이 코드가 작성되도록 단축키가 설정되어 있다.

 

• 너무 흔한 이름은 헷갈리기 때문에 긴 이름을 적어주는 것이 좋다. 나중에 알아보기 쉽게 '부모요소__자식요소' 라 이름 짓는다.

 

#6.2 BEM

BEM (Block Element Modifier)

: 좀 더 쉽게 읽히는 CSS를 가지도록 하는 규칙

(장점) - 소스코드를 더 쉽게 알아보고 사용할 수 있음

             어떤 클래스가 어떤 책임을 가지는지, 서로 관계는 어떻게 되는지 등..

(단점) - class가 굉장히 많아짐.

BEM 방식을 사용하거나, id와 class를 섞어 쓰거나 두 가지 방법 중 자신에게 더 맞는 방법을 사용하면 된다.

 

 

#6.3 Font Awesome

아이콘 추가하는 방법

1. 직접 아이콘을 구하기

- 직접 이미지를 만들고 추출하거나 svg 파일을 이용 (svg는 픽셀이 없는 이미지 파일 형식. 수학으로만 구성된 형식) 

 

2. Heroicons 또는 Font Awesome에서 가져오기

- <script>는 항상 마지막(body태그를 닫기 직전)에 위치시킨다.

 

https://heroicons.com/

Heroicons

 

https://fontawesome.com/

Font Awesome

 

 

#6.5 Status Bar CSS

• link:css = css 링크 단축키
• body에 font-family 속성 추가
• Google fonts에서 원하는 폰트를 찾아서 사용할 수도 있다.
• head에 link를 사용해서 추가할 수도 있지만 css @import 하는것을 더 추천한다.

<사용된 CSS hack>

1. body 100% 안에 있는 status-bar 전체를 우선 화면에서 가운데에 위치하도록
justify-content:center; 를 적용한다. → 전체 요소들이 모두 가운데 위치하게 된다.

2. status-bar__column에 각각 33% 값을 주어 status-bar를 3등분 한다.
→ 스크린을 줄이거나 늘이더라도 status-bar__column들은 그 안에서 왼쪽 정렬로 위치하게 된다.

3. 첫번째 column은 가장 왼쪽(기본값), 두번째는 가운데(center) 그리고 세번째는 가장 끝(flex-end)으로 위치시키면 시계는 가운데에 있고 나머지 요소는 가장자리에 위치하게 된다.