검색 효과(첫 번째)를 만들어봅시다~!!

안녕하세요, 오늘은 검색했을 때 찾아주는 효과를 만들어보겠습니다!

 

검색 이펙트

검색 이펙트(Search Effects)는 실험 연구에서 실험 조건과는 무관하게 참여자들이 그룹 간에 서로 다른 검색 결과를 보게 되어 실험 결과에 영향을 미치는 현상입니다.

 

예를 들어, 특정 제품이나 서비스를 검색할 때, 검색 엔진에서 제공하는 결과는 검색어, 검색 기록, 지역, 사용자의 이전 검색 등에 따라 차이가 발생할 수 있습니다. 이러한 검색 이펙트로 인해 참여자들은 서로 다른 정보를 받아들이게 되어 실험 결과에 영향을 미칠 수 있습니다.

 

검색 이펙트를 최소화하기 위해서는 참여자들에게 동일한 검색어와 동일한 검색 엔진을 사용하도록 지시할 수 있습니다. 또는 실험 조건이 검색 이펙트에 민감하다면, 이를 고려하여 실험 설계를 조정해야 합니다.

 

검색 이펙트에 적용되는 자바스크립트 속성

• 데이터 저장하기 : 변수
• 데이터 실행하기 : 화살표 함수
• 데이터 불러오기 : for문, forEach()
• 배열 객체 : indexOf(), search()
• 요소 객체 :  querySelector(), querySelectorAll()
• 요소 메서드 : element.style.속성명 : CSS 스타일 설정
• 요소 속성 : textContent, dataset
• 이벤트 객체 : keyup

기본 CSS 설정해주기

@font-face {
    font-family: 'CookieRun';
    font-weight: 400;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'CookieRun';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'CookieRun';
    font-weight: 900;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBlack.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBlack.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBlack.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBlack.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBlack.ttf') format("truetype");
    font-display: swap;
} 
*, *:before, *:after {
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    font-family: 'CookieRun';
  }
  body.pink {
    background-color: #FFD9F4;
    background-image:
      linear-gradient(90deg, #FFB9EA 0px, #FFB9EA 1px, transparent 1px, transparent 99px,  transparent 100px),
      linear-gradient(#FFB9EA 0px, #FFB9EA 1px, transparent 1px, transparent 99px,  transparent 100px),
      linear-gradient(#FFB9EA 0px, #FFB9EA 1px, transparent 1px, transparent 99px,  transparent 100px),
      linear-gradient(90deg, #FFB9EA 0px, #FFB9EA 1px, transparent 1px, transparent 99px,  transparent 100px),
      linear-gradient(transparent 0px, transparent 5px, #FFD9F4 5px, #FFD9F4 95px, transparent 95px, transparent 100px),
      linear-gradient(90deg, #FFB9EA 0px, #FFB9EA 1px, transparent 1px, transparent 99px, #FFB9EA 99px, #FFB9EA 100px),
      linear-gradient(90deg, transparent 0px, transparent 5px, #FFD9F4 5px, #FFD9F4 95px, transparent 95px, transparent 100px),
      linear-gradient(#FFB9EA, #FFB9EA);
    background-size:100px 100%, 100% 100px, 100% 10px, 10px 100%, 100% 100px, 100px 100%, 100px 100%, 100px 100px, 100px 100px;
  }
  body.yellow {
    background-color: #FFEF4A;
    background-image:
        linear-gradient(90deg, #E6D535 0px, #E6D535 1px, transparent 1px, transparent 99px, transparent 100px),
        linear-gradient(#E6D535 0px, #E6D535 1px, transparent 1px, transparent 99px, transparent 100px),
        linear-gradient(#E6D535 0px, #E6D535 1px, transparent 1px, transparent 99px, transparent 100px),
        linear-gradient(90deg, #E6D535 0px, #E6D535 1px, transparent 1px, transparent 99px, transparent 100px),
        linear-gradient(transparent 0px, transparent 5px, #FFEF4A 5px, #FFEF4A 95px, transparent 95px, transparent 100px),
        linear-gradient(90deg, #E6D535 0px, #E6D535 1px, transparent 1px, transparent 99px, #E6D535 99px, #E6D535 100px),
        linear-gradient(90deg, transparent 0px, transparent 5px, #FFEF4A 5px, #FFEF4A 95px, transparent 95px, transparent 100px),
        linear-gradient(#E6D535, #E6D535);
    background-size: 100px 100%, 100% 100px, 100% 10px, 10px 100%, 100% 100px, 100px 100%, 100px 100%, 100px 100px, 100px 100px;
  }

기본 배경과 폰트를 reset.css에 저장시켜주겠습니다. body 컬러가 pink일 때, yellow일 때를 나누어 작업하였습니다.

 

구조 짜주기

<main id="main">
    <div class="search__wrap">
        <div class="search__header">
            <h2 class="title">😁자바스크립트</h2>
        </div>
        <div class="search__conts">
            <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>0</span>개
                </div>
            </div>
            <div class="search__list">
                <ul>
                    <!-- a -->
                    <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>
                    <li data-name="animation-direction"><strong>animation-direction</strong> : 애니메이션 움직임 방향을 설정합니다.</li>
                    <li data-name="animation-duration"><strong>animation-duration</strong> : 애니메이션 움직임 시간을 설정합니다.</li>
                    <li data-name="animation-fill-mode"><strong>animation-fill-mode</strong> : 애니메이션이 끝난 후의 상태를 설정합니다.</li>
                    <li data-name="animation-iteration-count"><strong>animation-iteration-count</strong> : 애니메이션 반복 횟수 설정합니다.</li>
                    <li data-name="animation-name"><strong>animation-name</strong> : 애니메이션 keyframe 이름을 설정합니다.</li>
                    <li data-name="animation-play-state"><strong>animation-play-state</strong> : 애니메이션 진행상태를 설정합니다.</li>
                    <li data-name="animation-timing-function"><strong>animation-timing-function</strong> : 애니메이션 움직임의 속도를 설정합니다.</li>
                    <!-- a -->
                </ul>
            </div>
        </div>
    </div>
</main>
<footer id="footer">
    <a href="mailto:dsy1943@naver.com">dsy1943@naver.com</a>
</footer>
</body>

search__wrap 안에 search__header과 conts, box, info, list를 만들어줍시다.

그리고 li에 data-name을 붙여 각 속성들의 이름을 달아 속성들을 적어줍니다. 

 

각 구역에 CSS 설정해주기

/* header */
#header {
    padding: 1.4vw 1.4vw 2.4vw 1.4vw;
    text-align: right;
}
#header li {
    list-style: none;
    display: inline;
}
#header li a {
    text-decoration: none;
    width: 50px;
    height: 50px;
    line-height: 40px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    border: 5px solid #fff;
    transition: background-color 0.3s;
}

#header li:nth-child(3n+1) a {
    background-color: #AF6EE3;
    border-color: #924dca;
    color: #ffd6a8;
}
#header li:nth-child(3n+1) a:hover {
    background-color: #924dca;
}
#header li:nth-child(3n+2) a {
    background-color: #FFEF4A;
    border-color: #f8d22d;
    color: #3c40b0;
}
#header li:nth-child(3n+2) a:hover {
    background-color: #f8d22d;
}
#header li:nth-child(3n+3) a {
    background-color: #F76ECE;
    border-color: #ff5bce;
    color: #bae5ff;
}
#header li:nth-child(3n+3) a:hover {
    background-color: #ff5bce;
}
/* 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::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 {
    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 {
    background: #AF6EE3;
    position: relative;
    z-index: 10;
    padding-right: 35px;
    position: relative;
    padding: 0.6vw 8vw 0.6vw 5vw;
}
.search__header .btn {
    display: flex;
}
.search__header .btn span {
    display: block;
    width: 3vw;
    height: 3vw;
    line-height: 3.9vw;
    position: relative;
    z-index: 10;
    border-left: 0.3vw solid #000;
    box-sizing: content-box;
    text-align: center;
    font-size: 2vw;
    cursor: pointer;
}
.search__conts hgroup {
    text-align: center;
    padding: 3vw;
    border-bottom: 0.3vw solid #000;
}
.search__conts hgroup h3 {
    color: #FFEF4A;
    font-size: 8vw;
    text-shadow: 0.5vw 0.5vw 0px #000;
    -webkit-text-stroke: 0.2vw #000;
}
.search__conts hgroup h4 {
    color: #AF6EE3;
    font-size: 6vw;
    text-shadow: 0.5vw 0.5vw 0px #000;
    -webkit-text-stroke: 0.2vw #000;
}
.search__box {
    text-align: center;
    padding: 3vw 2vw;
}
.search__box label {
    padding: 1vw;
    font-size: 2vw;
    font-family: 'CookieRun';
}
.search__box input {
    border: 0.3vw solid #000;
    box-shadow: 0.3vw 0.3vw 0 #000;
    width: 80%;
    padding: 1vw 2vw;
    border-radius: 50px;
    font-size: 2vw;
    font-family: 'CookieRun';
    outline: none;
}
.search__info {
    text-align: right;
    padding: 0.3vw 2vw;
    border-bottom: 0.3vw dashed #000;
    border-top: 0.3vw dashed #000;
}
.search__list ul {
    padding: 3vw;
}
.search__list li {
    list-style: none;
    line-height: 2;
}
.search__list li.hide {
    display: none;
}
/* footer */
#footer {
    text-align: center;
    padding: 3vw;
}
#footer a {
    color: #000;
}

각 구역에 CSS를 적용시켜줍니다. 

 

css 사전

text-align	속성은 텍스트 정렬 방식을 설정합니다.
vertical-align	인라인 요소의 수직 정렬 방법을 설정하는 속성입니다.
justify-content	CSS Flexbox 레이아웃에서 주 축(main axis)을 따라 플렉스 아이템(flex item)을 정렬하는 속성입니다.
background-repeat	배경 이미지의 반복 여부를 지정하는 속성입니다.
background-position	배경 이미지의 위치를 지정하는 속성입니다.
background-image	요소의 배경 이미지를 설정하는 속성입니다.
display	요소의 표시 방법(display method)을 설정하는 속성입니다.

스크립트 짜기

<script>
    // 선택자
    const searchBox = document.querySelector(".search__box input");     // 검색 버튼
    const searchList = document.querySelectorAll(".search__list li");    // 목록 리스트

    // 속성 전체 개수
    document.querySelector(".search__info span").textContent = searchList.length;

    // 검색
    searchBox.addEventListener("keyup", () => {
        const userWord = searchBox.value;      // 사용자가 입력한 키워드

        searchList.forEach(el => {
            // const cssName = el.getAttribute("data-name");
            const cssName = el.dataset.name

            if(cssName.indexOf(userWord)){
                // 데이터가 있을 때
                el.classList.add("hide");
            } else {
                // 데이터가 없을 때
                el.classList.remove("hide");
            }
        });
    });

</script>

searchBox라는 변수에 .search__box input을 선택자를 지정해줍니다. 

그리고 searchList라는 변수에 .search__list li를 선택자를 지정해줍니다. 그리고 searchBox에 addEventListener로 이벤트를 추가해줍니다. 여기서 keyup이라는 것이 나왔네요. 무엇인지 살펴봅시다!

 

 keyup?

"keyup"은 JavaScript 이벤트 중 하나입니다. 이 이벤트는 사용자가 키보드에서 어떤 키를 뗄 때 발생합니다. 즉, 해당 키가 눌렸다가 떼어졌을 때 "keyup" 이벤트가 발생합니다. "keyup" 이벤트를 사용하면 사용자가 키보드에서 입력한 값을 캡처하거나 입력한 텍스트를 검증하는 등의 작업을 수행할 수 있습니다. 이벤트는 일반적으로 addEventListener() 메소드를 사용하여 요소에 연결됩니다.

useWord가 searchBox의 value 값이랑 맞으면 if문을 통해 조건을 걸어줍니다.

데이터가 있을 때와 없을 때 구분해줍니다.

 

그리고 el.classList.add("hide")와 el.classList.remove("hide")으로 이벤트를 추가해줍니다.

dataset?

JavaScript의 "dataset" 속성은 HTML 요소의 "data-" 접두사를 가진 사용자 정의 데이터 속성에 액세스하는 데 사용됩니다.

 

완성된 페이지/코드보기

 

 

코드보기 / 완성 화면