Day-29의 코딩 학습 요약

카테고리

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

서브카테고리

웹 개발

대상자

웹 개발 초보자 (기초 개념 이해 중심)

핵심 요약

• Flexbox는 요소 배치를 위한 CSS 레이아웃 방식으로, display: flex 속성으로 컨테이너에 적용
• align-items (전체 요소 정렬) vs align-self (개별 요소 정렬) 차이를 학습
• order 속성은 HTML 구조 변경 없이 시각적 순서 조정 가능 (현재 이해 부족)
• flex-direction, justify-content, align-content 등 주요 속성에 대한 기본 개념 파악

섹션별 세부 요약

1. Flexbox 기초 개념

• Flexbox는 요소의 유연한 정렬을 가능하게 하는 CSS 레이아웃 모델
• display: flex 속성은 컨테이너에 적용되어 자식 요소가 Flexbox 컨테이너로 인식
• align-items는 모든 자식 요소의 수직 정렬을, align-self는 특정 요소의 수직 정렬을 조정

2. 주요 속성 및 사용법

• flex-direction은 요소 배치 방향 (row, column 등)을 설정
• justify-content는 수평 정렬 (flex-start, center, flex-end 등)을 결정
• order 속성은 요소의 시각적 순서를 조정 (HTML 순서 변경 없이)

3. 향후 학습 계획

• flex-wrap과 align-content 속성에 대한 심화 학습 예정
• flex-flow는 flex-direction과 flex-wrap의 축약 형식
• flexboxfroggy 웹사이트를 통한 실습 강화

결론

• Flexbox는 웹 레이아웃 구현에 필수적인 개념으로, flexboxfroggy와 같은 실습 도구를 통해 이해도를 높이는 것이 중요
• order와 align-content는 추가 학습이 필요한 핵심 속성으로, 실습을 통해 익히는 것을 권장