피리부는 사나이 (pied piper)

Box-sizing : border-box를 쓰고 시작하는 이유 일단 CSS는 기본적으로 box-sizing : content로 디폴트값이 설정되어있다. 그렇다면 무엇이 문제가 되는가? Width : 480px Height: 480px을 줬을 때 우리가 직관적으로 보는 (보더까지가 박스사이즈)라고 보는 것이 배신당한다는 이야기다. 실제로 패딩은 (보더안쪽, 컨텐츠 영역으로 보면 됨) 늘었을 때 컨텐츠 크기에 +되는 경향이 있음 그렇다면 저 사진 기준으로 박스 사이즈가 원래 설정해주고 싶음 480Px에 고정되는게 아니라, Height 480+패딩 탑 40이 되고, width 480 + 패딩 left 50이 되는 것 (정사각형이 아닌 직사각형이 됨) 이런 짜증나는 경우를 잡기위해 필요한 게 Box-sizin..

Flex grow : 해당 속성을 가진 요소가 그 줄에 남은 width를 다 차지하게 만드는 것 Ex) = 부모의 width : 500px '자식1' = 자식1의 width : 200px

스샷 몇개는 김버그님의 css강의에서 가져온 것도 있습니다

CSS를 배우면서 가장 헷갈리고 어려운 개념중 하나인 Float 사실 헷갈리고 어려운 이유는 이 플로트가 가진 문제가 많기때문이다. 그래서 현업에서는 플로트를 거의 쓰지 않는다고 한다. Float대신 Flex로 간단하게 처리하는 추세 그럼에도 불구하고 프론트 엔드 개발자가 되어서 CSS 디버깅을 하려면 반드시 넘어야할 산이다. 다행이도 CSS에 어려운 개념은 그렇게 많지 않다. 그 중 하나가 이 플로트라고 생각하고 내용이 이해되지 않는 것들을 다시 정리하면서 글을 써보았다. Float : 사전적인 정의처럼 말 그대로 떠있는 개념으로 받아들이기 빨간색 자식에 플로트를 주면 붕뜨고 붕뜬다는 것은 자기 집에서 나갔다는 것으로 받아들이자 다른 요소들은 플로트된 자식에 대하여 이렇게 생각한다. 1. 집 나간 자..