CSS 속성 검색 이벤트

2분동안 CSS 속성 검색

2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다.
기억이 나지 않으면, 힌트 보기를 한 번 이용할 수 있습니다.

2:00

검색하기

버튼을 누르면 게임이 시작됩니다.

전체 속성 개수 : 0

현재 맞춘 개수 : 0

kde66034@gmail.com

소스 보기

Javascript

HTML

CSS

<script>
    const cssProperty = [
        { name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." },
        { name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." },
        { name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." },
    ]

    const searchList = document.querySelector(".search__list");         // 서치 리스트 ul
    const searchNum = document.querySelector(".search__info .num");        // 전체 개수
    const searchBox = document.querySelector(".search__box input");        // 검색창
    const searchDesc = document.querySelector(".search__desc");            // 설명창

    // 출력하기
    cssProperty.map((element, index) => {
        searchNum.innerHTML = cssProperty.length; // CSS 속성 총 개수 출력
        // searchNum.innerHTML = index + 1;

        searchList.innerHTML += `${element.name}`;
    });

    // 입력하기
    searchBox.addEventListener("keyup", () => {
        const searchWord = searchBox.value;     // 사용자가 입력한 값을 저장
        // console.log(searchWord);

        findProperty(searchWord);
    });

    // 속성 찾기
    function findProperty(searchData) {
        const targetData = cssProperty.find((data) => data.name === searchData);

        if(targetData == null) {    // 데이터가 null일(존재하지 않을) 경우
            searchDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해주세요!";   // 데이터가 존재하지 않을 시 표시할 문구
            return;     // 종료의 의미 - F12 콘솔창 오류를 없애줌
        };

        searchDesc.textContent = targetData.desc;
    };
</script>

<body>
    <header id="header">
        <h1>Search</h1>
        <nav>
            <ul>
                <li><a href="searchEffect01.html">01</a></li>
                <li><a href="searchEffect02.html">02</a></li>
                <li><a href="searchEffect03.html">03</a></li>
                <li class="active"><a href="searchEffect04.html">04</a></li>
                <li><a href="searchEffect05.html">05</a></li>
                <li><a href="searchEffect06.html">06</a></li>
            </ul>
        </nav>
    </header>
    <!-- // header -->

    <main id="main">
        <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>
    </main>
    <!-- // main -->

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

<style> 
    :root {
        --htmlColor : #223547;
        --cssColor : #472222;
        --jsColor : #224736;
    }
    
    * {
        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;
    }
    
    /* header */
    #header {
        display: flex;
        justify-content: space-between;
    }
    #header h1 {
        margin: 10px;
        font-family: 'Tmon';
    }
    #header nav {
        margin: 10px;
    }
    #header nav ul {}
    #header nav li {
        display: inline;
        position: relative;
    }
    #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: 3px 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: #223547;
        font-size: 6vw;
        margin-bottom: 10px;
    }
    .search__box {
        margin-bottom: 40px;
    }
    .search__box input {
        border: 2px solid var(--htmlColor);
        padding: 15px 40px;
        width: 70%;
        border-radius: 50px;
        font-size: 20px;
    }
    .search__box label {
        position:absolute;
        clip:rect(0 0 0 0);
        width:1px;
        height:1px;
        margin:-1px;
        overflow:hidden
    }
    
    .search__list {}
    .search__list li {
        text-align: left;
        line-height: 1.7;
    }
    .search__list li.hide {
        display: none;
    }
    .search__list li.show {
        display: block;
    }
    .search__list span {
        display: inline-block;
        padding: 10px 20px;
        border: 1px solid var(--htmlColor);
        border-radius: 50px;
        margin: 5px;
        transition: all 0.3s;
        cursor: pointer;
    }
    .search__list span:hover {
        background-color: var(--htmlColor);
        color: #fff;
    }
    
    .search__info {
        text-align: right;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px dashed 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 {
        padding: 20px 40px 20px 60px;
        margin-bottom: 50px;
        border-radius: 50px;
        display: inline-block;
        background-color: var(--htmlColor);
        color: #fff;
        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");
        background-repeat: no-repeat;
        background-position: 22px 17px;
    }
    
    @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;
    }
</style>