Day 27 of Coding 요약

카테고리

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

서브카테고리

웹 개발

대상자

초보 웹 개발자 및 프론트엔드 학습자

핵심 요약

• box-shadow를 사용해 요소에 깊이감을 추가하는 방법 학습
• Flexbox를 통해 요소의 수직/수평 정렬 구현
• border-radius로 원형/둥근 모서리 디자인 적용

섹션별 세부 요약

1. `box-shadow`의 활용

• 텍스트나 요소에 그림자 효과를 추가하여 3D 효과 생성
• box-shadow: 0 4px 8px rgba(0,0,0,0.2);와 같은 코드 사용 가능
• 레이어드 디자인에서 텍스트 강조에 효과적

2. Flexbox 기반 정렬

• display: flex;로 컨테이너 설정 후 justify-content와 align-items 속성 사용
• 수평 정렬(justify-content: center) 및 수직 정렬(align-items: center) 가능
• 반응형 디자인에서 요소 배치 유연성 제공

3. `border-radius`의 적용

• border-radius: 50%;로 원형 요소 생성 가능
• border-radius: 10px;처럼 모서리 둥글기 조절 가능
• 디자인의 현대적 스타일링에 활용

결론

• box-shadow, Flexbox, border-radius는 기본적인 UI 디자인 기술로, 실제로 사용해보며 실습이 필요
• Flexbox를 활용한 정렬은 반응형 레이아웃 구현에 핵심
• border-radius는 모던한 디자인을 위한 필수 기술로, 다양한 UI 요소에 적용 가능