웹 개발을 하다 보면 요소의 위치를 조정해야 할 일이 수없이 많다. 그런데 CSS position 속성을 정확히 이해하지 못한 채 top, left, right, bottom 값만 무작정 조정하다가 레이아웃이 엉망이 되는 경험을 누구나 한 번쯤 해봤을 것이다. 실무에서는 position의 종류에 따라 요소가 배치되는 기준점(containing block)이···
모니터 크기에 맞춰 디자인한 반응형 웹사이트가 실제 모바일에서는 엉망으로 보인다. 미디어 쿼리 코드는 분명히 제대로 썼는데 왜 작동 안 할까. 대부분의 개발자들은 CSS 파일만 들었다 놨다 하면서 시간을 낭비한다. 실제로는 HTML 구조, 뷰포트 설정, CSS 캐싱, 선택자 우선순위 같은 여러 요인이 복합적으로 작용한다. 이번에는 미디어 쿼리가 작동하지 않···
웹 레이아웃을 짤 때 Grid를 써야 하나 Flexbox를 써야 하나 고민한 적 있을까. 대부분의 개발자들은 둘 다 '정렬된 박스들'이라고 생각해서 그냥 익숙한 것만 쓰거나, 구글에서 답을 찾아서 복사-붙여넣기한다. 다만 두 방식은 근본적으로 다른 목적을 가지고 있고, 어떤 상황에서 어느 것을 쓰느냐에 따라 코드 복잡도와 유지보수성이 완전히 달라진다. 이번···
Flexbox를 처음 배울 때 가장 헷갈리는 부분이 뭘까. 아마도 여러 정렬 속성들이 정확히 언제, 어느 축에서 동작하는지 구분하지 못하는 것일 거다. justify-content, align-items, align-self가 각각 뭐 하는 건지, 그리고 왜 원하는 방향으로 정렬이 안 되는지 모르는 채 속성값을 이것저것 막 바꿔보던 경험 말이다. 다만 대부···
자식 요소의 체크 상태나 에러 유무에 따라 부모 요소의 배경색이나 레이아웃을 변경해야 하는 상황을 경험해봤을 것이다.다만 이전에는 CSS만으로 부모 선택자를 지정할 방법이 없어 어쩔 수 없이 JavaScript 이벤트 리스너로 클래스를 붙였다 떼었다 하는 복잡한 방식을 사용하는 경우가 많았다.이번에는 CSS :has() 의사 클래스가 정확히 무엇인지, 왜 ···
웹 애플리케이션을 개발하다 보면 사이드바, 모달, 메인 콘텐츠 영역 등 다양한 위치에서 재사용되는 카드 컴포넌트의 레이아웃이 지저분하게 깨지는 현상을 경험해봤을 것이다. 다만 대부분의 개발자들은 뷰포트 기준 미디어 쿼리의 한계 때문이라는 정확한 원인이나 해결책을 모르는 경우가 많다.이번에는 CSS Container Queries가 정확히 뭔지, 왜 필요한지···
긴 텍스트가 박스를 벗어날 때 어떻게 처리할지는 웹 개발에서 자주 만나는 문제다. 카드 레이아웃, 리스트 아이템, 댓글 목록처럼 고정된 너비에 텍스트를 맞춰야 할 때가 많기 때문이다. 다만 많은 개발자들은 CSS의 text-overflow나 JavaScript의 substring()을 막무가내로 섞어서 쓰거나, 불필요한 라이브러리를 끌어오곤 한다. 이번에는···
컨텐츠형 페이지를 만들다보면 특정 구간에 불필요한 내용이 길어져 일부 내용을 자르고 더보기 기능을 만들어야할 때가 있다. 더보기 기능은 간단할것 같으면서도 막상 만들려면 귀찮을때가 많이 있다. 특히나 반응형 작업 시에는 고정 크기 화면의 PC화면과는 다르게 크기별로 높이가 달라져 조건처리가 필요할 수도 있다. 이번편에 소개할 더보기 기능은 아래와 같이 두가···