지난주에는 CSS 레이아웃의 핵심인 Position과 Flexbox를 배웠고, 학습 자료에서는 Reflow/Repaint, 미디어 쿼리, 반응형 단위까지 다뤘습니다. 핵심만 빠르게 짚어보겠습니다.
static(기본값): 문서 흐름대로, top/left 등 무시relative: 원래 위치 기준으로 이동, 원래 자리는 유지absolutefixed: 뷰포트 기준, 스크롤해도 고정/* absolute 자식 제어 패턴 — 부모에 반드시 relative */
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
} /* 부모 오른쪽 상단 */
/* fixed: 스크롤해도 화면에 고정 — 고정 헤더, 플로팅 버튼 */
.floating-btn {
position: fixed;
bottom: 24px;
right: 24px;
}
justify-content: 주축(Main Axis) 정렬align-items: 교차축(Cross Axis) 정렬flex: 1: 남은 공간 전부 차지flex-wrap: wrap: 넘치면 줄바꿈/* 정중앙 배치 — 가장 자주 쓰는 패턴 */
.center {
display: flex;
justify-content: center; /* 주축(가로) 중앙 */
align-items: center; /* 교차축(세로) 중앙 */
height: 100vh;
}
/* "주축은 justify, 교차축은 align" */
4주차 학습 자료에는 강의에서 다루지 않은 개념들이 많았습니다. 특히 실무와 직결되는 내용이 많으니 다시 짚어보겠습니다.
top/left를 변경하면 매 프레임 Reflow(가장 비쌈)가 발생하지만,
transform을 사용하면 Composite만 발생해서 부드럽습니다. 애니메이션에는
transform과 opacity를 사용하세요.min-width로 모바일 퍼스트 반응형을
구현합니다. 반응형 외에도 prefers-color-scheme(다크 모드),
prefers-reduced-motion(접근성), hover(터치 기기 감지), print(인쇄) 등
다양한 용도가 있습니다./* 모바일 퍼스트(Mobile First) — 작은 화면을 기본으로, min-width로 확장 */
.card {
width: 100%;
} /* 기본: 모바일 */
@media (min-width: 768px) {
/* 태블릿 이상 */
.card {
width: 48%;
}
}
@media (min-width: 1024px) {
/* 데스크톱 이상 */
.card {
width: 30%;
}
}
absolute일 때 렌더링 순서에 따라 하단 내비게이션에 가려지는 문제가 발생했고,
fixed로 바꿔서 해결했습니다. 항상 화면에 떠 있어야 하는 요소는 fixed, 부모
안에서 위치를 잡아야 하는 요소는 absolute입니다.1fr은
남은 공간을 비율로 나누고, repeat(auto-fill, minmax(280px, 1fr))로 미디어
쿼리 없이도 자동 반응형이 가능합니다./* Grid 3열 레이아웃 */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* 미디어 쿼리 없이 자동 반응형 */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
vw(뷰포트 너비), vh(뷰포트 높이), dvh(동적
뷰포트 높이). 모바일에서 100vh를 쓰면 주소창에 가려지므로 100dvh를
사용합니다.transition: CSS 속성 값이 변할 때 부드럽게 전환되도록
합니다. transition: background-color 0.2s ease처럼 속성, 시간, 타이밍 함수를
지정합니다. 버튼 호버 효과, 카드 떠오르는 효과, 사이드바 슬라이드 등에
활용됩니다. transition: all보다 전환할 속성을 명시하는 것이 성능에 좋습니다.
Tailwind에서는 transition-colors duration-200 같은 유틸리티로 적용합니다.calc() 함수: width: calc(100% - 250px)처럼 서로 다른
단위(%, px, rem, vw)를 섞어서 계산할 수 있습니다. 연산자(+, -, *, /)
앞뒤에 공백이 필수입니다. CSS 변수와 조합하면 calc(100vh - var(--header-height)) 같은 동적 계산도 가능합니다.<div id="A" style="position: relative;">
<div id="B" style="position: static;">
<div id="C" style="position: absolute; top: 0; left: 0;"></div>
</div>
</div>이번 주는 CSS 마무리 주차인 만큼, 4주차 범위뿐만 아니라 HTML/CSS 전체를 아우르는 면접 질문을 다뤄보겠습니다.
둘 다 CSS 레이아웃 시스템이지만, 다루는 차원이 다릅니다.
면접 팁: "한 방향이면 Flex, 두 방향이면 Grid"라고 요약한 뒤, 실무에서는 페이지 전체를 Grid로, 내부 컴포넌트는 Flexbox로 섞어 쓴다고 답하면 좋습니다.
Q2. 반응형 웹 디자인에서 모바일 퍼스트(Mobile First) 접근법이란 무엇인가요?
모바일(작은 화면)을 기본 스타일로 작성하고, min-width
미디어 쿼리로 점점 큰 화면에 대응하는 방식입니다.
max-width로 줄여나가는 방식입니다.
레거시 프로젝트에서 볼 수 있지만 현재는 권장되지 않습니다.다음 주부터는 JavaScript에 들어갑니다. HTML과 CSS로 화면을 구성하는 방법을 배웠으니, 이제 그 화면에 동작을 부여하는 차례입니다.
다음 주부터 JavaScript 강의 영상이 시작됩니다. HTML이 구조, CSS가 스타일이라면, JavaScript는 동작을 담당합니다. 영상에서 다루게 될 핵심 주제를 미리 훑어보세요.
let, const, var가
나옵니다. 강의에서 세 가지의 차이와 언제 뭘 써야 하는지를 배우게 됩니다.+, -, === 같은 연산자와 if/else로
상황에 따라 다른 동작을 하는 법을 배웁니다.function과 화살표 함수(=>)가 등장합니다.