이번에는 북마크 탭을 만들어보겠습니다.
북마크탭은 북마크를 추가하는 버튼과 추가한 북마크들을 볼 수 있는 탭입니다.
먼저 html에서bookmark-open(북마크 바가 열린상태)과 bookmark-close(북마크 바가 닫힌상태)를 만들어주고 각각 안에 btn을 하나씩 만들어줍니다.
그리고 그 아래에 boomark-bar(북마크 바)도 생성해줍니다.
<!DOCTYPE html>
<html>
<head>
<title>newtab</title>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div class="main-container">
<div class="main-wrapper">
<div class="today-info">
<div class="date" id="date">
<!-- 날짜&요일 -->
</div>
<div class="time" id="time">
<!-- 현재 시간 -->
</div>
</div>
<div class="search">
<input id="search-input" autocomplete="off" placeholder="검색어를 입력하세요" />
</div>
</div>
<div class="quote" id="quote">
<!-- 명언 -->
</div>
</div>
<div class="bookmark-open" id="bookmark-open">
<div id="bookmark-open-btn">북마크 닫기</div>
</div>
<div class="bookmark-close" id="bookmark-close">
<div id="bookmark-close-btn">북마크 열기</div>
</div>
<div class="bookmark-bar" id="bookmark-bar">
<!-- 북마크 바 -->
</div>
<script src="./js/clock.js"></script>
<script src="./js/search.js"></script>
<script src="./js/quote.js"></script>
<script src="./js/bookmark-toggle.js"></script>
</body>
</html>
css
먼저 css를 설정해주겠습니다.
bookmark-open의 스타일은 가로길이를 240px, padding은 위아래로 15px 양옆으로 30px
그다음 글자크기를 xsmall로 설정, 요소의 높이를 20px로 설정해줍니다.
북마크를 열고 닫는 버튼은 오른쪽 상단에 위치해야하고 class이름이 main-container인 요소의 위에 떠있어야 하므로
main-container에는 position relative를, bookmark-open 요소에는 absolute와 top 0, right 0으로 설정해줍니다.
그리고 화면의 가운데에 있는 시계는 북마크 바와 상관없이 고정되어야 하므로 position fixed를 주고, "북마크 닫기"글자를 오른쪽 끝에 두기 위해 display flex, justify-content flex-end로 설정해주겠습니다.
.main-container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.main-container .main-wrapper{
text-align: center;
position: fixed;
}
.bookmark-open {
width: 240px;
padding: 15px 30px;
font-size: var(--xsmall);
height: 20px;
position: absolute;
top: 0px;
right: 0px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: flex-end;
}class이름이 bookmark-close인 요소도 bookmark-open과 동일한 스타일로 적용해주고
실제버튼역할을 할 요소들에는 커서 모양을 포인터로 설정해줍니다.
.bookmark-close {
width: 240px;
padding: 15px 30px;
font-size: var(--xsmall);
height: 20px;
position: absolute;
top: 0px;
right: 0px;
color: black;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: flex-end;
}
.bookmark-open div {
cursor: pointer;
}
.bookmark-close div {
cursor: pointer;
}마지막으로 북마크바 요소를 설정해주겠습니다.
.bookmark-bar {
width: 240px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 50px;
right: 0px;
min-height: calc(100vh - 70px);
padding: 10px 30px;
color: white;
}
JS
bookmark-toggle.js를 생성해주고 html에서 새로작성한 div요소들을 id값을 통해 가져옵니다.
const bookmarkBar = document.getElementById("bookmark-bar");
const bookMarkOpen = document.getElementById("bookmark-open");
const bookMarkClose = document.getElementById("bookmark-close");
함수를 생성해서 "북마크 닫기"와 "북마크 열기" 버튼을 눌렀을 때 북마크 바를 열고 닫는 기능을 개발해보겠습니다.
이 북마크바를 닫은 상태에서 웹 페이지를 종료했다면, 다음에 재 접속했을 때에도 북마크바를 닫아야하고,
북마크바를 연 상태에서 웹 페이지를 종료했다면, 연상태를 유지해야 합니다.
이러한 정보를 로컬스토리지에 저장해주겠습니다.
함수안에 변수를 하나 생성해주고 localStorage에 isBookMarkBarOpen이라는 키를 갖는 데이터를 getItem메서드를 사용해 가져오겠습니다.
북마크바 상황
isBookMarkOpen의 값이 close일때
로컬스토리지에 setItem메서드를 통해 값을 open으로 변경 -> bookmarkBar의 display는 block, bookMarkOpen은 flex로, bookMarkClose는 none
isBookMarkOpen의 값이 open일때
버튼을눌러 함수를 실행하여 북마크바를 닫아야한다. -> setItem메서드를 통해 값을 close로 변경하고 bookmarkBar, bookMarkOpen 스타일을 display none, bookMarkClose는 display flex
isBookMarkOpen 값이 존재하지 않을때 북마크 바를 닫아줘야한다. open일때와 똑같은 코드작성
const bookmarkBar = document.getElementById("bookmark-bar");
const bookMarkOpen = document.getElementById("bookmark-open");
const bookMarkClose = document.getElementById("bookmark-close");
// <--북마크 바 toggle-->
const bookmarkBarToggle = () => {
let isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen");
if (isBookMarkBarOpen) {
if (isBookMarkBarOpen === "open") {
localStorage.setItem("isBookMarkBarOpen", "close");
bookmarkBar.style.display = "none";
bookMarkOpen.style.display = "none";
bookMarkClose.style.display = "flex";
} else {
localStorage.setItem("isBookMarkBarOpen", "open");
bookmarkBar.style.display = "block";
bookMarkOpen.style.display = "flex";
bookMarkClose.style.display = "none";
}
} else {
localStorage.setItem("isBookMarkBarOpen", "close");
bookmarkBar.style.display = "none";
bookMarkOpen.style.display = "none";
bookMarkClose.style.display = "flex";
}
};
document.getElementById("bookmark-open-btn").addEventListener("click", bookmarkBarToggle);
document.getElementById("bookmark-close-btn").addEventListener("click", bookmarkBarToggle);이렇게 작성하면 북마크 바 닫기 버튼을 누르면 북마크 바가 닫히고, 열기를 누르면 북마크바가 열리는 것을 확인할 수 있습니다.
코드가 복잡해보이기 때문에 더깔끔하게 작성해보겠씁니다.
로컬스토리지에 isBookMarkOpen데이터가 close일 경우에만 북마크 바를 열고,
나머지의 경우에는 북마크를 닫으면 됩니다.
const bookmarkBar = document.getElementById("bookmark-bar");
const bookMarkOpen = document.getElementById("bookmark-open");
const bookMarkClose = document.getElementById("bookmark-close");
// <--북마크 바 toggle-->
const bookmarkBarToggle = () => {
let isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen");
if (isBookMarkBarOpen === "close") {
localStorage.setItem("isBookMarkBarOpen", "open");
bookmarkBar.style.display = "block";
bookMarkOpen.style.display = "flex";
bookMarkClose.style.display = "none";
return;
}
localStorage.setItem("isBookMarkBarOpen", "close");
bookmarkBar.style.display = "none";
bookMarkOpen.style.display = "none";
bookMarkClose.style.display = "flex";
};
document.getElementById("bookmark-open-btn").addEventListener("click", bookmarkBarToggle);
document.getElementById("bookmark-close-btn").addEventListener("click", bookmarkBarToggle);
마지막으로 웹 페이지에 접속했을때 이전의 상태를 유지해줘야합니다.
따라서 close라면 북마크바를 닫힌상태로, open이라면 북마크바를 표시해주는 기능의 코드를 작성해보겠습니다.
로컬스토리지에서 값을 가져와 열린,닫힌 상태를 체크해주는 변수를 하나 만들어주고
닫혀있으면 닫혀주는 코드를, 열려있으면 열려있는 코드를 작성합니다.
// <--북마크 바-->
const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen");
if (isBookMarkBarOpen === "close") {
//localstorage에 isBookMarkBarOpen이 close라면
bookmarkBar.style.display = "none";
bookMarkOpen.style.display = "none";
bookMarkClose.style.display = "flex";
} else {
//localstorage에 isBookMarkBarOpen이 open이라면
bookmarkBar.style.display = "block";
bookMarkOpen.style.display = "flex";
bookMarkClose.style.display = "none";
}이렇게 하고 페이지를 종료하고 다시 실행하면 이전의 값을 유지합니다.
마지막으로 css에 가서 북마크바가 닫혀있을 경우 이 표시된 배경색을 삭제해주면 북마크바가 실제로 열리고 닫힌 것처럼 표시됩니다.
.bookmark-close {
width: 240px;
padding: 15px 30px;
font-size: var(--xsmall);
height: 20px;
position: absolute;
top: 0px;
right: 0px;
color: black;
display: flex;
justify-content: flex-end;
}그리고 현재 자바스크립트 파일이 총 4개가 존재하는데
각 파일마다 전역변수 혹은 함수가 많이 존재합니다. 이러한 변수 함수는 전역스코프를 갖기 때문에 다른 자바스크립트 파일에서 사용할 수 있습니다.
실제로 위의 자바스크립트코드에서 시계부분을 변경가능합니다.
따라서 즉시 실행함수를 사용하여 함수스코프를 갖게해주겠습니다.
아래의 중괄호안에 자바스크립트 코드를 작성해줍니다.
(function () {
console.log("자바스크립트");
})();
결과화면
참고자료
웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의
웹 프론트엔드 개발자를 희망한다면? 친절하고 꼼꼼한 자바스크립트 강의로 첫걸음을 내딛어보세요✨, - 강의 소개 | 인프런
www.inflearn.com
'프론트엔드 > javascript' 카테고리의 다른 글
| Javascript프로젝트 - 가위바위보 (1) | 2023.07.01 |
|---|---|
| javascript - 북마크 아이템 추가하기 (0) | 2023.06.14 |
| javascript - 4. 명언 설정하기 (0) | 2023.06.11 |
| javascript - 3.검색 바 만들기 (0) | 2023.06.10 |
| javascript - 2. 시계만들기 (0) | 2023.06.10 |
