sliver__

안녕하세요 여러분! 이번 포스팅에서는 Flexbox를 실습하며 기본 개념을 익히는 방법을 알아보겠습니다. 이미 강의에서 여러 차례 언급했던 Flexbox를 드디어 코드에 적용해볼 차례인데요, 복잡한 프로젝트 환경이 아니라 간단한 형태로 따로 떼어놓고 실습해볼 거예요.Flex 컨테이너와 아이템 이해하기1. Flexbox 적용컨테이너 설정이 한 줄만으로도 자식 요소들이 가로로 나란히 배치됩니다..container { display: flex;}용어 정리Flex Container: display: flex를 준 부모 요소Flex Items: 컨테이너 내부의 자식 요소들2. 기본 레이아웃각 아이템은 자신의 콘텐츠 크기만큼 너비를 차지높이는 기본적으로 컨테이너 내 가장 큰 아이템 기준(Stretch)컨테이너 배..

웹 페이지를 만들다 보면 전체 콘텐츠를 브라우저 창 중앙에 고정하고 싶을 때가 있습니다. 예전에는 복잡한 방법을 써야 할 것 같았지만, 사실 단 두 줄의 CSS만으로도 손쉽게 구현할 수 있어요!1. 콘텐츠를 감싸는 컨테이너 만들기먼저, 페이지 전체를 감쌀 컨테이너 요소를 추가합니다. 보통 의미론적 태그가 필요 없으니 로 충분합니다. … … … Tip: 이 컨테이너는 바로 안쪽에 위치시키고, 닫는 는 푸터 뒤에 둡니다.2. 컨테이너에 너비 지정하기화면이 아무리 커져도 일정 너비만큼만 보여지게 하려면, 컨테이너에 고정 너비를 줍니다. 예를 들어 800px로 해보겠습니다..container { width: 800px; /* 이후 마진 설정으로 가운데 정렬 */}자식 요소들은 ..