실무에서 자주 쓰이는 레이아웃 구성 방식 3가지

시멘틱 태그 활용

의미 있는 태그 사용으로 구조 명확하게
예시: <header>, <nav>, <section>, <article>, <footer>

이미지에는 alt 속성 필수

시각장애인 사용자 대응
예시: <img src="logo.png" alt="사이트 로고">

키보드 조작 가능하도록 제작

마우스 없이도 작동 가능해야 함
예시: <button onclick="goLink()">자세히 보기</button>

ARIA 속성으로 접근성 강화
예시: <div role="dialog" aria-label="로그인창">...</div>

색상 대비 유지

명도 대비 4.5:1 이상
도구: https://webaim.org/resources/contrastchecker/

[레이아웃 구성 요약]

Flex

가로/세로 정렬에 유용, 1차원
예시: display: flex;

Grid

복잡한 카드형/갤러리 구조, 2차원
예시: display: grid;

Float

예전 방식, 이미지 감쌀 때 일부 사용
예시: float: left;

[반응형 디자인 요약]

REM 단위 사용
예시:
html { font-size: 16px; }
body { font-size: 1rem; }

유연한 넓이 구성
예시:
.wrapper { width: 100%; max-width: 1200px; margin: 0 auto; }

미디어쿼리 사용 예
@media (min-width: 768px) { body { font-size: 1.1rem; } }

[실무 팁 정리]

rem, % 단위 적극 사용 → 반응형 대응

aria-*와 role 속성 → 스크린리더 호환

모바일 퍼스트 접근 권장

충분한 글자 크기와 색상 대비 확보

CSS는 컴포넌트 단위로 모듈화해서 관리