css

노마드코더 코코아톡 클론 챌린지/코스 완료~!

슬랙을 써보는 경험부터 유쾌했던 노마드코더 강좌와 챌린지. 재미있으면서도 하나하나 해결하는게 뿌듯했던 과정이었다. 결과물은 여기 https://yongwoo-jeong.github.io/kakao-clone-2021/ 아래는 노마드코더 커뮤니티에 올린 후기 https://nomadcoders.co/community/thread/739 #739 – 노마드 코더 Nomad Coders 개발자 99% 커뮤니티에서 수다 떨어요! nomadcoders.co 노마드코더는 구글링을 통해 알게되었고 클론코딩이라는 컨텐츠에 끌려 거의 가입과 동시에 수강을 시작했던 기억이 납니다. . 사실 초심자가 따라하기 좋은 클론코딩 + 재치있는 니꼬쌤 조합이라 강좌 자체도 참 많은 도움이 되었지만!! 챌린지🔥를 통해 성장하는걸 많이..

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

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; -오른..

[CSS] Flexbox, Media Queries recap

display에서 inline-blcck의 활용상 문제로 Flexbox를 고안했다. 자유롭게 box를 둘 수 있다. flexbox는 이름자체가 flexibe이다 2차원 레이아웃에서 잘 작동한다. 1) 부모 엘리먼트에만 명시해야한다. 나중에 이해하게 될것 부모 엘리먼트에만 말을 한다 3개의 dvi를 가리키는 자식을 움직이고 싶으면 flex를 할 필요없다 div의 부모에게 말하면된다 즉 body! body가 의 부모다 부모에게만 명시하면된다 부모 엘리먼트를 flex container로 만들어야한다 즉 body의 display가 flex를 주면된다 이제 body가 children을 제어할 수 있다 ※ Rule no1. flex는 부모의 display 속성에 해야한다 절대 자식에하는것이 아니다! display ..

[CSS] combinator, selector

Remember that you dont have to memorize all these things right now. You will learn by repetition in practicing. Combinator 1) div span : div 속 span을 의미. span이 div의 direct children이 아니어도 작동 2) div > span : span이 div의 direct children임을 의미. 이땐 direct children이 아니면 작동하지 않습니다. 3) div + span : div와 동등한 위치에 있는 span을 의미. div ~ span과는 달리 바로 옆에 위치해야함. 4) div ~ span : div라는 부모를 공유하는 모든 span 선택 Selector Att..