2020.10.06 TIL

사이드 프로젝트를 진행하며 클라이언트 중 CSS 부분이 약하다고 생각했다. CSS의 레이아웃을 정렬하는데 많은 시간이 걸렸고, 흥미를 잃기 좋은 핑계가 되었다. 이러다 코딩이 값비싼 취미 활동으로 전락할까봐 마음을 다잡고, 노마드 코더의 카카오톡 클로닝인 '코코아톡 클로닝' 강의를 듣기로 했다. 기존에 아는 내용도 있지만, 시간에 쫓겨 허겁지겁 대충 훑어 보았던 mdn도 강사와 함께 살펴보며 다시금 기초를 착실히 쌓기로 한다. 당분간 지지부진하게 진도 안나가는 사이드 프로젝트는 접어 두고, 코코아톡 클로닝부터 듣고 따라해본다.

 

margin collapse 현상 (출처 : 블로그)

: 형제/부모 요소들이 내 코드를 무시하고, 여백이 지멋대로 조정되곤했는데 이런 현상이 있는 줄 처음 알게 되었다.

 

inline 인 Span 은 위 아래 높이가 없다. padding 은 상하좌우 적용이 가능하나, margin 위 아래는 적용되지 않는다. 

 

inline-block 은 block 이 inline 의 성격을 띄게 하는데, margin이나 반응형 웹페이지에 제멋대로 움직인다는 단점이 있다.

 

display:flex

• flex를 적용할 개체의 상위 개체에 지정한다.
• justify-content : 가로축(기본)에서 움직임 <----> align-items: 세로축(기본)에서 움직임
• 만약 align-items:center해도 변화가 없다면, 부모개체의 높이를 체크한다. 대부분 자녀객체와 같은 높이일 가능성이 있다. 
• height:100 vh <- viewport height 화면 크기에 따라 바뀜
• flex-direction을 row -> colume으로 바꾸면 justfy-content(세로축)와 aligh-items(가로축)도 반대로 움직인다.
• body-div 관계에서, div 가 <div>1</div> 식으로 콘텐츠가 있으면, div에도 display:flex를 적용해주어야 1에 align-items, justify-content를 적용할 수 있다.