2285
No
1. HTML 기본 구조
- <!DOCTYPE html>: HTML 문서가 HTML5 표준을 따름을 명시합니다.
- <html lang="ko">: 문서의 언어를 한국어(ko)로 설정합니다.
- <head>: 문서의 메타데이터와 스타일링, 폰트 로드를 위한 영역입니다.
- <body>: 웹 페이지의 실제 콘텐츠가 들어가는 부분입니다.
2. Head 섹션
- <meta charset="UTF-8" />: 문서의 인코딩을 UTF-8로 설정하여 한글을 비롯한 다양한 문자를 지원합니다.
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />: IE 브라우저 호환성을 위해 설정합니다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />: 반응형 웹 디자인을 위해 뷰포트를 설정합니다.
- <script src="https://cdn.tailwindcss.com"></script>: Tailwind CSS를 외부 CDN에서 불러옵니다.
- Google Fonts 관련 설정: Nanum Gothic 폰트를 사용하기 위해 구글 폰트에서 폰트를 불러오고, 전체 페이지의 폰트를 Nanum Gothic으로 설정합니다.
3. Body 섹션
- 전체 컨테이너 (<div class="flex items-center justify-center min-h-screen bg-cyan-50">)
- 페이지의 모든 콘텐츠를 포함하는 최상위 컨테이너입니다. flex를 사용해 자식 요소들을 중앙에 정렬하고, 배경색을 bg-cyan-50으로 설정했습니다.
- 카드 컨테이너 (<div class="bg-white p-6 m-3 space-y-10 shadow-2xl rounded-3xl md:p-40">)
- 메인 콘텐츠를 감싸는 카드 형태의 컨테이너입니다. 흰색 배경(bg-white), 여백(p-6 m-3), 그림자(shadow-2xl), 모서리 둥글기(rounded-3xl) 등 스타일이 적용되었습니다.
<div class="flex items-center justify-center min-h-screen bg-cyan-50">
<div class="bg-white p-6 m-3 space-y-10 shadow-2xl rounded-3xl md:p-40">
...
</div>
</div>
- flex: 플렉스 박스를 적용하여 자식 요소들을 배치합니다.
- items-center: 플렉스 박스의 자식 요소들을 수직으로 가운데 정렬합니다.
- justify-center: 플렉스 박스의 자식 요소들을 수평으로 가운데 정렬합니다.
- min-h-screen: 최소 높이를 화면 전체 높이로 설정합니다.
- bg-cyan-50: 배경색을 cyan-50로 설정합니다. (Tailwind에서 제공하는 색상 팔레트 중 하나입니다)
- bg-white: 배경색을 흰색으로 설정합니다.
- p-6: 내부 패딩을 1.5rem(24px)로 설정합니다.
- m-3: 외부 마진을 0.75rem(12px)로 설정합니다.
- space-y-10: 수직 방향으로 2개의 자식 요소 간의 간격을 2.5rem(40px)로 설정합니다.
- shadow-2xl: 그림자 효과를 크게 적용합니다.
- rounded-3xl: 모서리를 크게 둥글게 만듭니다.
- md:p-40: 중간 크기 이상의 화면에서 패딩을 10rem(160px)로 설정합니다
4. 메뉴 섹션
- 메뉴 컨테이너 (<div class="flex flex-col items-center ...">)
- 상단에 네 개의 메뉴 항목이 포함되어 있으며, Flexbox를 사용하여 메뉴를 가로 또는 세로로 정렬합니다. group 클래스를 이용해 메뉴 항목에 호버 효과를 추가했습니다.
<div class="flex flex-col items-center justify-center space-y-3 md:flex-row md:space-y-0 md:space-x-8 md:mb-24 md:justify-end"> ... </div>
- flex-col: 플렉스 박스를 열 방향으로 배치합니다.
- space-y-3: 자식 요소 사이에 0.75rem(12px) 간격을 추가합니다.
- md:flex-row: 중간 크기 이상의 화면에서는 행 방향으로 배치합니다.
- md:space-y-0: 중간 크기 이상의 화면에서는 수직 간격을 제거합니다.
- md:space-x-8: 중간 크기 이상의 화면에서는 수평 간격을 2rem(32px)로 설정합니다.
- md:mb-24: 중간 크기 이상의 화면에서는 하단 마진을 6rem(96px)로 설정합니다.
- md:justify-end: 중간 크기 이상의 화면에서는 자식 요소를 오른쪽 끝으로 정렬합니다
5. 검색 및 업로드 섹션
- 검색 입력 (<input type="text" class="ml-6 border-none md:w-80 placeholder:font-thin focus:outline-none" ... />)
- 사용자로부터 검색어를 입력받는 필드입니다. 입력 필드는 border-none으로 테두리를 없애고, 화면 크기에 따라 폭이 조정되도록 설정했습니다.
- 검색 버튼 (돋보기 아이콘)
- 검색 버튼은 SVG 아이콘으로 구현되었습니다. 호버 시 크기가 확대되는 효과가 적용되어 있습니다.
- 업로드 버튼 (<button class="py-3 px-14 text-lg font-normal ...">업로드</button>)
- 사용자가 이미지를 업로드할 수 있는 버튼입니다. 검은 배경(bg-black)에 흰색 텍스트(text-white)를 사용하여 강조하고, 호버 시 색상이 반전되도록 설정했습니다.
- justify-between: 자식 요소들을 좌우로 끝에 배치합니다.
- space-y-5: 자식 요소들 사이에 1.25rem(20px) 간격을 추가합니다.
- md:flex-row: 중간 크기 이상의 화면에서는 행 방향으로 배치합니다.
- md:space-y-0: 중간 크기 이상의 화면에서는 수직 간격을 제거합니다
6. 갤러리 섹션
- 갤러리 컨테이너 (<div class="grid gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">)
- 이미지를 그리드 레이아웃으로 배치하기 위한 컨테이너입니다. 화면 크기에 따라 3, 4, 5개의 열로 조정됩니다.
- 이미지 카드 (<div class="relative group"> 내부)
- 각 이미지와 관련된 정보를 포함하는 카드입니다. 이미지를 감싸는 relative 클래스의 div는 자식 요소들에 대해 상대적 위치를 설정할 수 있게 합니다.
- 이미지 호버 효과
- 각 이미지는 호버 시 opacity-0에서 opacity-100으로 변경되며, 배경이 어두워지고 텍스트와 아이콘이 나타납니다.
- 텍스트와 북마크 아이콘
- 이미지 아래에는 제목과 좋아요 수, 공유 횟수 등의 정보가 표시됩니다. 또한, 북마크 아이콘이 있어 사용자가 이미지를 저장할 수 있는 기능을 시각적으로 제공합니다.
<div class="grid gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"> ... </div>
<div class="relative group">
<img src="images/image1.jpg" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">추상화</p>
<p class="text-xs">좋아요 245개 - 공유 35회</p>
</div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="북마크" />
</div>
</div>
</div>
</div>
- grid: 그리드 레이아웃을 적용합니다.
- gap-4: 그리드 항목들 사이에 1rem(16px) 간격을 설정합니다.
- md:grid-cols-3: 중간 크기 이상의 화면에서는 그리드 항목을 3열로 배치합니다.
- lg:grid-cols-4: 큰 화면에서는 그리드 항목을 4열로 배치합니다.
- xl:grid-cols-5: 매우 큰 화면에서는 그리드 항목을 5열로 배치합니다
전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<style>*{ font-family: "Nanum Gothic", sans-serif; font-weight: 700;}</style>
<title>이미지 갤러리</title>
</head>
<body>
<!-- 전체 컨테이너 -->
<div class="flex items-center justify-center min-h-screen bg-cyan-50">
<!-- 카드 컨테이너 -->
<div class="bg-white p-6 m-3 space-y-10 shadow-2xl rounded-3xl md:p-40">
<!-- 메뉴 컨테이너 -->
<div
class="flex flex-col items-center justify-center space-y-3 md:flex-row md:space-y-0 md:space-x-8 md:mb-24 md:justify-end"
>
<!-- 메뉴 항목 -->
<div class="group">
<a href="#">벡터</a>
<div
class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
></div>
</div>
<div class="group">
<a href="#">일러스트레이션</a>
<div
class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
></div>
</div>
<div class="group">
<a href="#">이미지</a>
<div
class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
></div>
</div>
<div class="group">
<a href="#">아이콘</a>
<div
class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
></div>
</div>
</div>
<!-- 검색 컨테이너 -->
<div
class="flex flex-col justify-between space-y-5 md:flex-row md:space-y-0"
>
<!-- 입력 및 SVG 컨테이너 -->
<div class="flex justify-between border-b">
<input
type="text"
class="ml-6 border-none md:w-80 placeholder:font-thin focus:outline-none"
placeholder="검색"
/>
<button>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 text-gray-300 duration-200 hover:scale-110"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="10" cy="10" r="7" />
<line x1="21" y1="21" x2="15" y2="15" />
</svg>
</button>
</div>
<!-- 업로드 버튼 -->
<button
class="py-3 px-14 text-lg font-normal text-white bg-black border border-black rounded-md shadow-2xl duration-200 hover:bg-white hover:text-black"
>
업로드
</button>
</div>
<!-- 갤러리 컨테이너 -->
<div class="grid gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
<!-- 이미지 1 -->
<div class="relative group">
<img src="https://picsum.photos/336?random=1" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">추상화</p>
<p class="text-xs">좋아요 245개 - 공유 35회</p>
</div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="북마크" />
</div>
</div>
</div>
</div>
<!-- 이미지 2 -->
<div class="relative group">
<img src="https://picsum.photos/336?random=2" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">추상화</p>
<p class="text-xs">좋아요 245개 - 공유 35회</p>
</div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="북마크" />
</div>
</div>
</div>
</div>
<!-- 이미지 3 -->
<div class="relative group">
<img src="https://picsum.photos/336?random=3" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">추상화</p>
<p class="text-xs">좋아요 245개 - 공유 35회</p>
</div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="북마크" />
</div>
</div>
</div>
</div>
<!-- 이미지 4 -->
<div class="relative group">
<img src="https://picsum.photos/336?random=4" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">추상화</p>
<p class="text-xs">좋아요 245개 - 공유 35회</p>
</div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="북마크" />
</div>
</div>
</div>
</div>
<!-- 이미지 5 -->
<div class="relative group">
<img src="https://picsum.photos/336?random=5" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">추상화</p>
<p class="text-xs">좋아요 245개 - 공유 35회</p>
</div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="북마크" />
</div>
</div>
</div>
</div>
<!-- 이미지 6 -->
<div class="relative group">
<img src="https://picsum.photos/336?random=6" alt="" class="w-72" />
<div
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
>
<div class="flex justify-between w-full">
<div class="font-normal">
<p class="text-sm">추상화</p>
<p class="text-xs">좋아요 245개 - 공유 35회</p>
</div>
<div class="flex items-center">
<img src="images/bookmark.svg" alt="북마크" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Grid
1. CSS Grid의 기본 개념
- Grid Container: display: grid; 속성을 사용하여 Grid 레이아웃이 적용된 컨테이너입니다. 이 컨테이너는 자식 요소들을 행과 열로 나눕니다.
- Grid Items: Grid Container 내부의 자식 요소들이 Grid Item이 됩니다. 이들은 지정된 행과 열에 배치됩니다.
- Grid Lines: 그리드를 나누는 가상의 선입니다. 이 선들 사이에 Grid Item이 위치하게 됩니다.
- Grid Tracks: Grid Line 사이의 간격을 의미하며, 이는 행(가로) 또는 열(세로)로 구성됩니다.
- Grid Cell: Grid Line에 의해 정의된 하나의 셀입니다.
2. Tailwind CSS에서의 Grid 사용법
Tailwind CSS에서는 Grid 시스템을 구현할 때 여러 유틸리티 클래스를 제공합니다. 주요 클래스와 그 기능을 설명하겠습니다.
Grid Container 설정
- grid: 요소를 Grid Container로 설정합니다. 이 클래스가 적용된 요소는 Grid 레이아웃을 가지게 됩니다.
<div class="grid">...</div>
Grid 열의 수 설정
- grid-cols-{n}: Grid 레이아웃에서 열(column)의 수를 설정합니다. {n}은 열의 개수를 나타냅니다.
<div class="grid grid-cols-3">...</div>
열 간격 설정
- gap-{n}: Grid 항목 간의 간격을 설정합니다. {n}은 Tailwind의 spacing scale을 따릅니다
<div class="grid grid-cols-3 gap-4">...</div>
- 이 예시에서는 열 간격과 행 간격이 모두 4 (1rem)로 설정됩니다.
반응형 디자인
- md:grid-cols-{n}, lg:grid-cols-{n}: 화면 크기에 따라 열의 수를 다르게 설정할 수 있습니다. 예를 들어, 모바일에서는 2열, 태블릿에서는 3열, 데스크탑에서는 4열로 구성하는 것이 가능합니다.
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">...</div>
- 위 예시에서는 기본적으로 2개의 열로 구성되지만, 화면이 커지면 3개 또는 4개의 열로 변경됩니다.
자동 행과 열 크기 조정
- auto-cols-{value}와 auto-rows-{value}: 열과 행의 크기를 자동으로 조정할 수 있습니다.
<div class="grid grid-cols-3 auto-rows-min">...</div>
- 이 코드는 3개의 열을 가지며, 행의 높이는 콘텐츠에 따라 최소 크기로 조정됩니다.
3. 실제 코드에서의 Grid 사용
주어진 코드에서 grid가 사용된 부분을 다시 살펴보겠습니다:
<div class="grid gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
이 코드는 다음과 같은 레이아웃을 만듭니다:
- 기본 설정: grid 클래스를 사용하여 Grid Container를 만듭니다.
- 열의 수 설정:
- 기본: 화면이 작은 경우 1열로 표시됩니다.
- 중간 크기 (md): 화면이 중간 크기 이상일 때는 grid-cols-3로 설정하여 3개의 열을 만듭니다.
- 큰 크기 (lg): 화면이 큰 경우 grid-cols-4로 설정하여 4개의 열로 구성됩니다.
- 매우 큰 크기 (xl): 화면이 매우 큰 경우 grid-cols-5로 5개의 열로 구성됩니다.
- 간격 설정: gap-4 클래스를 사용하여 Grid Item 간에 4 (1rem) 크기의 간격을 설정합니다.
4. Grid Item 배치
Grid Container 내부에 있는 요소들은 자동으로 Grid Item으로 배치되며, 설정된 행과 열에 따라 자동 정렬됩니다. Grid 시스템을 사용하면 복잡한 레이아웃도 손쉽게 구성할 수 있습니다.
5. Grid와 Flexbox의 비교
- Grid: 2차원 레이아웃 (행과 열) 구성이 가능하며, 복잡한 레이아웃에 적합합니다.
- Flexbox: 1차원 레이아웃 (행 또는 열) 구성이 주목적이며, 단순한 정렬과 배치에 적합합니다.
댓글 ( 0)
댓글 남기기