1. 구현 결과 미리보기
2. 분석
액션 시트는 모바일 애플리케이션에서 빈번하게 활용되는 사용자 인터페이스 패턴 중 하나로, 여러 선택 옵션을 제공하여 사용자 경험을 향상시키는 역할을 합니다. 이번 글에서는 HTML, CSS, JavaScript를 통해 간결하면서도 효과적인 액션 시트를 만들어보겠습니다.
코드 구조
- HTML 구조: 액션시트를 담고 있는 부모 요소와 선택 옵션들을 나타내는 요소들을 구성합니다. 또한, 액션시트를 보여주는 버튼을 추가합니다.
- CSS 스타일링: 액션시트와 선택 옵션들의 스타일을 정의하고, 각 요소에 트랜지션 효과를 부여하여 부드러운 화면 전환을 구현합니다.
- JavaScript 인터랙션: 각 옵션을 클릭했을 때의 동작과 액션시트를 보이거나 감추는 함수를 작성합니다.
특징 및 기능
실제 동작: 버튼을 클릭하면 액션시트가 나타나며, 선택 옵션을 클릭하면 해당 옵션에 대한 알림이 표시됩니다. 해당 부분은 기본적인 액션시트 토글에 대한 기능이며, 추가적인 요구사항이 있는 경우 얼마든지 추가구현이 가능합니다.
트랜지션 효과: CSS 트랜지션을 이용하여 액션시트의 나타남과 사라짐에 부드러운 효과를 부여합니다.
사용자 경험 향상: 액션시트는 화면 하단에서 위로 올라오는 디자인으로, 사용자가 명확한 시각적 피드백을 받을 수 있습니다.
3. 구현
3.1. HTML
<div class="action-sheet" id="actionSheet" onclick="hideActionSheet()">
<div class="action-options">
<div class="option close" onclick="hideActionSheet()">Close</div>
<!-- 여러 선택 옵션들 -->
<div class="option" onclick="handleOption('Option 1')">Option 1</div>
<div class="option" onclick="handleOption('Option 2')">Option 2</div>
<div class="option" onclick="handleOption('Option 3')">Option 3</div>
</div>
</div>
<button onclick="showActionSheet()">Show Action Sheet</button>3.2. CSS
#actionSheet {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
transition: 1s;
/* 서서히 나타나는 효과 */
visibility: hidden;
opacity: 0;
}
#actionSheet.active {
/* 서서히 나타나는 효과 */
visibility: visible;
opacity: 1;
}
.action-options {
background-color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/* 세로 컨텐츠가 늘어나는 경우 스크롤이 생기도록 설정 */
overflow: auto;
max-height: 300px;
/* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */
position: relative;
bottom: -300px;
transition: 1s;
}
#actionSheet.active .action-options {
/* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */
bottom: 0;
}
.option {
padding: 15px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.option.close {
text-align: center;
}
.option:hover {
background-color: #f2f2f2;
}3.3. JS
// Action Sheet 보이기
function showActionSheet() {
document.getElementById("actionSheet").classList.add("active");
}
// Action Sheet 감추기
function hideActionSheet() {
document.getElementById("actionSheet").classList.remove("active");
}
// 각 옵션 클릭 시 처리
function handleOption(option) {
// 여기에 옵션 클릭 시 로직 작성
alert("Selected Option: " + option);
// Action Sheet 감추기
hideActionSheet();
}3.4. 전체 코드
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Action Sheet</title>
<style>
#actionSheet {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
transition: 1s;
/* 서서히 나타나는 효과 */
visibility: hidden;
opacity: 0;
}
#actionSheet.active {
/* 서서히 나타나는 효과 */
visibility: visible;
opacity: 1;
}
.action-options {
background-color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/* 세로 컨텐츠가 늘어나는 경우 스크롤이 생기도록 설정 */
overflow: auto;
max-height: 300px;
/* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */
position: relative;
bottom: -300px;
transition: 1s;
}
#actionSheet.active .action-options {
/* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */
bottom: 0;
}
.option {
padding: 15px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.option.close {
text-align: center;
}
.option:hover {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="action-sheet" id="actionSheet" onclick="hideActionSheet()">
<div class="action-options">
<div class="option close" onclick="hideActionSheet()">Close</div>
<!-- 여러 선택 옵션들 -->
<div class="option" onclick="handleOption('Option 1')">Option 1</div>
<div class="option" onclick="handleOption('Option 2')">Option 2</div>
<div class="option" onclick="handleOption('Option 3')">Option 3</div>
</div>
</div>
<button onclick="showActionSheet()">Show Action Sheet</button>
<script>
// Action Sheet 보이기
function showActionSheet() {
document.getElementById("actionSheet").classList.add("active");
}
// Action Sheet 감추기
function hideActionSheet() {
document.getElementById("actionSheet").classList.remove("active");
}
// 각 옵션 클릭 시 처리
function handleOption(option) {
// 여기에 옵션 클릭 시 로직 작성
alert("Selected Option: " + option);
// Action Sheet 감추기
hideActionSheet();
}
</script>
</body>
</html>
