CSS 작업 경험 — 반응형 레이아웃을 직접 구현한 경험
약 110초
경험 중심 — CSS 플렉스박스로 반응형 화면을 만든 경험
포트폴리오 사이트를 직접 만들면서 CSS 플렉스박스로 모바일과 데스크톱 레이아웃을 동시에 대응하는 작업을 하였습니다.
처음에는 픽셀 단위로 크기를 고정하여 모바일에서 화면이 깨졌습니다. 미디어 쿼리를 공부하면서 768px 기준으로 레이아웃을 전환하는 방식을 적용하였습니다. 처음에 적용했을 때 텍스트가 버튼을 덮는 오류가 발생하였는데, 플렉스 방향을 column으로 바꾸니 해결되었습니다.
이 과정에서 CSS가 어떻게 화면을 잡는지 구조적으로 이해하게 되었습니다.
이 경험에서 CSS는 외워서 쓰는 것이 아니라 직접 만들어보면서 왜 그렇게 동작하는지 이해해야 실제로 쓸 수 있다는 것을 배웠습니다. 에러를 고치는 과정에서 더 많이 배웠습니다.
이 결의 특징
포트폴리오 사이트에서 픽셀 고정 방식으로 모바일에서 화면이 깨진 구체적 증상과, 768px 기준 미디어 쿼리로 전환한 해결책이 있습니다. 플렉스 방향을 column으로 바꿔 텍스트-버튼 겹침 오류를 해결한 세부 디버깅 흔적도 드러나 있습니다.
이 결이 통하는 자리
CSS가 화면 구조를 어떻게 잡는지 구조적 이해가 생겼을 때 통합니다. 직접 만들어보며 에러를 고치는 과정에서 배운 경험이 실무에서 레이아웃 문제를 자율적으로 진단할 수 있는 역량으로 자리 잡을 때입니다.