728x90
서치이펙트 01
indexOf()를 활용하여 검색 화면을 만들어 봅시다.
HTML 태그 검색창 만들기!
▶ 카테고리 만들기
카테고리를 만들기 위해 HTML로 먼저 틀을 짜주어야 합니다.
HTML
<header id="header">
<nav>
<ul>
<li class="active"><a href="searchEffect01.html">1</a>
<li><a href="searchEffect02.html">2</a></li>
<li><a href="searchEffect03.html">3</a></li>
<li><a href="searchEffect04.html">4</a></li>
<li><a href="searchEffect05.html">5</a></li>
<li><a href="searchEffect06.html">6</a></li>
</ul>
</nav>
</header>
<!-- header -->
list를 이용하여 깔끔하게 카테고리를 짤 수 있습니다.
CSS
/* header */
#header {
display: flex;
justify-content: space-between;
}
#header nav {
margin: 10px;
}
#header nav li {
position: relative;
display: inline;
}
#header nav li a {
width: 30px;
height: 30px;
border: 1px solid var(--htmlColor);
border-radius: 50%;
display: inline-block;
text-align: center;
line-height: 30px;
font-family: 'NexonLv1Gothic';
}
#header nav li.active a {
background-color: var(--htmlColor);
color: #fff;
}
#header nav li .sub {
position: absolute;
left: 0;
top: 35px;
width: 400px;
}
#header nav li .sub li a {
width: auto;
background-color: transparent;
color: var(--htmlColor);
border: 0;
text-align: left;
line-height: 1.2;
}
#header nav li .sub li.active a {
text-decoration: underline;
}
완성본 보기
▶ 내용 입력
밑에와 같이 검색하면 찾을 수 있는 내용을 정리해줍니다.
HTML
<div class="search__wrap">
<span>indexOf()을 이용하여 검색하기</span>
<h1>CSS 속성 검색하기</h1>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" id="search" placeholder="CSS 속성을 입력해주세요!">
</div>
<div class="search__info">
<div>CSS 속성 갯수 : <span class="num">0</span></div>
</div>
<div class="search__list">
<div class="css">
<ul>
<li data-name=">align-content"><strong>align-content</strong> : align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
<li data-name="align-items"><strong>align-items</strong> : align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
<li data-name="align-self"><strong>align-self</strong> : align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.</li>
<li data-name="all"><strong>all</strong> : all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
<li data-name="animation"><strong>animation</strong> : animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
<li data-name="animation-delay"><strong>animation-delay</strong> : animation-delay 속성은 애니메이션 지연 시간을 설정합니다.</li>
<li data-name="animation-direction"><strong>animation-direction</strong> : animation-direction 속성은 애니메이션 움직임 방향을 설정합니다.</li>
<li data-name="animation-duration"><strong>animation-duration</strong> : animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.</li>
</ul>
</div>
</div>
h1을 통해 제목을 써준 후 .search__box를 통해 label로 검색하기를 넣어준 후 input으로 텍스트를 입력할 수 있는 검색창을 만들어 줍니다.
search__info로 후에 자바스크립트를 통해 속성 갯수를 넣어 주기 위해 클래스를 num으로 지정해줍니다.
div태그에 클래스명을 search__list로 지정해준 후 그 안에 목록을 구성해야합니다. 데이터들을 입력할 때 HTML에서 사용자가 임의로 지정한 속성값으로 활용할 수 있기 때문에 data name을 입력해주어야 나중에 편리합니다.
CSS
/* main */
#main {
margin: 50px 10px;
}
.search__wrap {
max-width: 1400px;
margin: 0 auto;
border: 3px solid var(--htmlColor);
border-radius: 20px;
background-color: #f1f3f6;
text-align: center;
padding: 30px;
}
.search__wrap > span {
font-size: 20px;
margin-bottom: 20px;
display: inline-block;
}
.search__wrap > h1 {
font-family: 'Tmon';
color: var(--htmlColor);
font-size: 6vw;
margin-bottom: 10px;
}
.search__box {
margin-bottom: 20px;
}
.search__box label{
position:absolute;
clip:rect(0 0 0 0);
width:1px;
height:1px;
margin:-1px;
overflow:hidden
}
.search__box input {
--htmlColor : #223547;
border: 2px solid var(--htmlColor); /*:root {--htmlColor : #223547;} 효과를 줌*/
padding: 15px 40px;
width: 70%;
border-radius: 50px;
font-size: 20px;
}
.search__tab li.active a {
background-color: var(--htmlColor);
color: #fff;
}
.search__list li {
text-align-last: left;
line-height: 1.7;
}
.search__list li.hide {
display: none;
}
/* 미디어 쿼리*/
@media (max-width: 600px)
.search__wrap {
padding: 20px;
}
.search__wrap > span {
font-size: 16px;
margin-bottom: 10px;
}
.search__wrap > h1 {
font-size: 44px;
}
.search__box input {
font-size: 16px;
padding: 12px 30px;
}
}
완성본 보기
▶ 자바스크립트 활용 (공통)
자바스크립트를 활용하여 검색을 했을 때 검색한 결과가 나올 수 있도록 forEach문과 if문을 이용해서 코딩을 해줍니다.
이 때 자바스크립트 카테고리에 있는 indexOf() 메서드를 이용하여 searchWord부분을 통해 0인지 1이상인지를 확인 후 true, false를 구분하여 값을 출력할 수 있습니다.
<script>
//선택자
const searchBox = document.querySelector(".search__box input"); //검색 영역
const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트
const searchInfo = document.querySelector(".search__info .num");
//전체 갯수 구하기
searchInfo.textContent = searchList.length;
//검색 영역
searchBox.addEventListener("keyup", () => {
const searchWord = searchBox.value; //사용자가 입력한 키워드
searchList.forEach(el => {
const cssName = el.dataset.name;
//만약에 indexOf가 true가 되면, false : 0이 되면
if(cssName.indexOf(searchWord)){
el.classList.add("hide");
} else {
el.classList.remove("hide"); //indexOf값이 0이 되는 값만 hide를 지워줍니다.
}
});
});
</script>
</script>
'Effect(자바스크립트 활용) > Search Effect 서치이펙트' 카테고리의 다른 글
| "서치 이펙트" Search 07. 2분 동안 CSS 속성 검색하기 게임 만들기! (1) | 2022.10.21 |
|---|---|
| "서치 이펙트" Search 05. filter() 메서드를 활용하여 검색 화면 만들기 (6) | 2022.09.30 |
| "서치 이펙트" Search 04. find() 메서드를 활용하여 검색 화면 만들기 (10) | 2022.09.28 |
| "서치 이펙트" Search 03. charAt() 메서드를 활용하여 검색 화면 만들기 (3) | 2022.08.23 |
| "서치 이펙트" Search 02. includes() 메서드를 활용하여 검색 화면 만들기 (2) | 2022.08.17 |
댓글