개발자들이 가장 자주 겪는 CSS 문제 중 하나가 바로 수직 정렬이다. vertical-align: middle을 써도 텍스트가 가운데 안 뜨고, 이미지와 텍스트 사이에 이상한 공백이 생기고, 버튼 안의 아이콘이 삐뚤어진다. 다만 대부분의 개발자들은 이 문제의 원인이 정확히 뭔지, 왜 vertical-align이 안 되는 건지 모른 채 인터넷에서 가져온 코···
웹 레이아웃을 짤 때 Grid를 써야 하나 Flexbox를 써야 하나 고민한 적 있을까. 대부분의 개발자들은 둘 다 '정렬된 박스들'이라고 생각해서 그냥 익숙한 것만 쓰거나, 구글에서 답을 찾아서 복사-붙여넣기한다. 다만 두 방식은 근본적으로 다른 목적을 가지고 있고, 어떤 상황에서 어느 것을 쓰느냐에 따라 코드 복잡도와 유지보수성이 완전히 달라진다. 이번···
Flexbox를 처음 배울 때 가장 헷갈리는 부분이 뭘까. 아마도 여러 정렬 속성들이 정확히 언제, 어느 축에서 동작하는지 구분하지 못하는 것일 거다. justify-content, align-items, align-self가 각각 뭐 하는 건지, 그리고 왜 원하는 방향으로 정렬이 안 되는지 모르는 채 속성값을 이것저것 막 바꿔보던 경험 말이다. 다만 대부···