- 다크모드/ 일반모드변경, 검색창 구현, 바로가기연결, 바로가기 추가
 |
|
- index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<link rel="stylesheet" href="/style.css">
<script defer src="/index.js"></script>
</head>
<body class="body-background">
<header>
<nav class="header-nav">
<ul class = "header-nav-list-wrapper">
<li>Gmail</li>
<li>Images</li>
<li><button class="toggle-button">다크모드</button></li>
</ul>
</nav>
</header>
<main class="main-container">
<h1><img class="image-logo" src="/images/logo.png" alt="logo 이미지"></h1>
<div class="search-container">
<input class ="search-input" type="text" placeholder="Google 검색 또는 url입력">
<img class="search-icon" src="/images/search.png" alt="검색 이미지">
</div>
<section class="bookmark-section">
<div class="bookmark-wrapper">
<a href="https://www.naver.com" target="_blank" class="bookmark-item">
<div class="img-icon-wrapper">
<img src="/images/naver.png" alt="Naver">
</div>
<div class="bookmark-text">naver</div>
</a>
<a href="https://www.google.com/" target="_blank" class="bookmark-item">
<div class="img-icon-wrapper">
<img src="/images/google.png" alt="google">
</div>
<div class="bookmark-text">google</div>
</a>
<a href="https://edu.ssafy.com/edu/main/index.do" target="_blank" class="bookmark-item">
<div class="img-icon-wrapper">
<img src="/images/ssafy.png" alt="ssafy">
</div>
<div class="bookmark-text">ssafy</div>
</a>
<div class="bookmark-plus">
<div class="img-icon-wrapper">+</div>
<div class="bookmark-text">추가하기</div>
</div>
</div>
</section>
</main>
</body>
</html>
- style.css
*{
box-sizing: border-box;
}
/* toggle이용 다크모드 구현시 사용 */
.body-background{
background: #fff;
}
/*/////////////// 헤더 부분 /////////////*/
.header-nav{
display: flex;
}
.header-nav-list-wrapper{
list-style: none;
padding: 0;
display: flex;
margin-left: auto;
align-items: center;
}
.header-nav-list-wrapper li{
margin-left: 10px;
}
.toggle-button{
background: black;
color: white;
border: 1px solid #eee;
/* #eee 엄청흐린색 = 있는듯~없는듯~ */
padding: 5px 8px;
border-radius: 10px;
cursor: pointer;
}
/* ////////////////메인 부분//////////////// */
.main-container{
/* */
text-align:center;
/* */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.image-logo{
width: 272px;
}
/* 검색 부분 */
.search-container{
position: relative;
margin: 0px auto;
margin-top: 50px;
}
.search-icon{
position: absolute;
top:13px;
left: 10px;
width: 17px;
}
.search-input{
width: 100%;
height: 44px;
padding-left: 40px;
border-radius: 50px;
border: 1px solid #dddddd;
}
/* ////////////북마크//////////////////// */
.bookmark-section{
margin-top: 40px;
}
.bookmark-wrapper{
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 600px;
min-width: 430px;
}
.bookmark-item{
margin-top: 30px;
width: 112px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
}
.bookmark-item:hover{
opacity: 0.5;
cursor: pointer;
}
.img-icon-wrapper{
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: #f2f3f5;
font-size: 24px;
}
.img-icon-wrapper > img{
width: 60%;
height: 60%;
}
.bookmark-plus{
margin-top: 30px;
width: 112px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
}
.bookmark-text{
margin-top: 5px;
color: #000;
}
/* 북마크 끝 */
/* 클릭이벤트 발생시, 다크보드를 위해 CSS 미리 정의 */
.toggle-button-darkmode{
background-color: #fff;
color: black;
}
/* toggle이용 다크모드 구현시 사용 */
.body-background-darkmode{
background: #000;
}
.text-darkmode{
color: #fff;
}
.img-icon-wrapper-darkmode{
background-color: #fff;
}
- index.js
let toggleButton = document.querySelector(".toggle-button");
let bodyBackground = document.querySelector(".body-background");
let headerNav = document.querySelector(".header-nav-list-wrapper");
let bookmarkTexts = document.querySelectorAll(".bookmark-text");
let imgIconWrappers = document.querySelectorAll(".img-icon-wrapper");
let searchInput = document.querySelector(".search-input")
toggleButton.addEventListener('click', function(){
toggleButton.innerHTML = "다크모드";
toggleButton.classList.toggle("toggle-button-darkmode");
bodyBackground.classList.toggle("body-background-darkmode");
if(toggleButton.classList.contains("toggle-button-darkmode")){
toggleButton.innerHTML = "일반모드";
}
headerNav.classList.toggle("text-darkmode");
for (let i=0; i<bookmarkTexts.length; i++){
bookmarkTexts[i].classList.toggle("text-darkmode")
}
for (let i=0; i<imgIconWrappers.length; i++){
imgIconWrappers[i].classList.toggle("img-icon-wrapper-darkmode")
}
})
searchInput.addEventListener('keyup', function(e){
if(e.code === "Enter"){
if(e.target.value === ""){
alert("검색어를 입력하지 않으셨습니다.");
return;
}
alert(e.target.value + "검색하셨습니다.");
window.open(`https://www.google.com/search?q=${e.target.value}`, "_blank")
}
})
const bookmarkPlus = document.querySelector(".bookmark-plus")
bookmarkPlus.addEventListener("click", function(){
const bookmarkItem = document.querySelectorAll(".bookmark-item");
//console.log(bookmarkItem);
const item = bookmarkItem[bookmarkItem.length -1];
const clone = item.cloneNode(true);
item.after(clone);
})google.zip
0.12MB
'WEB > Javascript' 카테고리의 다른 글
| [21.08.11] 비동기 프로그래밍2 (0) | 2021.08.11 |
|---|---|
| [21.08.10] 비동기 프로그래밍1 (0) | 2021.08.10 |
| [21.07.21] Javascript 실습 - 영화 정보 수집 (0) | 2021.07.21 |
| [21.07.20] Javascript기본 (0) | 2021.07.21 |