웹 페이지에서 화면 크기에 따라 레이아웃이 자동으로 조정되는 반응형(responsive) 연락처 섹션은 HTML과 CSS만으로도 손쉽게 만들 수 있습니다. 핵심은 CSS 미디어 쿼리(media query)를 활용해 화면 너비에 따라 배치를 전환하는 것입니다.
핵심 구현 포인트
- 미디어 쿼리 –
@media screen and (max-width: 600px)규칙으로 화면 너비가 600px 이하일 때 두 개의 컬럼이 세로로 쌓이도록 처리합니다. - box-sizing: border-box – 패딩과 테두리까지 포함해 요소의 실제 너비를 계산하므로 레이아웃이 깨지지 않습니다.
- float + clearfix – 이미지 영역과 폼 영역을 나란히 배치하고,
:after가상 요소로 float를 해제해 부모 요소의 높이가 무너지는 현상을 방지합니다. - resize: vertical – 메시지 입력란(textarea)의 높이만 사용자가 자유롭게 조절할 수 있습니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
input[type="text"], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
font-size: 18px;
}
input[type="submit"] {
background-color: rgb(139, 76, 175);
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
font-size: 18px;
}
label {
font-weight: bold;
}
.contactImg {
width: 300px;
height: 300px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.contactForm {
margin: auto;
border-radius: 5px;
background-color: #d3d3d3;
padding: 10px;
max-width: 1000px;
}
.contactCol {
float: left;
width: 35%;
margin-top: 6px;
padding: 20px;
}
.contactSection:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.contactCol, input[type="submit"] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h1 style="text-align: center;">Responsive Contact Section Example</h1>
<div class="contactForm">
<div style="text-align:center">
<h2>Contact Us</h2>
</div>
<div class="contactSection">
<div class="contactCol">
<img class="contactImg" src="https://i.picsum.photos/id/8/400/400.jpg"/>
</div>
<div class="contactCol">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name.."/>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name.."/>
<label for="country">Email Id</label>
<input type="text" id="country" name="country" placeholder="Your email id.."/>
<label for="subject">Message</label>
<textarea id="subject" name="subject" placeholder="Leave your message" style="height:170px"></textarea>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다. 좌측에는 대표 이미지가, 우측에는 이름·이메일·메시지를 입력하는 문의 폼이 배치됩니다.
브라우저 창 너비를 600px 이하로 줄이면 이미지와 폼이 위아래로 정렬되고 제출 버튼도 전체 너비를 차지하기 때문에, 모바일 환경에서도 불편함 없이 문의 폼을 사용할 수 있습니다. 이처럼 미디어 쿼리 하나만 추가해도 데스크톱과 모바일 양쪽에 최적화된 연락처 섹션을 완성할 수 있습니다.