개발자들이 가장 자주 겪는 CSS 문제 중 하나가 바로 수직 정렬이다. vertical-align: middle을 써도 텍스트가 가운데 안 뜨고, 이미지와 텍스트 사이에 이상한 공백이 생기고, 버튼 안의 아이콘이 삐뚤어진다. 다만 대부분의 개발자들은 이 문제의 원인이 정확히 뭔지, 왜 vertical-align이 안 되는 건지 모른 채 인터넷에서 가져온 코···
웹 개발을 하다 보면 요소의 위치를 조정해야 할 일이 수없이 많다. 그런데 CSS position 속성을 정확히 이해하지 못한 채 top, left, right, bottom 값만 무작정 조정하다가 레이아웃이 엉망이 되는 경험을 누구나 한 번쯤 해봤을 것이다. 실무에서는 position의 종류에 따라 요소가 배치되는 기준점(containing block)이···
웹 레이아웃을 짤 때 Grid를 써야 하나 Flexbox를 써야 하나 고민한 적 있을까. 대부분의 개발자들은 둘 다 '정렬된 박스들'이라고 생각해서 그냥 익숙한 것만 쓰거나, 구글에서 답을 찾아서 복사-붙여넣기한다. 다만 두 방식은 근본적으로 다른 목적을 가지고 있고, 어떤 상황에서 어느 것을 쓰느냐에 따라 코드 복잡도와 유지보수성이 완전히 달라진다. 이번···