KokoaTalk Clone Coding: sign up screen 1(status-bar)
status bar html 작성
sign up screen을 위한 html 파일은 'index.html'으로 생성
대부분의 웹서버는 디폴트로 'index.html' 파일을 찾도록 설정되어있음
'Visual Studio Code' 사용한다면 !(단축키)를 누르면 요약된 코드를 볼 수 있음
도큐멘트가 생성됨
status bar에는 3개의 column 있음
1. No Service와 Wifi Icon 2. 18:43(시간) 3. 11%(배터리 잔량)와 Battery Icon, Lightning
column은 다른 페이지에도 많이 있기 때문에 CSS에서 어떤 column을 가리키는지 헷갈릴 수 있음
status-bar의 column(status-bar__column)이라고 명시
BEM(Block Element Modifier): 좀 더 쉽게 읽히는 CSS를 작성하는 규칙
ex. (father class name)__(son: class element) or (father class name)--(son: class modifier)
Icon을 찾는 옵션
직접 이미지를 생성하고 추출하거나 SVG image를 사용
1. heroicons.dev
2. ★fonawesome.com
무료 버전으로 시작하기
이메일을 입력해서 Kit Code를 받음
<scipt>는 <body>를 닫기 전에 붙여넣기
Kit Code를 붙여넣으면 Icon을 사용할 수 있음
Kit Code 설치됨
Wifi 이미지를 찾아서 클릭
주석표시 해둔 Icon 자리에 붙여넣기
Wifi Icon 생성
Bolt 과 Lightening Icon 생성