서치 이펙트_04 : map/find를 사용하여 원하는 CSS 속성 찾기!

서치 이펙트 만들기!

JS의 map/find를 적절히 활용해 원하는 CSS 속성을 찾는 이펙트를 만들어보도록 하겠습니당~~~

---

HTML 코드 : 뼈대

간단한 html 구조를 만들어 뼈대를 구성해보도록 합시다!

<main id="main">
    <!-- 소스보기 -->
    <div class="source__button">쏘-스보기</div>
    <div class="source__desc hide">
        <div class="source__box">
            <div class="status__bar">퀴-즈 이펙트 쏘-스 보기.exe</div>
            <div class="source__tab">
                <div class="source__tab__01 active">HTML</div>
                <div class="source__tab__02">JAVASCRIPT</div>
                <div class="source__tab__03">CSS</div>
            </div>
            <div class="source__close">X</div>
            <div class="source__container">
                <div class="source__contaienr__html">
                    <div class="t_code">
                        <!-- 3. 하단의 클래스를 통해 스크립트(js) 적용 -->
                        <pre><code style="height: 100%;"class="language-html">
</code></pre>
                    </div>
                </div>
                <div class="source__contaienr__css">
                    <div class="t_code">
                        <!-- 3. 하단의 클래스를 통해 스크립트(js) 적용 -->
                        <pre><code style="height: 100%;"class="language-css">
</code></pre>
                    </div>
                </div>
                <div class="source__contaienr__javascript">
                    <div class="t_code">
                        <!-- 3. 하단의 클래스를 통해 스크립트(js) 적용 -->
                        <pre><code style="height: 100%;"class="language-js">
</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 소스보기 끝 -->
    <div class="search__wrap">
        <span>find()를 이용하여 속성을 검색하면 설명 보여주기</span>
        <h1>CSS 속성 검색하기</h1>

        <div class="search__box">
            <label for="search">검색하기</label>
            <input type="text" id="search" placeholder="CSS 속성 및 유형을 입력하세요.">
        </div>

        <div class="search__desc">
            속성을 검색하시면 설명이 표시됩니다!!
        </div>

        <div class="search__info">
            <div>찾은 속성 갯수 : <span class="num">0</span></div>
        </div>

        <div class="search__list">
        </div>

    </div>
    </div>
</main>
<!-- //main -->

---

CSS 코드 : 살

이제 뼈대를 구성하였으니 살을 붙여 searchEffect를 구현하기위한 준비를 마치겠습니다.

* {
    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__info {
    text-align: right;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--htmlColor);
  }
  
  .search__info .type {
    text-align: center;
    margin-bottom: 10px;
  }
  
  .search__info .keyword {
    text-align: center;
    margin-bottom: 10px;
  }
  .search__info .keyword span {
    border: 2px solid var(--htmlColor);
    border-radius: 50px;
    padding: 10px;
    display: inline-block;
    margin-bottom: 4px;
  }
  .search__info .keyword span:hover {
    background-color: var(--htmlColor);
    color: #fff;
    cursor: pointer;
  }
  
  .search__desc {
    border: 1px solid var(--htmlColor);
    padding: 20px 40px 20px 60px;
    margin-bottom: 50px;
    background-color: var(--htmlColor);
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='11' cy='11' r='8' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M16.5 16.958L21.5 21.958' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    /* border-bottom: 2px solid var(--htmlColor); */
    background-repeat: no-repeat;
    background-position: 22px 17px;
  }
  
  .search__list {
  }
  
  .search__list li {
    text-align: left;
    line-height: 1.7;
  }
  .search__list span {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--htmlColor);
    border-radius: 50px;
    transition: all 0.25s;
    margin: 5px;
  }
  
  .search__list span:hover {
    background-color: var(--htmlColor);
    color: #fff;
  }
  
  .search__list li.hide {
    display: none;
  }
  
  .search__list li.show {
    display: block;
  }
  
  @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;
  }
  
  /* 소스보기 */
  .hljs {
    background-color: #0f0f13 !important;
    font-family: "NeoDunggeunmo" !important;
    border-radius: 0px !important;
  }
  #main {
    font-family: NeoDunggeunmo;
  }
  .status__bar {
    content: "";
    height: 35px;
    width: 100%;
    background-color: #030385;
    padding-top: 9px;
    padding-left: 10px;
    color: #fff;
  }
  .source__button {
    position: fixed;
    right: 40px;
    bottom: 100px;
    padding: 5px;
    z-index: 10001;
    border: 8px ridge #cacaca;
    background-color: #ededed;
    text-align: center;
    cursor: pointer;
  }
  
  .source__tab__01:hover,
  .source__tab__02:hover,
  .source__tab__03:hover {
    background-color: #b6b6b6;
    cursor: pointer;
  }
  
  .source__close:hover,
  .source__button:hover {
    border: 8px ridge #181818;
    background-color: #a3a3a3;
  }
  
  .source__desc {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.381);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10001;
  }
  
  .source__box {
    background-color: rgb(255, 255, 255);
    width: 700px;
  
    /* margin: auto; */
    /* margin-top: 120px; */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(15px);
    box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.155);
    overflow: hidden;
    border: 8px ridge #cacaca;
    animation: zoomOut 0.5s ease backwards; /*뒤에s껀 딜레이*/
  }
  .source__box.hide {
    /* animation: zoomIn 0.5s ease; */
    animation: foldIn 0.3s 0.9s ease;
  }
  
  .source__tab {
    display: flex;
    align-items: center;
    background-color: #ededed;
    height: 35px;
    position: relative;
  }
  
  .source__close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 2px 0px 0px 2px;
    /* padding: 15px; */
    border: 8px ridge #cacaca;
    background-color: #ededed;
    width: 35px;
    height: 35px;
    text-align: center;
    cursor: pointer;
  }
  
  .source__tab > div {
    padding: 8px;
  }
  
  .source__container {
    background-color: #c2bcbc;
    height: 500px;
    overflow: scroll;
  }
  
  .hide {
    display: none;
  }
  
  .active {
    background-color: #c7bcbc;
    /* margin: 5px; */
    color: #3a3232;
  }
  
  .source__contaienr__html {
    display: none;
  }
  
  .source__contaienr__javascript {
    display: none;
  }
  
  .source__contaienr__css {
    display: none;
  }
  
  /* 세로 스크롤 */
  .source__container::-webkit-scrollbar {
    width: 20px;
    height: 0px;
    border-radius: 20px;
  }
  
  .source__container:hover::-webkit-scrollbar {
    opacity: 1;
  }
  
  .source__container::-webkit-scrollbar-thumb {
    background-color: rgb(95, 95, 95); /*스크롤바의 색상*/
    border: 20px ridge #cacaca;
  
    background-clip: padding-box;
  }
  
  .source__container::-webkit-scrollbar-track {
    background-color: transparent; /*스크롤바 트랙 색상*/
  }
  
  @keyframes foldOut {
    0% {
      transform: scaleX(0) scaleY(0.001);
    }
    50% {
      transform: scaleX(1) scaleY(0.001);
    }
    100% {
      transform: scaleX(1) scaleY(1);
    }
  }
  
  @keyframes foldIn {
    0% {
      transform: scaleX(1) scaleY(1);
    }
    50% {
      transform: scaleX(1) scaleY(0.001);
    }
    100% {
      transform: scaleX(0) scaleY(0.001);
    }
  }
  
  @keyframes zoomOut {
    0% {
      transform: scale(100%, 0%);
    }
    100% {
      transform: scale(-50%);
    }
  }
  
  @keyframes zoomIn {
    0% {
      transform: scale(-50%);
    }
    100% {
      transform: scale(100%, 0%);
    }
  }
  

---

JS 코드 : find를 통한 찾기

저는 최대한 간단하게 설명만 가능하므로 비교적 전문적인 용어는 배제한 형태로 설명해볼게요!

1. 우선 map을 사용해 cssProperty(수기 작성한 모든 CSS 데이터)를 searchList(".search__list")에 각 name키를 span으로 감싸 스크립트로 넣습니다
2. searchBox(input)에 키 입력이 발생하면 searchBox(input)의 값을 searchWord 상수에 넣고 findProperty로 리턴시킵니다. 3. 실행되어질 findProperty 함수에는 find를 통해 data.name과 search(input값)이 일치하는지의 여부를 targetData에 저장 후
4. 이 targetData가 Null(없음)과 같다면 "해당 속성은 존재하지 않습니다."와 같은 메세지를 searchDesc에 넣어 출력시킨 후 다음 스크립트가 실행되지 않도록 다시 돌려보냅니다.
5. 만약 4번에 반대가 되는 경우 [값이 있었다면] targetData.desc값을 searchDesc에 보내 출력시킵니다!

---

완성!

아주~~~~~~므엇진 검색창이 완성되었어요! 무야호~~~~~~~~~~~~~

---

원본 소스 보기

원본 페이지 보기