#6 CLONING TIME
#6.1 Sign Up Screen part One
- index는 대부분의 웹서버가 가장 먼저 읽는 파일이다. (이는 브라우저가 가진 디폴트 속성입니다.)
- '!'는 html 기본 서식을 빠르게 입력할 수 있는 단축키이다.
- column이라는 이름은 매우 일반적이기 때문에 (다른 html 파일에서도 많이 사용되는 이름이라), 구분을 짓기 위해 '부모 요소자식요소'로 이름을 짓는다.
예) 〈div id="status-bar"〉
〈div class = "status-barcolumn"〉 〈/div〉
〈/div〉- 〈!--내용--〉은 브라우저에게 보이지 않고, 사용자만 볼 수 있는 일종의 메모이다. (물론 개발자 도구로는 볼 수 있습니다. 구현되는 페이지에 드러나지 않을 뿐이다.)
6.2 BEM
- BEM
- block
block__element
block__element--modifier
내가 내 코드를 다시 볼 때, 남들이 내 코드를 찾아 볼 때 이해에 도움을 준다
BEM에 대한 한국어 설명
BEM CSS
6.3 Font Awesom
- 아이콘을 추가하는 데에는 두 가지 옵션이 있다.
- 직접 아이콘을 구하는 방법(직접 이미지를 만들고 추출하거나 svg파일을 이용. svg는 픽셀이 없는 이미지 파일형식. 수학으로만 구성된 형식)
직접구하는방법- 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; -오른쪽에 붙어서 정렬됨
