검색:100
소개
우리의 목표는 무엇입니까?
의미론적 HTML5를 사용하여 구조 구축
최신 CSS를 사용하여 스타일 추가
- CSS 재설정
- Flexbox를 이용한 카드 레이아웃 디자인
- 카드 이미지 스타일링
- 카드 콘텐츠 스타일링
- 카드 버튼 스타일링
- 호버 전환 추가
- CSS 변수 사용하기
결론
웹 개발자로서 우리는 카드 구성 요소를 만들어야 하는 경우가 종종 있습니다. 제품/프로젝트 쇼케이스, 사용자 프로필, 블로그 게시물 등 어디에나 카드가 있습니다.
과거에는 반응형 레이아웃을 만드는 것이 어려웠습니다. 현대 CSS 기술, 특히 CSS Flexbox의 출현으로 인해 이러한 디자인을 만드는 것이 훨씬 더 간단하고 직관적이 되었습니다.
Flexbox는 반응형 레이아웃을 만드는 과정을 단순화합니다. 복잡한 미디어 쿼리를 사용하지 않고도 컨테이너의 항목을 쉽게 배열, 정렬 및 간격을 둘 수 있습니다. 즉, 정확한 중단점을 지정하지 않고도 다양한 화면 크기와 방향에 맞게 아름답게 조정되는 레이아웃을 구축할 수 있습니다.
목표는 CSS Flexbox를 사용하여 중단점에 의존하지 않고 동일한 높이의 반응형 카드를 만드는 것입니다. 우리는 콘텐츠 길이에 관계없이 각 카드가 동일한 높이를 유지하여 다양한 화면 크기에 원활하게 적응할 수 있도록 할 것입니다.
레이아웃의 주요 CSS 속성:
이제 카드를 만들어 CSS Flexbox의 마법을 살펴보겠습니다.
Title one
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.
Title two
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.
Title three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!
/* Basic CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Ensure that our layout is centred horizontally and vertically on the page */
body {
display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */
justify-content: center;
align-items: center;
min-height: 100vh;
overflow-x: hidden; /* Prevent horizontal scrolling */
}
/* Cards */
.card-container {
display: flex; /* using CSS flexbox to display each card at the centre */
justify-content: center;
align-items: stretch; /* use stretch for equal height of all cards */
gap: 1.5625rem; /* add space between each card */
flex-wrap: wrap;
padding: 1rem;
max-width: 100%; /* Prevent container from exceeding viewport width */
}
.card {
display: flex;
flex-direction: column;
width: 20rem;
background-color: #fff;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
text-align: center;
text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */
overflow: hidden;
}
.card-image {
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 0.85rem;
}
.card-title {
font-size: 1.25rem;
padding: 1rem;
color: #3ca69f;
}
.card-description {
flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */
padding: 0 1rem 1rem;
font-size: 0.975rem;
line-height: 1.5;
}
/* Cards button */
.card-button {
align-self: center; /* placing the button at the center */
margin: 1rem 0 3rem;
padding: 0.625rem 1rem;
font-size: 1rem;
color: #ffffff;
background-color: #3ca69f;
border: none;
border-radius: 0.3125rem;
cursor: pointer;
}
.card {
transition: 0.5s ease all;
}
.card-button {
transition: 0.5s ease all;
}
/* cards hover effect */
.card:hover {
background-color: #276662;
color: #ffffff;
}
.card:hover > .card-button {
background-color: #ffffff;
color: #276662;
font-weight: 700;
}
.card:hover > .card-title {
color: #ffffff;
}
/* Declare variables */
:root {
--primary-color: #3ca69f;
--secondary-color: #276662;
--text-color: #ffffff;
--shadow-color: rgba(0, 0, 0, 0.4);
--border-radius: 0.3125rem;
--spacing: 1rem;
--transition-duration: 0.5s;
}
정상으로 가다
부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.
Copyright© 2022 湘ICP备2022001581号-3
