이 튜토리얼에서는 CSS와 HTML에서 플렉스박스를 사용하여 매력적인 갤러리 레이아웃을 만드는 방법을 배웁니다. 플렉스박스 모델은 웹사이트의 요소를 정렬하는 데 유연한 옵션을 제공하며, 특히 우아하고 반응이 빠른 프레젠테이션이 중요한 갤러리와 같은 레이아웃에 적합합니다. HTML 코드의 구조와 해당 CSS 스타일에 대해 논의하고 단계별로 구축해 보겠습니다.
주요 요점
- 이 튜토리얼에서는 컨테이너 요소의 사용과 디스플레이: 플렉스, 위치: 절대, 맞춤-내용: 공백 사이와 같은 CSS 속성의 적용을 포함하여 Flexbox를 사용하여 이미지 기반 레이아웃을 만드는 방법을 배웁니다.
단계별 가이드
1단계: HTML 코드의 기본 구조 만들기
HTML 문서의 기본 구조부터 시작하세요. main이라는 컨테이너 div를 만들고 모든 이미지 태그 요소(IMG)를 포함하는 이미지 클래스가 있는 다른 div를 추가합니다. 이러한 이미지는 공개 도메인 이미지가 있는 웹사이트에서 가져올 수 있습니다. 레이아웃은 세 개의 이미지에 초점을 맞추므로 네 번째 이미지는 표시되지 않습니다.
2단계: 기본 컨테이너에 대한 CSS 정의하기
기본 컨테이너의 스타일링을 위해 너비를 100%로 설정하여 창 너비에 맞게 조정합니다. 높이를 140픽셀로 설정하고 이미지와 화살표에 사용할 절대 위치가 올바른 방향을 잡을 수 있도록 위치가 상대 위치인지 확인합니다.
3단계: 이미지의 컨테이너 스타일 지정하기
이미지(.images)의 컨테이너를 위치: 절대값으로 설정하여 화살표의 컨테이너 위에 뜨도록 합니다. 너비와 높이를 100%로 설정하여 기본 컨테이너에 완전히 배치되도록 합니다. 또한 플렉스박스 속성을 사용합니다.
4단계: 이미지 레이아웃에 플렉스박스 속성 적용하기
.images 클래스의 경우 display: flex를 설정하고 콘텐츠를 flex-direction: row로 일렬로 정렬합니다. 이미지 사이에 4픽셀의 간격을 추가하면 이미지 사이에 더 많은 공간이 확보되어 레이아웃이 느슨해집니다.
5단계: 이미지 스타일 정의하기
플렉스박스 속성 flex-basis를 사용하여 갤러리의 이미지(img)를 너비 240픽셀, 높이 140픽셀로 설정해야 합니다. 이미지의 크기가 변경되지 않고 항상 선택한 치수를 유지하도록 플렉스-그로우 및 플렉스-축소를 0으로 설정할 수도 있습니다.
6단계: 화살표 컨테이너 만들기
이제 탐색 화살표를 위한 컨테이너를 만듭니다. 이 컨테이너는 항상 이미지 위에 위치하도록 위치: 절대, 높이 및 너비 100%로 설정해야 합니다. 표시: 플렉스를 사용하여 화살표를 가로로 정렬합니다.
7단계: 화살표 스타일 지정
한 화살표가 왼쪽에 있고 다른 화살표가 오른쪽에 있도록 콘텐츠 맞춤 속성을 공백 사이로 설정합니다. 화살표의 경우 유니코드 문자를 사용하여 화살표를 표시할 수 있습니다. 텍스트 색상을 흰색으로 설정하고 화살표의 배경이 투명한지 확인합니다.
8단계: 호버 효과 삽입하기
호버 효과를 추가하려면 화살표 위로 마우스를 움직일 때 화살표의 배경색을 변경할 수 있습니다. 약간 투명한 흰색으로 설정하여 배경이 밝아지고 대화형 느낌을 주도록 합니다.
9단계: 레이아웃 테스트 및 사용자 지정하기
이제 전체 레이아웃을 테스트하고 필요한 사항을 조정하는 것이 중요합니다. 이미지 사이의 간격, 컨테이너 크기 또는 일반적인 색 구성표는 웹사이트의 요구 사항에 따라 쉽게 변경할 수 있습니다.
요약
이 튜토리얼에서는 Flexbox로 반응형 이미지 갤러리를 만드는 방법을 배웠습니다. 기본 구조부터 시각 효과까지 단계를 거쳤습니다. Flexbox를 사용하면 요소를 유연하게 배열할 수 있으므로 특히 매력적인 디자인을 만들 수 있습니다.
자주 묻는 질문
이미지의 크기를 조정하려면 어떻게 하나요? 이미지의 플렉스 기준 값을 조정할 수 있습니다.
플렉스 성장과 플렉스 축소의 차이점은 무엇인가요?플렉스 성장은 요소의 성장 여부를 결정하고, 플렉스 축소는 요소의 축소 여부와 방법을 정의합니다.
호버 효과를 조정하려면 어떻게 해야 하나요? 호버 상태의 배경색과 불투명도를 CSS에서 변경합니다.
