searchEffect06

searchEffect06

sort(), reverse()를 이용하여 정렬하기

원본 소스 보기 원본 사이트

---

HTML

속성별로 클릭 가능하게

코드보기

<main id="main">
    <div class="search__wrap">
        <span>sort(), reverse()를 이용하여 정렬하기</span>
        <h1><a href="searchEffect.html">CSS 속성 정렬하기</a></h1>

        <div class="search__click">
            <ul>
                <li><a href="#" class="btn1">반대로 정렬하기</a></li>
                <li><a href="#" class="btn2">오름차순 정렬하기</a></li>
                <li><a href="#" class="btn3">내림차순 정렬하기</a></li>
                <li><a href="#" class="btn4">알파벳순 (a~z)</a></li>
                <li><a href="#" class="btn5">알파벳순 (z~a)</a></li>
                <li><a href="#" class="btn6">랜덤 정렬하기</a></li>
            </ul>
        </div>

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

        <div class="search__list">
            <ul class="line">

            </ul>
        </div>
    </div>
</main>

CSS

css 구조

코드보기

/* header */
#header {
    display: flex;
    justify-content: space-between;
}
#header nav {
    margin: 10px;
}
#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: 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 a {
    font-family: "Tmon";
    color: var(--htmlColor);
    font-size: 5vw;
    margin-bottom: 10px;
}
.search__wrap .desc {
    line-height: 1.4;
    padding: 20px 0;
}
.search__wrap .time {
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
    border-radius: 50%;
    margin: 0 auto;
    background: var(--htmlColor);
}
.search__wrap .time span {
    color: #fff;
    font-size: 34px;
    font-weight: 100;
}
.search__box {
    margin-bottom: 20px;
    position: relative;
}
.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: 30%;
    border-radius: 50px;
    font-size: 20px;
    margin-top: 20px;
}
.search__box .start {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background: #223547;
    width: 30%;
    border-radius: 50px;
    font-size: 20px;
    border: 2px solid var(--htmlColor);
    padding: 15px 40px;
    color: #fff;
    cursor: pointer;
}
.search__list li {
    text-align: left;
    line-height: 1.7;
}
.search__list li.show {
    display: block;
}
.search__list li.hide {
    display: none;
}
.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__list em {
    float: right;
    font-style: normal;
}
.search__list .line {
    margin: 50px 0;
}
.search__list .line li {
    background: #e3eaf5;
    padding: 10px 30px;
    margin-bottom: 5px;
    border-radius: 50px;
}
.search__list .line li:hover {
    background: #d3e2fa;
    cursor: pointer;
}
.search__info {
    text-align: right;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--htmlColor);
}
.search__info.center {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-bottom: 40px;
}
.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%0A");
    background-repeat: no-repeat;
    background-position: 22px 17px;
}
.search__click {
    margin-top: 10px;
    margin-bottom: 30px;
}
.search__click li {
    display: inline;
}
.search__click li a {
    display: inline-block;
    border: 1px solid var(--htmlColor);
    border-radius: 50px;
    padding: 10px 20px;
    margin: 5px 0;
}
.search__click li a:hover {
    background-color: var(--htmlColor);
    color: #fff;
}
@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 {
    position: relative;
    text-align: center;
}

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

#footer a:hover {
    text-decoration: underline;
}
#footer .source {
    position: absolute;
    right: 20px;
    bottom: 20px;
    border: 1px solid #fff;
    border-radius: 40px;
    padding: 10px 30px;
    font-size: 14px;
}

JAVASCRIPT

우선 속성들을 작성합니다. 속성들의 정렬을 위해서 번호를 부여합니다. 속성들을 forEach를 이용해서 빈 문자열 안에 번호와 이름 설명을 넣어서 innerHTML방식으로 출력합니다. 이후 정렬의 방식은 반대로 정렬은 reverse(), 그 외의 방식은 sort()를 사용했습니다. 랜덤정렬은 피셔에이츠 알고리즘을 이용하였습니다. 알파벳 정렬의 경우, 문자열을 비교하는 localeCompare() 메서드를 사용.

const cssList = document.querySelector(".search__list .line");

// 데이터 출력하기
const updateList = () => {
    let listCSS = "";
    cssProperty.forEach((data, index) => {
        listCSS += `<li>${data.num}. ${data.name} : ${data.desc}</li>`;
    });
    cssList.innerHTML = listCSS;
}
updateList();
// 반대로 정렬 클릭
document.querySelector(".btn1").addEventListener("click", (e) => {
    e.preventDefault();
    cssProperty.reverse();
    updateList();
});
// 오름차순 정렬 클릭
document.querySelector(".btn2").addEventListener("click", (e) => {
    e.preventDefault();
    cssProperty.sort((a, b) => {
        return a.num - b.num;
    });
    updateList();
});
// 내림차순 정렬 클릭
document.querySelector(".btn3").addEventListener("click", (e) => {
    e.preventDefault();
    cssProperty.sort((a, b) => {
        return b.num - a.num;
    });
    updateList();
});
// 알파벳 정렬(a~z) 클릭
document.querySelector(".btn4").addEventListener("click", (e) => {
    e.preventDefault();
    cssProperty.sort((a, b) => {
        let x = a.name;
        let y = b.name;
        return x.localeCompare(y);
    });
    updateList();
});
// 알파벳 정렬(z~a) 클릭
document.querySelector(".btn5").addEventListener("click", (e) => {
    e.preventDefault();
    cssProperty.sort((a, b) => {
        let x = a.name;
        let y = b.name;
        return y.localeCompare(x);
    });
    updateList();
});
// 랜덤 정렬
document.querySelector(".btn6").addEventListener("click", (e) => {
    e.preventDefault();
    for (let i = cssProperty.length - 1; i >= 0; i--) {
        const randomIndex = Math.floor(Math.random() * (i + 1));
        // console.log(randomIndex); 여기까지만은 중복발생
        // [1,2,3] = [3,2,1]; // 객체구조분해할당
        [cssProperty[i], cssProperty[randomIndex]] = [cssProperty[randomIndex], cssProperty[i]];//중복 되는 숫자 나오지 않고 무작위
        cssProperty.innerHTML += cssProperty[i]
    }
    updateList();
});