클론 1 (login)

• .DS_Store는 맥os나 윈도우에서 만든 보이지 않는 임시파일이다.(그런데 깃은 나의 디렉토리에서 모든 파일을 참조할 수 있다.)
• 이렇게 몇몇 파일을 업로드 하고 싶지 않은 경우 커밋할때마다 제외시켜줘야 하는데 이럴 때 .gitignore 파일을 vcs에 만들어 해결한다.
• .gitignore는 무시하고 싶은 파일 이름을 기록하는 파일이다.
• 파일명 혹은 /폴더명을 적으면 무시됨.

• 훌륭한 단축키 팁
  해당줄을 복붙할 때 shift + alt + 아래(or 위)방향키
  div class="name"은 div.name으로
  div id="id"는 div#id 하면 자동완성 됨
  cmm + sft + k 줄삭제
  comment 처리는 작성후 Ctrl + /
  여러개를 동시에 만들고 싶다면 ex) div를 10개 -> div*10

• index.html 로 메인 페이지를 만든다. 대부분의 웹서버가 디폴트로 index.html을 찾아보도록 설정되어 있기 때문.
• ! + enter : html 도큐먼트 생성
• class 이름은 구체적으로 명시하기

• BEM 방식(Blcok, Element, Modifier) -- css 작성 방식
  css 작성시 id였는지 class였는지 헷갈릴 때가 많아서 class 사용으로 통일한다.(기본적으로)
  BEM 방식은 css 클래스네임을 짓는 방법이며 코드를 읽기가 쉬워진다.

  block : .btn {}
  elements(블럭을 구성하는 단위) : .btn__price {}
  modifiers(블럭이나 엘리먼트의 속성) : .btn--big {}

• 아이콘 추가하기

1. 직접 아이콘 추가
2. SVG (픽셀 없는 이미지 파일형식. 수학으로만 구성. 좌표로 되어있다): heroicons에서 아이콘 검색 후 복사해서 사용(무료), fontawesome에서(가장 유명)
   FontAwesome에서 가져온 kit code script 는 body 태그 닫기 직전에 위치시킴.
   아이콘 코드 복붙(i는 아이콘 의미), 아이콘 크기조정 클래스는 fa-2x, fa-lg 등 사용

• form 안에서 버튼 추가는 <button> , <input type="submit"> 쓸 수 있다. 후자 권장

• 어떤걸 만들지 생각해놔야 class 지정 계획을 할 수 있다.

  ---

• html에 css 스타일시트 연결. head에 link 를 추가한다. (link:css css링크 단축키)

• body에 font-family 속성으로 폰트 지정. google fonts에서 폰트서치 후 import하여 css에 추가한다(추천). import는 css 제일 상단에 위치. import후 폰트 적용(복붙). 모든 폰트를 추가하면 웹사이트 무거워짐.

  • css hack(justify-content대신 사용가능)
    justify-content는 각자의 width가 다르기 때문에 정확히 등분할 때 단점이 있다.
    레시피 같이 어디든 쓸 수 있다. 이상하지만 작동한다.

  1. 상위 박스 : justify-content: center, 중앙으로 몰림
  2. 내부 박스 범위 : width: 33%, 왼쪽으로 쏠리면서 서로 벌어짐. 왼쪽 위치할 박스는 왼쪽에 붙어서 정렬됨.
  3. 중앙에 위치할 박스 : display: flex; justify-content: center, 중앙에 위치할 박스만 중앙에 위치함
  4. 오른쪽에 정렬할 박스 : display: flex; justify-content: flex-end; align-items: center, 오른쪽에 붙어서 정렬됨