심플한 다크 스낵바 - 단계별 가이드

3초 안에 사라지는 간단한 스낵바를 만드는 방법에 대한 튜토리얼입니다.

HTML

HTML의 경우 스낵바를 여는 버튼과 내부에 스낵바 텍스트가 있는 ID가 "snackbar"인 div 요소가 필요합니다.

<button onclick="openSnackbar()">Open snackbar</button>
<div id="snackbar">
    <span>Snackbar text...</span>
</div>

자바스크립트

자바스크립트를 사용하면 버튼 클릭 시 "#snackbar"div 요소에 "active"라는 클래스를 추가하여 스낵바를 열고 닫을 수 있습니다.

id "snackbar"로 선택 요소를 저장하고 여기에 "active"클래스를 추가합니다.

3초 후에 "setTimeout()"메서드를 사용하여 해당 클래스를 제거합니다.

function openSnackbar() {
    let snackbar = document.getElementById('snackbar')

    // Activate snackbar
    snackbar.classList.add('active')

    setTimeout(() => {
        // Deactivate snackbar (after 3000ms - 3 seconds)
        snackbar.classList.remove('active')
    }, 3000);
}

CSS

CSS의 경우 먼저 #snackbar의 스타일을 지정합니다.

위치를 절대값으로 설정하고 아래쪽은 0, 왼쪽은 50%로 설정합니다. transform translateX를 -50%로 설정하면 이 요소는 화면 하단 중앙에 배치됩니다.

약간의 마진과 패딩을 추가하겠습니다.

이제 배경색을 짙은 회색으로, 색상을 분홍색으로 설정합니다.

스낵바의 너비를 200px로 설정하고 약간의 테두리 반경을 추가합니다.

마지막으로 display 속성을 none으로 설정하여 이 요소를 숨깁니다.

#snackbar {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 10px;
    background-color: #333;
    padding: 10px 20px;
    width: 200px;
    border-radius: 5px;
    color: rgb(249, 129, 129);
    display: none;
}

이제 "활성"클래스의 스타일을 지정합니다. 이 클래스는 표시되어야 할 때 스낵바 요소에 추가됩니다.

이를 위해 display 속성을 덮어쓰고 차단으로 설정합니다.

"!important"규칙을 추가하는 것을 잊지 마세요. 그렇지 않으면 id 선택자가 더 높은 특이성을 가지므로 무시되지 않습니다.

.active {
    display: block !important;
}

그리고 그게 다야.

비디오 자습서here에서 전체 코드를 찾을 수 있습니다.

읽어 주셔서 감사합니다. ❤️