Tistory
CSS 길이 단위 이해하기
CSS에서 사용하는 다양한 길이 단위(px, em, rem, vw, vh, % 등)의 특성과 올바른 사용 상황을 설명하는 아티클입니다. 절대 단위와 상대 단위의 차이를 이해하고, 반응형 디자인과 접근성을 고려한 단위 선택 방법을 다룹니다.
핵심 요약
이 아티클은 CSS 레이아웃과 시각 표현를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. CSS에서 사용하는 다양한 길이 단위(px, em, rem, vw, vh, % 등)의 특성과 올바른 사용 상황을 설명하는 아티클입니다. 절대 단위와 상대 단위의 차이를 이해하고, 반응형 디자인과 접근성을 고려한 단위 선택 방법을 다룹니다. 적절한 CSS 단위 선택은 반응형 레이아웃과 접근성에 직접적인 영향을 미치므로 프론트엔드 개발의 기본기입니다.
이 아티클은 CSS 레이아웃과 시각 표현를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
CSS 레이아웃과 시각 표현를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. px는 절대 단위로 화면 크기나 사용자 설정에 영향받지 않아 정밀한 고정 크기 지정에 사용된다 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
px는 절대 단위로 화면 크기나 사용자 설정에 영향
px는 절대 단위로 화면 크기나 사용자 설정에 영향받지 않아 정밀한 고정 크기 지정에 사용된다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
px는 절대 단위로 화면 크기나 사용자 설정에 영향를 개념으로만 기억하고 맥락 없이 적용하면 px는 절대 단위로 화면 크기나 사용자 설정에 영향받지 않아 정밀한 고정 크기 지정에 사용된다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
em은 부모 요소의 font-size를 기준으로 계
em은 부모 요소의 font-size를 기준으로 계산되어 중첩 시 예상치 못한 크기 변화가 발생할 수 있다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
em은 부모 요소의 font-size를 기준으로 계를 개념으로만 기억하고 맥락 없이 적용하면 em은 부모 요소의 font-size를 기준으로 계산되어 중첩 시 예상치 못한 크기 변화가 발생할 수 있다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
rem은 루트 요소
rem은 루트 요소(html)의 font-size를 기준으로 해 예측 가능하고 접근성 친화적이어서 폰트 크기에 권장된다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
rem은 루트 요소를 개념으로만 기억하고 맥락 없이 적용하면 rem은 루트 요소(html)의 font-size를 기준으로 해 예측 가능하고 접근성 친화적이어서 폰트 크기에 권장된다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
읽는 순서
- 1이론
"CSS 길이 단위 이해하기"의 멘탈 모델과 요약을 먼저 읽고, CSS 레이아웃과 시각 표현와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
CSS 길이 단위 이해하기에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 CSS 레이아웃과 시각 표현와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "CSS에서 em과 rem의 차이는 무엇이며, 각각 어떤 상황에서 사용하는 것이 적합한가요?"에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "CSS 길이 단위 이해하기에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] em은 부모 기준, rem은 루트(html) 기준임을 설명하고, rem은 전역 폰트 크기에 em은 컴포넌트 내부 상대적 크기에 유용함을 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "CSS 길이 단위 이해하기에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 브라우저 기본 폰트 크기 설정 존중, 접근성(고령자, 시각 장애 사용자), 미디어 쿼리와의 연계성을 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "CSS 길이 단위 이해하기에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 모바일 브라우저 주소창 높이 변화로 인한 100vh 문제, dvh(dynamic viewport height) 단위나 JavaScript 활용 해결책을 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"px는 절대 단위로 화면 크기나 사용자 설정에 영향"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.