반응형
이번에는 고급 CSS 개념을 적용한 연습 예제를 만들어 보겠습니다. 이 예제에서는 CSS Grid와 Flexbox를 사용하여 반응형 레이아웃을 구성해보겠습니다. 또한, CSS 변수와 간단한 애니메이션을 추가하여 더욱 흥미로운 프로젝트를 만들어 보겠습니다.
프로젝트: 반응형 포트폴리오 카드 레이아웃
파일 구조
index.html: HTML 파일styles.css: CSS 파일- 이미지 파일을 프로젝트 디렉터리에 저장하세요. (예:
profile1.jpg,profile2.jpg,profile3.jpg)
HTML 코드
먼저 HTML 코드를 작성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
</header>
<main class="portfolio">
<div class="card">
<img src="profile1.jpg" alt="Profile 1" class="card__image">
<h2 class="card__title">John Doe</h2>
<p class="card__description">Web Developer</p>
</div>
<div class="card">
<img src="profile2.jpg" alt="Profile 2" class="card__image">
<h2 class="card__title">Jane Smith</h2>
<p class="card__description">Graphic Designer</p>
</div>
<div class="card">
<img src="profile3.jpg" alt="Profile 3" class="card__image">
<h2 class="card__title">Mike Johnson</h2>
<p class="card__description">UI/UX Designer</p>
</div>
</main>
<footer>
<p>© 2024 My Portfolio. All rights reserved.</p>
</footer>
</body>
</html>CSS 코드
이제 HTML 요소에 스타일을 적용할 CSS 코드를 작성합니다.
/* styles.css */
/* CSS 변수 정의 */
:root {
--main-bg-color: #f0f0f0;
--card-bg-color: #ffffff;
--primary-color: #4CAF50;
--secondary-color: #333333;
--text-color: #555555;
}
/* 기본 스타일 설정 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: var(--main-bg-color);
color: var(--text-color);
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
header {
background-color: var(--primary-color);
color: white;
padding: 20px;
width: 100%;
text-align: center;
}
header h1 {
margin: 0;
}
.portfolio {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
width: 100%;
max-width: 1200px;
}
.card {
background-color: var(--card-bg-color);
border: 1px solid var(--secondary-color);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: center;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card__image {
width: 100%;
height: auto;
border-bottom: 1px solid var(--secondary-color);
}
.card__title {
font-size: 24px;
margin: 15px 0 10px;
color: var(--primary-color);
}
.card__description {
font-size: 16px;
margin: 0 0 15px;
}
footer {
background-color: var(--primary-color);
color: white;
padding: 10px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
}설명
- CSS 변수 정의:
:root에서 CSS 변수를 정의하여 색상과 스타일을 쉽게 관리할 수 있도록 했습니다. - 기본 스타일 설정:
body태그에서 폰트, 배경색, 텍스트 색상 등을 설정하고, Flexbox를 사용하여 중앙 정렬했습니다. - 헤더 스타일: 헤더는 고정된 색상과 텍스트 중앙 정렬을 사용하여 스타일링했습니다.
- 그리드 레이아웃:
.portfolio클래스를 사용하여 그리드 레이아웃을 설정했습니다.repeat(auto-fit, minmax(300px, 1fr))를 사용하여 반응형 레이아웃을 구현했습니다. - 카드 스타일:
.card클래스는 배경색, 테두리, 그림자 등을 설정하여 카드 스타일을 만들고, 호버 효과를 추가하여 상호작용성을 높였습니다. - 이미지와 텍스트 스타일: 카드 안의 이미지와 텍스트는 각각
.card__image,.card__title,.card__description클래스를 사용하여 스타일링했습니다. - 푸터 스타일: 푸터는 고정된 색상과 텍스트 중앙 정렬을 사용하여 스타일링했습니다.
반응형
'Frontend > CSS' 카테고리의 다른 글
| [CSS] CSS 규칙 (0) | 2024.06.08 |
|---|---|
| [CSS] CSS 심화2 (0) | 2024.06.08 |
| [CSS] CSS 심화1 (0) | 2024.06.08 |
| [CSS] CSS 예제 (0) | 2024.06.08 |
| [CSS] CSS 기본 (1) | 2024.06.08 |