HTML과 CSS만 사용해서도 화면 크기에 따라 레이아웃이 자동으로 조정되는 반응형 '팀 소개(Meet the Team)' 페이지를 손쉽게 만들 수 있습니다. 이 글에서는 팀원 카드 3개를 가로로 배치했다가, 화면이 좁아지면 세로로 정렬되도록 구현하는 완전한 예제 코드를 소개합니다.
전체 코드 예제
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
box-sizing: border-box;
}
body{
font-family: monospace,serif,sans-serif;
}
img{
height: 300px;
width: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
.teamColumn {
float: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
}
@media screen and (max-width: 650px) {
.teamColumn {
width: 100%;
display: block;
}
}
.teamCard {
background-color: rgb(162, 162, 255);
text-align: center;
font-size: 20px;
}
.personContainer {
padding: 0 16px;
}
.personContainer::after, .teamContainer::after {
content: "";
clear: both;
display: table;
}
.Designation {
color: rgb(15, 0, 100);
font-weight: bolder;
font-size: 40px;
}
.contact {
border: none;
outline: 0;
display: inline-block;
padding: 12px;
color: white;
font-weight: bolder;
background-color: rgb(78, 0, 102);
text-align: center;
cursor: pointer;
width: 100%;
}
.contact:hover {
background-color: #555;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Responsive Meet the team example </h1>
<div class="teamContainer">
<div class="teamColumn">
<div class="teamCard">
<img src="https://images.pexels.com/photos/839011/pexels-photo-839011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" >
<div class="personContainer">
<h2>Jane Doe</h2>
<p class="Designation">CTO</p>
<p><button class="contact">Contact</button></p>
</div>
</div>
</div>
<div class="teamColumn">
<div class="teamCard">
<img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<div class="personContainer">
<h2>Mike Ross</h2>
<p class="Designation">Front End Developer</p>
<p><button class="contact">Contact</button></p>
</div>
</div>
</div>
<div class="teamColumn">
<div class="teamCard">
<img src="https://images.pexels.com/photos/736716/pexels-photo-736716.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<div class="personContainer">
<h2>John Doe</h2>
<p class="Designation">FullStack Developer</p>
<p><button class="contact">Contact</button></p>
</div>
</div>
</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
핵심 코드 설명
1. box-sizing: border-box
모든 요소에 box-sizing: border-box를 적용하면 패딩과 테두리가 요소의 전체 너비에 포함되어 계산됩니다. 이렇게 하면 패딩을 추가해도 레이아웃이 의도치 않게 밀려나는 문제를 예방할 수 있습니다.
2. float를 활용한 3열 카드 배치
.teamColumn 클래스에 float: left와 width: 33.3%를 지정하면 세 개의 카드가 한 줄에 나란히 배치됩니다. 각 컬럼에는 padding: 0 8px를 주어 카드 사이에 적절한 간격을 확보합니다.
3. 미디어 쿼리로 반응형 구현
반응형의 핵심은 바로 미디어 쿼리입니다.
@media screen and (max-width: 650px) {
.teamColumn {
width: 100%;
display: block;
}
}화면 너비가 650px 이하(주로 모바일 환경)로 줄어들면, 카드의 너비가 100%로 변경되면서 세로로 차곡차곡 쌓이게 됩니다. 덕분에 데스크톱에서는 3열, 모바일에서는 1열 레이아웃이 자동으로 적용됩니다.
4. clearfix로 float 초기화
::after 가상 요소에 clear: both를 적용하면, 자식 요소들이 float 되면서 발생하는 부모 컨테이너의 높이 무너짐(collapse) 현상을 방지할 수 있습니다.
5. Contact 버튼과 호버 효과
.contact 버튼은 카드 하단 전체 폭을 차지하며, :hover 시 배경색이 회색(#555)으로 바뀌어 사용자에게 시각적인 피드백을 제공합니다.
참고: Flexbox나 Grid를 활용한 대안
float 방식은 오래된 브라우저와의 호환성이 좋다는 장점이 있지만, 최신 프로젝트에서는 Flexbox나 CSS Grid를 사용하는 것이 유지보수 측면에서 더 권장됩니다. 예를 들어 .teamContainer { display: flex; flex-wrap: wrap; }와 .teamColumn { flex: 1 1 300px; }처럼 작성하면 float 없이도 동일한 반응형 레이아웃을 더 간결하게 구현할 수 있습니다.