코코아톡 클론코딩 시작 Cocoa Talk 1-1 status-bar

드디어 코코아톡 클론 코딩을 시작한다.

 

먼저 백엔드는 구현이 안되기 때문에 레이아웃을 구현하는데 초점을 둔다.

총 8페이지의 코코아톡 페이지를 만들 예정

강의 틈틈히 기록용이라 양식이나 순서가 없다는 점 이해해주시길...

 

각 페이지당 html과 css를 구현해보자

먼저 첫 번째 페이지는 index.html로 명명한다

이유는 웹서버가 default로 index.html을 찾아보도록 설정되어 있다고 한다.

 

먼저 첫 번째 페이지의 상단 status - bar를 만든다

 - id는 유니크한 이름, class는 일반적이지 않은 식별 가능한 이름

 

*BEM ( block Element and modifier ) 블록 요소 규칙

Class Name

. btn {} - block

. btn__price {} - btn안에 price정보

modifier

. btn--orange {} 

 

id와 class를 같이 쓰다 보니 이게 id인지 클래스인지 헷갈린다.. 공감 x100

그래서 프로그래머 들은 모든 부분에 class를 사용하자고 결정. 

그리고 클래스 네임에 규칙을 줬다 그게 bem

 

css-tricks.com/bem-101/

BEM 101 | CSS-Tricks

 

* icon

아이콘을 구하는 데는 직접 구하거나 또는 직접 만들고 추출하거나 svg파일을 만들어 쓴다

svg- 픽셀이 없는 이미지 파일 형식 only math

 

heroicons.com/

Heroicons

fontawesome.com/

Font Awesome

 

* script는 always 바디 태그를 닫기 직전에 넣는다.

 

status-bar를 만들자

우선 status-bar는 총 세 개의 열로 구성된 박스이다

div를 하나 만들고 자식 요소 div3개를 만든다

class네임을 각각 주고 status-bar의 자식 div에 span태그 자식이 들어가고 거기에 필요한 텍스트

각각에 필요한 아이콘을 쓴다.

그리고 css에서 font-family로 글꼴 변경하고 부모 status-bar로 display: flex를 통해 인라인을 만든다

각각 사이를 cross-axis에 맞춰 간격을 주기 위해 space-between을 사용

 

cocoa talk clone

근데... 시계가 가운데 있질 않다.. 왼쪽 와이파이랑 오른쪽 배터리 부분 사이즈가 다르군...

이를 해결하기 위해 각 div칼럼의 width를 33%씩 주고 부모 status-bar의 justyfy-content를 center로 바꿔준다.

그 후 status-bar의 두 번째 자식 요소에 flex를 해주고 역시 center로 잡아준다

그리고 마지막 자식요소에 역시 flex 하고 끝으로 갈 수 있게 flex-end처리. 아이콘 크기 때문에 흐트러진 것은

align-items를 center로 놓고 배터리 아이콘에 좌우 3px의 마진을 준다.

awsome! 굳굳 자 스테이터스 바 끝.