패스트캠퍼스 환급챌린지 36일차 미션 (3월 7일) : 인터랙티브 웹 강의 후기
서론
CSS의 기초를 다진다는 것은 웹 개발의 핵심 기술을 익히는 과정이라 할 수 있다. 특히, CSS에서 플렉스박스(Flexbox)는 현대 웹 디자인을 이해하고 구현하는 데 있어 필수적인 요소 중 하나다. 오늘은 이 플렉스 컨테이너의 기본 개념과 속성을 다시 한 번 살펴보는 시간을 가졌다. 플렉스 컨테이너는 웹 페이지의 레이아웃을 효율적으로 조정할 수 있게 해주며, 내일은 이어서 플렉스 아이템들의 속성에 대해 공부할 예정이다.
본론
환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.
- 첫 번째 강의: 플렉스(정렬) Container (1)
- 두 번째 강의: 플렉스(정렬) Container (2)
첫 번째 강의: 플렉스(정렬) Container (1)
첫 번째 강의에서는 플렉스 컨테이너의 기본 개념과 주요 속성에 대해 배웠다. 플렉스 컨테이너를 사용함으로써, 자식 요소들을 가로나 세로로 정렬할 수 있는 유연성을 제공한다는 것을 이해했다. 또한, display: flex; 속성을 통해 어떻게 컨테이너를 선언하는지, flex-direction 속성을 사용하여 아이템들을 행(row)이나 열(column)로 어떻게 배치하는지 배웠다.
예제 코드:
이 코드는 플렉스 컨테이너를 생성하고, 자식 요소들이 가로 방향으로 정렬되도록 설정하는 기본 구조를 보여준다.
플렉스(정렬) Container (2)
두 번째 강의에서는 플렉스 아이템들의 정렬을 더 세밀하게 조정할 수 있는 justify-content와 align-items 속성에 대해 배웠다. 이 속성들을 사용하면, 플렉스 아이템들을 주 축(main axis)과 교차 축(cross axis)을 기준으로 어떻게 정렬할지 조절할 수 있다. 특히, 다양한 값들을 통해 공간 분배와 정렬을 어떻게 조절하는지 실습했다.
예제 코드:
이 코드는 플렉스 아이템들 사이의 공간을 균등하게 배분하고, 세로 축에서 중앙으로 정렬하는 방법을 보여준다.
결론
플렉스 컨테이너와 플렉스 아이템의 속성을 이해하고 활용하는 것은 웹 페이지의 레이아웃을 구성하는 데 있어 매우 중요하다. 이 두 강의를 통해 플렉스박스 모델의 기본적인 사용법을 다시 한 번 상기할 수 있었다. 앞으로 이 지식을 바탕으로 더 복잡한 레이아웃을 설계하고 구현하는 데 있어 유연하게 대응할 수 있을 것으로 기대한다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.