제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 초보 웹 개발자, HTML/CSS 기초 학습자
• 난이도: 초보자용 (기초 레이아웃 구현 방법 설명)

핵심 요약

• CSS float, flex-box, table 속성을 사용해 블록 요소를 수평 정렬 가능
• flex-box는 반응형 웹(RWD) 개발에 최적화된 최신 표준 방법
• float 사용 시 clearing float 처리가 필수, table 속성은 구식으로 거의 사용되지 않음

섹션별 세부 요약

1. CSS float 속성 사용

• .div-1, .div-2 { float: left }로 요소를 왼쪽 정렬
• .div-1 { width: 40% }와 .div-2 { width: 60% }로 너비 조정
• 문제점: 블록 요소가 정렬된 후 부모 컨테이너의 높이가 사라지는 float 캡처(float capture) 발생 가능

2. CSS flex-box 사용

• .parent-div { display: flex; flex-direction: row }로 부모 요소를 flex 컨테이너로 설정
• .div-1 { flex-basis: 40% }와 .div-2 { flex-basis: 60% }로 비율 조정
• 장점: 자동 레이아웃 정렬, 반응형 디자인 가능, CSS Flexbox 표준에 기반

3. CSS table 속성 사용

• .table-section { display: table }로 테이블 구조 설정
• .table-row { display: table-row }와 .table-cell { display: table-cell }로 셀 정렬
• 문제점: 구식 접근법으로 현대 웹 개발에서는 거의 사용되지 않음

결론

• flex-box를 사용하는 것이 반응형 웹(RWD) 개발에 적합하며, float은 구식 방법, table은 거의 사용하지 않음
• CSS Flexbox의 flex-direction, flex-basis 등 핵심 속성은 반드시 숙지해야 함