[CSS] status-bar를 중앙 정렬해 위치시키는 hack! // 드디어 시작된 클론코딩!

space-between 으로는 시계가 한쪽으로  쏠리는 문제가 발생!!!

css hack (justify-content: space-between 를 대신해 사용가능!) 
- 레시피 같이 어디든 쓸 수 있다. 이상하지만 작동한다.
- 1 상위 박스 : justify-content: center; -중앙으로 몰림 

  -> 가운데 시계가 한쪽으로 쏠리는 문제가 발생!!
- 2 내부 박스 범위 : width: 33%; -왼쪽으로 몰려서 범위 벌어짐, 왼쪽 위치할 박스는 왼쪽에 붙어서 정렬됨
- 3 중앙에 위치할 박스 : display: flex; justify-content: center; -중앙에 위치할 박스만 중앙에 위치함
- 4 오른쪽에 정렬할 박스 : *display*: flex; *justify-content*: flex-end; *align-items*: center; -오른쪽에 붙어서 정렬됨

 이후 

.status-bar__column:last-child {

  display: flex;

  justify-content: flex-end;

  align-items: center;

}

.status-bar__column .fa-battery-full {

  margin: 0px 5px;

}

로 오른쪽 붙은 숫자, 배터리, 볼트 모양도 맞춰주기!!

 

--

 

기초적인 강의가 끝나고 시작된 클론코딩. html로 뼈대 잡고 CSS로 구색을 갖춰나가는 과정이 너무 재밌다.

지금까지 해온 속도보다 앞으로 더 빠르게 진도를 나가지 않을까.

동시에 완료된 기초도 꼼꼼하게 복습하고 헷갈리는건 그때그때 개념을 잡고 나아가자!!

특히 display나 justify-content, aligh-items는 천천히 복습하고 넘어가야 할듯..!!

 

--

 

클론코딩 강의는  노마드코더에서 수강중입니다.

코딩을 처음 입문하면서, 흥미붙이는게 중요해보여 클론코딩 강의를 수강하고 있으며 노마드코더 사이트의 무료강의나 챌린지도 학습욕구를 불태우기 좋은것 같습니다. (광고 절대 아님! 내돈내산 강좌로 수강중)

 

카카오톡 클론코딩. 가격은 10만원쯤 했던듯

강좌를 듣고 혹은 병행하며 진행하는 챌린지. 슬랙으로 챌린지에 도전중인 회원들과 질문/답변 해가며 의욕 불태우기 가능!!

 

사이트 링크는

nomadcoders.co/

 

앞으로도 화이팅~!