search Effect 서치 이펙트

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

search Effect 서치 이펙트

💜 서치 이펙트

코드 보기 / 완성 화면

완성된 화면입니다.

검색하기 화면에 검색하는거에 따라

밑에 설명이 나옵니다!

한번 검색해보세요!

그럼 작업을 해보겠습니다!

CSS연결

<!DOCTYPE html>
<html lang="ko">
<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>검색 이펙트</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/search.css">
</head>

link 태그를 이용해

reset.css와

search.css를 올려줍니다.

클릭해서 파일을 만들어주고

따로 들어가서 css작업을 해줍니다.

reset.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;
}

폰트와 배경 색상에 대한 css입니다.

디자인 css

#header {
    padding: 1.4vw 1.4vw 2.4vw 1.4vw;
    text-align: center;
}
#header ul {
    /* position: relative;
    right: 20px;
    top: 20px; */
}
#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: #ffadad;
    border-color: #d18e8e;
    color: #ffffff;
}
#header li:nth-child(3n+1) a:hover {
    background-color: #fc8888;
}
#header li:nth-child(3n+2) a {
    background-color: #ffd6a5;
    border-color: #ccab83;
    color: #ffffff;
}
#header li:nth-child(3n+2) a:hover {
    background-color: #fdbf72de;
}
#header li:nth-child(3n+3) a {
    background-color: #bdb2ff;
    border-color: rgb(146, 135, 209);
    color: #ffffff;
}
#header li:nth-child(3n+3) a:hover {
    background-color: #a293f8c5;
}

/* main */
#main {}
/* search__wrap */
.search__wrap {
    width: 90%;
    margin: 0 auto;
    /* margin: 5% auto; */
    /* height: 800px; */
    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::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 .title {
    position: relative;
}
.search__header .title {
    background: #AF6EE3;
    position: relative;
    z-index: 10;
    padding-right: 35px;
    color: #000000;
    padding: 0.6vw 8vw 0.6vw 5vw;
}
.search__header .btn {
    display: flex;
}
.search__header .btn span {
    display: block;
    width: 3vw;
    height: 3vw;
    line-height: 3vw;
    /* text-indent: -9999px; */
    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.4vw 0.4vw 0px #000;
    -webkit-text-stroke: 0.2vw rgb(0, 0, 0);
}
.search__conts hgroup h4 {
    color: #AF6EE3;
    font-size: 6vw;
    text-shadow: 0.3vw 0.3 vw 0px #000;
    -webkit-text-stroke: 0.15vw rgb(0, 0, 0);
}
.search__box {
    text-align: center;
    padding: 3vw 1vw;
    border-bottom: 0.3vw dashed #000;

}
.search__box label {
    padding: 1vw;
}
.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: 'truetype';
    outline-color: none;
}
.search__info {
    text-align: right;
    padding: 0.6vw 2vw;
    border-top: 0.3vw dashed #000;
    border-bottom: 0.3vw dashed #000;
}
.search__list ul {
    padding: 3 vw;
}
.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 입니다.

✨ vw

(viewport width) viewport 는 현재 브라우저 창의 너비를 의미, vw 단위는 viewport 너비의 백분율을 나타낸다.

✨ :nth-child

형제 요소 중에 n번째 요소를 불러올 수 있습니다.

nth-child(2)로 하면 2번째 요소를 불러옵니다.

(odd)는 홀수, (even)은 짝수요소를 선택합니다.

✨ text-decoration : none;

텍스트의 밑줄, 취소선, 위에 기호 효과 등을 제거할 때 사용됩니다.

✨ webkit-text-stroke

텍스트의 테두리를 설정하는 것입니다.

header

<body class="pink">
    <header id="header">
        <ul>
            <li class="active"><a href="mouseEffect01.html">1</a></li>
            <li><a href="mouseEffect02.html">2</a></li> 
            <li><a href="mouseEffect03.html">3</a></li> 
            <li><a href="mouseEffect04.html">4</a></li> 
            <li><a href="mouseEffect05.html">5</a></li> 
            <li><a href="mouseEffect06.html">6</a></li> 
        </ul>
    </header>

배경은 pink로 지정해주고

header에 mouseEffect 링크를 각각걸어줍니다.

main

<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 type="search">검색하기</label>
                    <input type="text" name="search" placeholder="CSS속성을 입력해주세요!">
                </div>
                <div class="search__info">
                    <div>
                        CSS 속성 갯수 : <span>0</span>개
                    </div>
                </div>
                <div class="search__list">
                    <ul>
                        <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>
                    </ul>
                </div>
            </div>
        </div>
</main>

그리고 main태그를 만들어 타이틀과 각각의 텍스트를 입력해줍니다.

search__list링크를 만들어

li를 data-name으로 넣어 검색할 수 있도록 이름값을 넣어줍니다.

footer

<footer id="footer">
    <a href="mailto.hunmi961119@gmail.com">hunmi961119@gmail.com</a>
</footer>
<!-- //footer -->

footer구역도 나누어 메일을 넣어줍니다.

script

<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 uesrWord = searchBox.value;       //사용자가 입력한 키워드

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

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

</script>

그리고 아래에 script를 만들어 값을 불러와줍니다.

검색했을때 사용자가 입력한 키워드에 맞게 나올수있도록 해줍니다.

searchList.length값을 불러와 총 갯수도 나타내줍니다.

그럼 위와같은 사이트가 나옵니다!

다음엔 더 업그레이된 버전으로!

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

한번 해보자 코딩

search Effect 서치 이펙트

- Frederick Philips Brooks

search Effect 서치 이펙트

💜 서치 이펙트

CSS연결

reset.css

디자인 css

header

main

footer

script

'배움기록/JAVASCRIPT'의 다른글

티스토리툴바

search Effect 서치 이펙트

- Frederick Philips Brooks

search Effect 서치 이펙트

💜 서치 이펙트

CSS연결

reset.css

디자인 css

header

main

footer

script

'배움기록/JAVASCRIPT'의 다른글

관련글

티스토리툴바