코코아톡 클론코딩 10일차

so960225·2022년 7월 13일
0

#6 CLONING TIME


#6.1 Sign Up Screen part One

  • index는 대부분의 웹서버가 가장 먼저 읽는 파일이다. (이는 브라우저가 가진 디폴트 속성입니다.)
  • '!'는 html 기본 서식을 빠르게 입력할 수 있는 단축키이다.
  • column이라는 이름은 매우 일반적이기 때문에 (다른 html 파일에서도 많이 사용되는 이름이라), 구분을 짓기 위해 '부모 요소자식요소'로 이름을 짓는다.
    예) 〈div id="status-bar"〉
    〈div class = "status-bar
    column"〉 〈/div〉
    〈/div〉
  • 〈!--내용--〉은 브라우저에게 보이지 않고, 사용자만 볼 수 있는 일종의 메모이다. (물론 개발자 도구로는 볼 수 있습니다. 구현되는 페이지에 드러나지 않을 뿐이다.)

6.2 BEM

  • BEM
    • block
      block__element
      block__element--modifier
      내가 내 코드를 다시 볼 때, 남들이 내 코드를 찾아 볼 때 이해에 도움을 준다
      BEM에 대한 한국어 설명
      BEM CSS

6.3 Font Awesom

  • 아이콘을 추가하는 데에는 두 가지 옵션이 있다.
  1. 직접 아이콘을 구하는 방법(직접 이미지를 만들고 추출하거나 svg파일을 이용. svg는 픽셀이 없는 이미지 파일형식. 수학으로만 구성된 형식)
    직접구하는방법
  2. Heroicons, FontAwesome에서 가져오기
  • FontAwesome에서 가져온 kit code 스크립트는 항상 마지막에 있어야한다. body 태그를 닫기 직전.
    fontawesome
  • 'i'는 icon의 줄임말.

6.4 Sign Up Screen part Two

  • input 태그에 type을 "submit"으로 하는 방법
  • 링크는 무척 많아서 하나만을 위한 id나 class를 추가할 필요는 없다
    vsc단축키

6.5 Status Bar CSS

  • link:css + enter : css링크 단축키
    web font
  • link 보다 import를 추천한다.
  • import위치는 제일 상단
  • body에 font-family 추가
  • 모든 폰트를 추가하면 웹사이트 무거워진다.
    Google Fonts
    css hack(justify-content대신사용가능)
  • 레시피 같이 어디든 쓸 수 있다. 이상하지만 작동한다.
  • 1 상위 박스 : justify-content: center; -중앙으로 몰림
  • 2 내부 박스 범위 : width: 33%; -왼쪽으로 몰려서 범위 벌어짐, 왼쪽 위치할 박스는 왼쪽에 붙어서 정렬됨
  • 3 중앙에 위치할 박스 : display: flex; justify-content: center; -중앙에 위치할 박스만 중앙에 위치함
  • 4 오른쪽에 정렬할 박스 : display: flex; justify-content: flex-end; align-items: center; -오른쪽에 붙어서 정렬됨

profile

0개의 댓글