완성 화면
코드 보기 / HTML
<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>검색 효과(seacrh Effect)</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/search.css">
</head>
<body class="pink">
<header id="header">
<ul>
<li class="active"><a href="searchEffect01.html">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</header>
<main id="main">
<div class="search__wrap">
<div class="search__header">
<h2 class="title">JAVASCRIPT</h2>
</div>
<div class="search__contents">
<hgroup>
<h3>CSS 속성 검색하기</h3>
<h4>indexOf( ) / search( )</h4>
</hgroup>
<div class="search__box">
<label for="search">검색</label>
<input type="text" name="search" id="search" placeholder="CSS 속성을 입력해주세요">
</div>
<div class="search__info">
<div>
CSS 속성 : <span></span>개
</div>
</div>
<div class="search__list">
<ul class="listNumber">
<li data-name="align-content"><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정.</li>
<li data-name="align-items"><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정.</li>
<li data-name="align-self"><strong>align-self</strong> : 개별적인 콘텐츠 아이템의 정렬 상태를 설정.</li>
<li data-name="all"><strong>all</strong> : 요소의 속성을 초기화 또는 상속을 설정.</li>
<li data-name="animation"><strong>animation</strong> : 애니메이션과 관련된 속성을 일괄적으로 설정.</li>
<li data-name="animation-delay"><strong>animation-delay</strong> : 애니메이션 지연 시간을 설정.</li>
</ul>
</div>
</div>
</div>
</main>
<footer id="footer">
<a href="mailto:goed0522@gmail.com">goed0522@gmail.com</a>
</footer>
코드 보기 / CSS
/* header */
#header {
padding: 1.5vw 1.5vw 2.5vw 1.5vw;
text-align: center;
}
#header li {
list-style: none;
display: inline-block;
}
#header li a{
text-decoration: none;
width: 55px;
height: 55px;
line-height: 55px;
display: inline-block;
font-size: 24px;
color: #000;
border: 2px solid #000;
border-radius: 10%;
}
#header li:nth-child(3n+1) {
background-color: #AF6EE3;
}
#header li:nth-child(3n+2){
background-color: #FFEF4A;
}
#header li:nth-child(3n+3){
background-color: #F76ECE;
}
/* main */
#main {}
/* main > search__wrap */
.search__wrap {
width: 90%;
margin: 0 auto;
background-color: #fff;
border: 0.3vw solid #000;
border-top-left-radius: 3vw;
border-bottom-right-radius: 3vw;
box-shadow: 1vw 1vw 0px #000;
transition: box-shadow 0.3s;
overflow: hidden;
}
.search__wrap:hover {
box-shadow: 0.5vw 0.5vw 0px #000;
}
.search__header {
border-bottom: 0.3vw solid #000;
padding: 0 0 0 3vw;
background-color: #AF6EE3;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.search__header .title {
position: relative;
background: #AF6EE3;
position: relative;
z-index: 10;
padding-right: 35px;
padding: 0.6vw 8.5vw 0.6vw 5.5vw;
}
.search__header::before {
content: "";
width: 90%;
height: 0.3vw;
background: #000;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-10px);
border-radius: 5px;
}
.search__header::after {
content: "";
width: 90%;
height: 0.3vw;
background: #000;
position: absolute;
right: 0;
top: 50%;
transform: translateY(4px);
border-radius: 5px;
}
.search__header .btn {
display: flex;
}
.search__header .btn span{
display: block;
width: 3vw;
height: 3vw;
line-height: 3vw;
position: relative;
z-index: 10;
border-left: 0.3vw solid #000;
box-sizing: content-box;
text-align: center;
font-size: 2vw;
cursor: pointer;
}
.search__contents hgroup{
padding: 3vw 5vw;
text-align: center;
border-bottom: 3px solid rgba(0, 0, 0, 0);
}
.search__contents hgroup h3{
color: #FFEF4A;
font-size: 8vw;
text-shadow: 0.6vw 0.6vw 0px #000;
-webkit-text-stroke: 0.3vw #000;
}
.search__contents hgroup h4 {
color: #AF6EE3;
font-size: 7vw;
text-shadow: 0.6vw 0.6vw 0px #000;
-webkit-text-stroke: 0.3vw #000;
}
.search__box label {
padding: 1vw;
padding: 1vw;
font-size:2.5vw;
font-family: 'CookieRun';
}
.search__box input {
border: 0.4vw solid #000;
width: 80%;
box-shadow: 0.4vw 0.4vw 0 s#000;
padding: 1.5vw 2.5vw;
border-radius: 50px;
font-family: 'CookieRun';
font-size: 2vw;
outline: none;
}
.search__info {
text-align: right;
padding: 0.5vw 2vw;
border-bottom: 0.3vw dashed #000;
}
.search__list ul {
padding: 3.5vw;
}
.search__list li {
list-style: none;
line-height: 2.5;
}
.search__list li.hide {
display: none;
}
/* footer */
#footer {
text-align: center;
padding: 3.5vw;
}
#footer a {
color: #000;
}
#header
padding: 1.5vw 1.5vw 2.5vw 1.5vw; - 뷰포트 width가 1.5, 2.5만큼 상하좌우의 여백을 지정한다.
text-align: center; - 헤더 안에 있는 텍스트들을 가운데 정렬한다.
#header li
list-style: none; - 리스트의 기본 스타일을 none으로 두어 리스트 마커를 없앤다.
display: inline-block; - 요소들의 속성을 inline-block으로 설정하여 요소들이 가로로 나열되도록 한다.
#header li a
text-decoration: none; - link 속성을 none으로 주어 하이퍼링크에 설정되는 밑줄과 색을 없앤다.
width: 55px; - 가로(너비)의 크기가 55px
height: 55px; - 세로(높이)의 크기가 55px
line-height: 55px; - 줄간격을 가로 세로 높이와 똑같이 두어 텍스트가 요소의 정가운데에 올 수 있도록 한다.
display: inline-block; - 요소들의 속성을 inline-block으로 설정하여 요소들이 가로로 나열되도록 한다.
font-size: 24px; - 글자 크기를 24px로 설정한다.
color: #000; - 글자 색을 까만색으로 한다
border: 2px solid #000; - 테두리를 2px만큼 일반 실선, 검정색으로 설정한다.
border-radius: 10%; - 테두리의 모서리가 10%만큼 원형으로 둥글게 처리된다.
#header li:nth-child(3n+1)
background-color: #AF6EE3; - 헤더 안의 리스트 항목들 중 1,4,7, 10 ~ 번째 항목들에게 배경색을 보라색으로 지정한다.
#header li:nth-child(3n+2)
background-color: #FFEF4A; - 헤더 안의 리스트 항목들 중 2, 5, 8, 11 ~ 번째 항목들에게 배경색을 노란색으로 지정한다.
#header li:nth-child(3n+3)
background-color: #F76ECE; - 헤더 안의 리스트 항목들 중 3, 6, 9, 12 ~ 번째 항목들에게 배경색을 분홍색으로 지정한다.
.search__wrap - 컨테이너 요소
width: 90%; - 가로(너비)가 90%
margin: 0 auto; - 가운데에 위치하도록 지정한다.
background-color: #fff; - 검색 바의 배경색을 하얀 색으로 지정한다.
border: 0.3vw solid #000; - 두께가 0.3vw (뷰포트)인 검은색 테두리를 지정한다.
border-top-left-radius: 3vw; - 왼쪽 상단의 모서리를 3vw만큼 둥글게 지정한다.
border-bottom-right-radius: 3vw; - 오른쪽 하단의 모서리를 3vw만큼 둥글게 지정한다.
box-shadow: 1vw 1vw 0px #000; - 검색 바의 그림자 효과를 가로와 세로 방향으로 1vw만큼 지정한다.
transition: box-shadow 0.3s; - 그림자 효과에 0.3초 동안 변화하는 효과를 지정한다.
overflow: hidden; - 튀어나오는 부분은 보이지 않도록 설정한다.
.search__wrap:hover
box-shadow: 0.5vw 0.5vw 0px #000; - 요소 위로 마우스를 가져갈 때, 그림자 효과가 가로 및 세로 방향으로 0.5vw로 변경되도록 설정한다.
.search__header - 헤더 요소
border-bottom: 0.3vw solid #000; - 하단 테두리를 검은색으로 0.3vw만큼 설정한다.
padding: 0 0 0 3vw; - 검색 창 헤더의 좌측(왼쪽) 여백을 3vw만큼 설정한다.
background-color: #AF6EE3; - 검색 창 헤더의 배경 색상을 보라색으로 설정한다.
position: relative; - 검색 창 헤더를 상대적인 위치로 설정한다.
display: flex; - 검색 창 헤더를 플렉스 박스로 설정한다.
align-items: center; - 검색 창 헤더 내의 요소들을 수직으로 중앙 정렬한다.
justify-content: space-between; - 검색 창 헤더 내의 요소들을 수평으로, 동일한 간격으로 배치한다.
.search__header .title - 헤더 내의 클래스 이름이 title인 요소
position: relative; - 제목 요소를 상대적인 위치로 설정한다.
background: #AF6EE3; - 제목 요소의 배경 색상을 보라색으로 설정한다.
z-index: 10; - 이 요소가 다른 요소드로가 겹치는 경우, 위로 올라오도록 한다.
padding-right: 35px; - 오른쪽 내부 여백을 35px로 설정한다.
padding: 0.6vw 8.5vw 0.6vw 5.5vw; - 제목 요소 내부의 여백을 위, 오른쪽, 아래, 왼쪽 순서로 각각 다른 여백을 설정한다. 제목 내의 텍스트가 적절한 간격으로 배치되도록 하는 역할도 한다.
.search__header::before - 헤더의 가상 요소
content: " "; - 가상 요소의 내용을 비운다.
width: 90%; - 가상 요소의 길이를 부모 요소의 90%로 설정한다.
height: 0.3vw; - 세로(높이)를 0.3vw(뷰포트)로 설정한다.
background: #000; - 배경색상을 검은색으로 지정한다.
position: absolute; - 가상 요소를 절대적인 위치로 설정한다.
right: 0; top: 50%; - 가상 요소를 부모의 오른쪽 끝, 상단에서 50% 높이에 위치 시킨다.
transform: translateY(-10px); - 가상 요소를 y축으로 -10px만큼 이동시킨다. 요소의 중앙이 부모 요소의 상단에서 50% 높이에 위치하도록 하는 역할을 한다.
border-radius: 5px; - 가상 요소의 테두리를 5px만큼 둥글게 처리한다.
.search__header::after - 헤더의 가상 요소
content: " "; - 가상 요소의 내용을 비운다.
width: 90%; - 가상 요소의 길이를 부모 요소의 90%로 설정한다.
height: 0.3vw; - 세로(높이)를 0.3vw(뷰포트)로 설정한다.
background: #000; - 배경색상을 검은색으로 지정한다.
position: absolute; - 가상 요소를 절대적인 위치로 설정한다.
right: 0; top: 50%; - 가상 요소를 부모의 오른쪽 끝, 상단에서 50% 높이에 위치 시킨다.
transform: translateY(4px); - 가상 요소를 y축으로 4px만큼 이동시킨다. 요소가 아래쪽에 위치하도록 하는 역할을 한다.
border-radius: 5px; - 가상 요소의 테두리를 5px만큼 둥글게 처리한다.
.search__header .btn - 검색창 헤더 내의 클래스 이름이 btn인 요소
display: flex; - 요소를 플렉스 박스로 지정한다.
.search__header .btn span - 클래스 이름이 btn인 요소 안에 있는 span 태그
display: block; - span 태그를 블록 레벨 요소로 표시한다.
width: 3vw; - 가로(너비)를 뷰포트의 너비 3%로 설정한다.
height: 3vw; - 세로(높이)를 뷰포트의 높이 3%로 설정한다.
line-height: 3vw; - span 태그의 행 높이를 뷰포트의 높이 3%로 설정한다.
position: relative; - span 태그를 상대적 위치로 배치한다.
z-index: 10; - 다른 요소들보다 위에 표시되도록 한다.
border-left: 0.3vw solid #000; - span 태그의 왼쪽 테두리 두께를 뷰포트의 0.3만큼, 검정색으로 설정한다.
box-sizing: content-box; - span 태그 요소의 크기 계산 방법을 컨텐츠 박스 기준으로 설정한다
text-align: center; 요소 내부 텍스트를 중앙 정렬 시킨다.
font-size: 2vw; - 글자의 크기를 2vw(뷰포트)만큼 설정한다.
cursor: pointer; - 해당 요소 위에 마우스 커서가 올라가면 포인터 모양으로 변경되게 설정한다.
.search__contents hgroup - search__contents 클래스를 가진 요소 안에 있는 hgroup 태그
padding: 3vw 5vw; - 요소의 내부 여백을 위, 아래는 화면 너비의 3%, 좌우는 화면 너비의 5%로 설정한다
text-align: center; -요소 내부의 텍스트를 중앙 정렬한다
border-bottom: 3px solid rgba(0, 0, 0, 0); - 요소의 하단 경계선을 3px의 두께와 투명한 색상으로 설정한다.
.search__contents hgroup h3 - search__contents 클래스를 가진 요소 안에 있는 hgroup 태그 내부의 h3 태그
color: #FFEF4A; - 요소의 텍스트 색상을 노란색으로 설정한다.
font-size: 8vw; - 글꼴 크기를 화면 너비의 8%로 설정한다.
text-shadow: 0.6vw 0.6vw 0px #000; - 요소의 텍스트에 그림자 효과를 추가한다. 가로와 세로의 그림자 거리는 화면 너비의 0.6%, 색상은 검은색으로 설정한다.
-webkit-text-stroke: 0.3vw #000; - 요소의 텍스트에 0.3%만큼의 굵기로 검은색 외곽선을 추가한다.
.search__contents hgroup h4 - search__contents 클래스를 가진 요소 안에 있는 hgroup 태그 내부의 h4 태그
color: #AF6EE3; - 요소의 텍스트 색상을 보라색으로 설정한다.
font-size: 7vw; - 글꼴 크기를 화면 너비의 7%로 설정한다.
text-shadow: 0.6vw 0.6vw 0px #000; - 요소의 텍스트에 그림자 효과를 추가한다. 가로와 세로의 그림자 거리는 화면 너비의 0.6%, 색상은 검은색으로 설정한다.
-webkit-text-stroke: 0.3vw #000; - 요소의 텍스트에 0.3%만큼의 굵기로 검은색 외곽선을 추가한다.
.search__box label - search__box 클래스를 가진 lable 요소
padding: 1vw; - 내부 여백을 화면의 1%로 설정한다.
font-size:2.5vw; - 요소의 텍스트 사이즈를 2.5%로 설정한다.
font-family: 'CookieRun'; - 텍스트의 글꼴은 CookieRun이라는 폰트를 사용한다.
.search__box input - 검색 창의 입력 필드
border: 0.4vw solid #000; - 테두리를 0.4%로 설정한다.
width: 80%; - 요소의 너비를 부모 요소의 80%로 설정한다.
box-shadow: 0.4vw 0.4vw 0 s#000; - 텍스트에 그림자 효과가 화면의 0.4%만큼 추가된다.
padding: 1.5vw 2.5vw; - 입력 필드의 내부 여백을 상하로 1.5%만큼 좌우로 2.5%만큼 설정한다.
border-radius: 50px; - 요소의 모서리를 50px만큼 둥글게 설정한다.
font-family: 'CookieRun'; - 텍스트의 글꼴은 CookieRun이라는 폰트를 사용한다.
font-size: 2vw; - 텍스트의 크기는 화면의 2%만큼 설정한다.
outline: none; - 입력 필드이 포커스가 되었을 때 테두리를 제거하는 속성이다.
.search__info - 검색 결과 페이지에서 사용돌 search__info 클래스를 정의
text-align: right; - 해당 요소 내에서 텍스트를 오른쪽으로 정렬하도록 지정한다.
padding: 0.5vw 2vw; - 해당 요소의 내부 여백을 상하는 0.5%로 좌우는 2%를 각각 적용한다.
border-bottom: 0.3vw dashed #000; - 해당 요소의 하단 경계선을 두께는 화면의 0.3%의 점선, 검정색으로 지정한다.
.search__list ul - 검색 결과 페이지에서 사용되는 목록
padding: 3.5vw; - 목록의 내부 여백을 뷰포트 너비의 3.5%로 정의한다
.search__list li - 목록 내부의 각 항목을 정의
list-style: none; - 리스트 스타일(목록 마커)를 표시하지 않도록 설정한다.
line-height: 2.5; - 목록의 줄간격을 뷰포트의 2.5배로 설정한다.
.search__list li.hide - 숨김 클래스가 적용된 목록 항목을 정의
display: none; - 해당 항목을 화면에 표시하지 않도록 설정한다.
코드 보기 / JAVASCRIPT
//선택자
const searchBox = document.querySelector(".search__box input");
const searchList = document.querySelectorAll(".search__list li");
const listNumber = document.querySelector(".search__info span")
//검색
searchBox.addEventListener("keyup",() => {
const userWord = searchBox.value;
searchList.forEach((el,i) =>{
// const cssName = el.getAnimations("data-name");
const cssName = el.dataset.name;
listNumber.innerHTML = i;
if(cssName.indexOf(userWord)) {
el.classList.add("hide");
} else {
el.classList.remove("hide");
}
})
});
const searchBox = document.querySelector(".search__box input");
const searchList = document.querySelectorAll(".search__list li");
const listNumber = document.querySelector(".search__info span");
: 검색창, 검색겨로가 목록, 검색결과 정보를 나타내는 요소들을 각각 찾아와서 변수에 할당한다.
querySelector( ) 메서드를 사용하여 CSS 선택자를 통해 요소를 찾아온다.
searhBox에 키보드 이벤트(keyup) 리스너를 등록하여 사용자가 키보드로 입력하는 값을 userWord에 할당한다.
forEach( ) 메서드를 사용하여 검색결과 목록의 각 요소를 순회한다.
각 요소의 dataset 속성 중 name 속성 값을 가져온 후 userWord 값이 포함되어 있지 않다면 hide 클래스를 추가하여 해당 요소를 화면에서 감추고, 포함되어 있다면 hide 클래스를 제거하여 화면에 표시한다.
검색결과 정보를 나타내는 요소에는 검색결과 목록에서 표시된 항목 수를 업데이트 한다.