[jQuery] jQuery CSS 반응형 폼
반응형(form responsive) 웹 디자인은 다양한 디바이스에서 웹페이지가 일정하게 보여지도록 하는 것에 중점을 둡니다. 이 튜토리얼에서는 jQuery 및 CSS를 사용하여 반응형 폼을 디자인하고 구현하는 방법에 대해 설명하겠습니다.
개요
반응형 폼을 디자인하는 데에는 HTML, CSS, 그리고 JavaScript를 사용할 수 있습니다. jQuery는 JavaScript 라이브러리로, HTML 문서 내의 요소 선택, DOM 조작, 이벤트 처리 등을 쉽게 할 수 있도록 돕는 도구입니다. 이를 통해 반응형 폼을 빠르게 구현할 수 있습니다.
설계 및 구현
필요한 파일 가져오기
먼저 최신 버전의 jQuery를 사용하기 위해 CDN(Content Delivery Network)에서 jQuery를 가져옵니다. 아래와 같이 <head> 태그 내에 아래 코드를 추가합니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
CSS 작성
다음으로는 폼의 스타일을 정의하기 위해 CSS를 작성합니다. 아래는 간단한 예시입니다.
.form-container {
max-width: 400px;
margin: 0 auto;
}
input[type="text"], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
jQuery 코드
이제 jQuery를 사용하여 폼의 반응형 동작을 추가합니다. 아래 코드에서는 창 크기가 변경될 때 input 요소의 너비를 자동으로 조절하는 예시입니다.
$(document).ready(function(){
$(window).on('resize', function() {
var windowWidth = $(window).width();
if (windowWidth < 768) {
$('input[type="text"]').css('width', '100%');
} else {
$('input[type="text"]').css('width', '50%');
}
});
});
결론
이제 위의 코드를 사용하여 기본적인 반응형 폼을 만들 수 있습니다. 더 복잡한 디자인이나 동작을 위해서는 추가적인 CSS 및 jQuery 코드가 필요할 수 있습니다. 이제 이를 참고하여 자신만의 반응형 폼을 디자인하고 구현해 보실 수 있습니다.