CSS의 Flexbox와 미디어 쿼리를 활용하면 화면 크기에 따라 레이아웃이 자동으로 조정되는 반응형 인라인 폼을 손쉽게 만들 수 있습니다. 아래 예제에서는 데스크톱 환경에서는 라벨, 입력 필드, 버튼이 한 줄에 나란히 배치되고, 화면 너비가 800px 이하로 줄어들면 요소들이 세로 방향으로 재배치되도록 구현했습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
form {
display: flex;
flex-flow: row wrap;
align-items: center;
}
form label {
margin: 5px 10px 5px 0;
}
form input {
margin: 5px 10px 5px 0;
padding: 10px;
}
form button {
padding: 10px 20px;
font-size: 20px;
background-color: rgb(39, 22, 141);
border: 1px solid #ddd;
color: white;
cursor: pointer;
font-weight: bolder;
border-radius: 4px;
}
form button:hover {
background-color: rgb(113, 65, 225);
}
@media (max-width: 800px) {
form input {
margin: 10px 0;
}
form {
flex-direction: column;
align-items: stretch;
}
}
</style>
</head>
<body>
<h1>Responsive Inline Form Example</h1>
<form>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter email" name="email" />
<label for="pass">Password:</label>
<input type="password" id="pass" placeholder="Enter password" name="pass"/>
<button type="submit">Submit</button>
</form>
</body>
</html>
코드 설명
핵심 포인트는 다음과 같습니다.
1. Flexbox 레이아웃: form 요소에 display: flex와 flex-flow: row wrap을 적용해 라벨, 입력 필드, 버튼이 가로 방향으로 나란히 배치됩니다. 공간이 부족하면 자동으로 줄바꿈됩니다.
2. 미디어 쿼리: @media (max-width: 800px) 규칙을 통해 화면 너비가 800px 이하일 때 flex-direction: column으로 변경하여 요소들이 세로로 쌓이도록 합니다. 또한 align-items: stretch를 적용해 입력 필드가 전체 너비를 차지하게 됩니다.
3. 버튼 스타일링: :hover 가상 클래스를 사용해 마우스를 올렸을 때 배경색이 변하는 시각적 피드백을 추가했습니다.
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.
브라우저 창 크기를 줄이면 요소들이 다음과 같이 세로 방향으로 재배치됩니다.
