서치 이펙트_01 만들어보기!

Search Effect 01

data-name / indexOf 등의 요소를 통해 특정 문자에 대한 값을 찾는 페이지를 만들어보겠습니다!

---

HTML : data-name

"우선 찾을 값으로 활용할 데이터를 리스트로 만들어 li 마다 data-name을 설정해 추후 각 데이터를 indexOf를 통해 찾을 수 있도록 속성을 부여해 하단과 같이 작성합니다

<div class="search__list">
    <div class="html">
        <ul>
            <li data-name="a"><strong>a</strong> : a 태그는 다른 페이지 이동을 설정합니다.</li>
            <li data-name="abbr"><strong>abbr</strong> : abbr 태그는 줄임말이나 머리글자를 표현하는데 사용합니다.</li>
            <li data-name="article"><strong>article</strong> : 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.</li>
            <li data-name="aside"><strong>aside</strong> : 문서의 주요 내ㄴ용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.</li>
            <li data-name="body"><strong>body</strong> : HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 요소만 존재할 수 있습니다.</li>
            <li data-name="br"><strong>br</strong> : 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.</li>
            <li data-name="button"><strong>button</strong> : 클릭 가능한 버튼을 나타냅니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다. 기본값의 HTML 버튼은 사용자 에이전트의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 CSS로 변경할 수 있습니다.</li>
            <li data-name="code"><strong>code</strong> : 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다. 기본 스타일은 사용자 에이전트의 고정폭 글씨체입니다.</li>
            <li data-name="col"><strong>col</strong> : 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용합니다. <colgroup> 안에서 찾을 수 있습니다.</li>
            <li data-name="colgroup"><strong>colgroup</strong> : 표의 열을 묶는 그룹을 정의합니다.</li>
            <li data-name="details"><strong>details</strong> : "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 <summary> 요소를 통해 제공할 수 있습니다. 정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. <details> 요소의 첫 번째 자식이 <summary> 요소라면, <summary>의 콘텐츠를 위젯의 레이블로 사용합니다.</li>
            <li data-name="div"><strong>div</strong> : 플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.</li>
            <li data-name="em"><strong>em</strong> : 텍스트의 강세를 나타냅니다. 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.</li>
            <li data-name="figure"><strong>figure</strong> : 독립적인 콘텐츠를 표현하며 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.</li>
            <li data-name="footer"><strong>footer</strong> : 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.</li>
            <li data-name="head"><strong>head</strong> : 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있습니다.</li>
            <li data-name="header"><strong>header</strong> : 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.</li>
            <li data-name="h1"><strong>h1</strong> : 6단계의 구획 제목을 나타냅니다. 구획 단계는 []이 가장 높고 []은 가장 낮습니다.</li>
            <li data-name="hr"><strong>hr</strong> : 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.</li>
            <li data-name="html"><strong>html</strong> : HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 요소의 후손이어야 합니다.</li>
        </ul>
    </div>
</div>

HTML 구조 전체보기

<main id="main">
    <div class="search__wrap">
        <span>indexOf()를 이용하여 CSS 속성 검색하기</span>
        <h1>HTML 태그 검색하기</h1>
        <div class="search__box">
            <label for="search">검색하기</label>
            <input type="text" id="search" placeholder="HTML 태그를 입력해주세요.">
        </div>
        <div class="search__list">
            <div class="html">
                <ul>
                    <li data-name="a"><strong>a</strong> : a 태그는 다른 페이지 이동을 설정합니다.</li>
                    <li data-name="abbr"><strong>abbr</strong> : abbr 태그는 줄임말이나 머리글자를 표현하는데 사용합니다.</li>
                    <li data-name="article"><strong>article</strong> : 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.</li>
                    <li data-name="aside"><strong>aside</strong> : 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.</li>
                    <li data-name="body"><strong>body</strong> : HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 요소만 존재할 수 있습니다.</li>
                    <li data-name="br"><strong>br</strong> : 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.</li>
                    <li data-name="button"><strong>button</strong> : 클릭 가능한 버튼을 나타냅니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다. 기본값의 HTML 버튼은 사용자 에이전트의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 CSS로 변경할 수 있습니다.</li>
                    <li data-name="code"><strong>code</strong> : 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다. 기본 스타일은 사용자 에이전트의 고정폭 글씨체입니다.</li>
                    <li data-name="col"><strong>col</strong> : 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용합니다. <colgroup> 안에서 찾을 수 있습니다.</li>
                    <li data-name="colgroup"><strong>colgroup</strong> : 표의 열을 묶는 그룹을 정의합니다.</li>
                    <li data-name="details"><strong>details</strong> : "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 <summary> 요소를 통해 제공할 수 있습니다. 정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. <details> 요소의 첫 번째 자식이 <summary> 요소라면, <summary>의 콘텐츠를 위젯의 레이블로 사용합니다.</li>
                    <li data-name="div"><strong>div</strong> : 플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.</li>
                    <li data-name="em"><strong>em</strong> : 텍스트의 강세를 나타냅니다. 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.</li>
                    <li data-name="figure"><strong>figure</strong> : 독립적인 콘텐츠를 표현하며 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.</li>
                    <li data-name="footer"><strong>footer</strong> : 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.</li>
                    <li data-name="head"><strong>head</strong> : 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있습니다.</li>
                    <li data-name="header"><strong>header</strong> : 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.</li>
                    <li data-name="h1"><strong>h1</strong> : 6단계의 구획 제목을 나타냅니다. 구획 단계는 []이 가장 높고 []은 가장 낮습니다.</li>
                    <li data-name="hr"><strong>hr</strong> : 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.</li>
                    <li data-name="html"><strong>html</strong> : HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 요소의 후손이어야 합니다.</li>
                </ul>
            </div>
        </div>
    </div>
    </div>
</main>

CSS

CSS로 서치 이펙트에 살을 붙입니다.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'NexonLv1Gothic';
    color: var(--htmlColor);
}

*, *:before, *:after{
    box-sizing: border-box;
}

a {
    color: var(--htmlColor);
    text-decoration: none;
}

li{
    list-style: none;
}

:root {
    --htmlColor : #223547;
    --cssColor : #302247;
    --javascriptColor : #472231;
}

#header {
    display: flex;
}
#header h1 {
    margin: 10px;
}
#header nav {
    margin: 10px;
}
#header nav ul {}
#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;
}

/* main */
#main{
    margin: 50px 10px;
}
.search__wrap{
    max-width: 1400px;
    margin: 0 auto;
    border: 2px solid var(--htmlColor);
    border-radius: 20px;
    background-color: #f1f3f6;
    padding: 30px;
    text-align: center;
}

.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;
    white-space: nowrap;
}

.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 {
    border: 2px solid var(--htmlColor);
    padding: 15px 40px;
    width: 70%;
    border-radius: 50px;
    font-size: 20px;
}

.search__list {}
.search__list li {
    text-align: 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;
    }
}


/* footer */

#footer {
    text-align: center;
}

#footer a {
    color: #000;
    font-family: 'NexonLv1Gothic';
    padding-bottom: 50px;
}

#footer a:hover {
    text-decoration: underline;
}

Javascript : indexOf

indexOf() 메서드는 찾고자 하는 값과 주어진 값이 일치하는 첫 번째 값을 반환합니다. 일치하는 값이 없으면 -1을 반환합니다.

데이터 서치용 스크립트 만들기

1. 사용자가 input에 값을 기입하면 해당 내용을 searchBox라는 변수에 넣습니다
2. 만약 키 입력이 발생했을 경우 searchWord에 searchBox 안의 값들을 넣고
3. forEach를 통해 searchList 변수에 dataset.name을 붙여 data-name에 적어놨던 값을 담는 cssName을 만들고 if를 통해 조건을 작성합니다.
4. 이때 indexOf가 들어가며, cssName에서 찾기(indexOf)를 해보는데 찾을 값은 searchWord(사용자 입력 값) 설정합니다.
5. indexOf를 통해 값이 맞으면 0부터 값을 불러오니 0을 반환하고 이외의 태그들은 class가 hide로 처리되 숨겨집니다.

//선택자
const searchBox = document.querySelector(".search__box input");               //검색 영역
const searchList = document.querySelectorAll(".search__list ul li");    //목록 리스트

searchBox.addEventListener("keyup", ()=>{ //keyup이라 설정했기 때문에 한글자만 써도 실행이 됨
    const searchWord = searchBox.value; //사용자가 입력한 키워드
    
    searchList.forEach((el)=>{
        const cssName = el.dataset.name //data-name을 통해 확인이 가능하기 때문에 적었었고 js에서 선언시 dataset 붙여야 함.

        if(cssName.indexOf(searchWord)){ //만약에 searchWord(Input값)을 조회했는데
            el.classList.add("hide") //있 el(searchList=.search__list ul li)에 hide 클래스 추가
        } else {
            el.classList.remove("hide") //없으면 hide 클래스 삭제
        }
    })
})