HTML, CSS 및 jQuery를 사용하여 반응형 시간 선택기를 만드는 방법
- 王林원래의
- 2023-10-26 11:27:131003검색
HTML, CSS 및 jQuery를 사용하여 반응형 시간 선택기를 만드는 방법
현대 웹 디자인에서 반응형 디자인은 매우 중요한 요소가 되었습니다. 시간 선택기는 많은 웹사이트와 애플리케이션에서 필수적인 구성요소이기도 합니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 반응형 시간 선택기를 만드는 방법을 소개하고 참조용 특정 코드 예제를 제공합니다.
1단계: 기본 HTML 구조 만들기
먼저 시간 선택기를 수용할 기본 HTML 구조를 만들어야 합니다. 클래스 속성이 "timepicker"(시간 선택기)인
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="timepicker">
<input type="text" class="time-input" readonly>
<i class="fas fa-clock"></i>
</div>
</body>
</html>2단계: CSS 스타일 만들기
다음으로 이 시간 선택기에 몇 가지 기본 CSS 스타일을 추가하여 더 아름답고 사용하기 쉽게 만들어야 합니다. 아래 코드 예제를 참조할 수 있습니다.
.timepicker {
position: relative;
display: inline-block;
}
.time-input {
padding: 6px 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
.fa-clock {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: #666;
}3단계: jQuery 이벤트 추가
이제 jQuery를 사용하여 시간 선택기의 대화형 기능을 처리해야 합니다. 먼저 JavaScript 파일(script.js)에 다음 코드를 추가합니다.
$(function() {
$('.timepicker').on('click', function() {
$('.time-input').focus();
});
$('.time-input').on('focus', function() {
$(this).attr('type', 'time');
});
$('.time-input').on('blur', function() {
$(this).attr('type', 'text');
});
});위 코드에서는 jQuery를 사용하여 시간 선택기의 클릭 이벤트를 수신하고 텍스트 입력 상자에 포커스를 둡니다. 텍스트 입력 상자에 포커스가 생기면 사용자가 시간 선택기를 사용하여 시간을 선택할 수 있도록 해당 유형을 "시간"으로 변경합니다. 텍스트 입력 상자가 포커스를 잃으면 해당 유형을 다시 "텍스트"로 변경합니다.
4단계: FontAwesome 아이콘 라이브러리 추가
시간 선택기를 더 아름답게 보이게 하려면 FontAwesome 아이콘 라이브러리를 사용할 수 있습니다. HTML 파일의
태그에 다음 코드를 추가하기만 하면 됩니다.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
이제 간단한 반응형 시간 선택기 생성이 완료되었습니다. 사용자는 시간 입력 상자를 클릭하여 시간 선택창을 팝업으로 띄우고 원하는 시간을 선택할 수 있습니다. 선택한 시간이 시간 입력창에 표시됩니다.
또한 시간 선택기의 기능과 스타일을 더욱 향상시키려면 CSS 스타일과 jQuery 이벤트를 직접 수정할 수 있습니다.
요약:
이 글에서는 HTML, CSS, jQuery를 사용하여 간단한 반응형 시간 선택기를 만드는 방법을 소개합니다. 기본 HTML 구조, CSS 스타일, jQuery 이벤트를 추가하여 사용자 친화적인 시간 선택기를 구현할 수 있습니다. 이 글이 반응형 시간 선택기를 이해하고 만드는 데 도움이 되기를 바랍니다.
위 내용은 HTML, CSS 및 jQuery를 사용하여 반응형 시간 선택기를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!