sort(), reverse()를 이용하여 정렬하기,
피셔 예이츠 알고리즘 이용하여 정렬하기

CSS 속성 정렬하기

전체 속성 갯수 : 0

소스 보기

JAVSCRIPT

HTML

CSS

const cssProperty = [
    { num: 1, name: 'accent-color', desc: '특정 요소에 색상을 지정할 때 사용됩니다.' },
    { num: 2, name: 'align-content', desc: '콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.' },
    { num: 3, name: 'align-items', desc: '콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.' },
    { num: 4, name: 'align-self', desc: '개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.' },
    { num: 5, name: 'all', desc: '요소의 속성을 초기화 또는 상속을 설정합니다.' },
    { num: 6, name: 'animation', desc: '애니메이션과 관련된 속성을 일괄적으로 설정합니다.' },
    ...
];

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

let cssProp = [];
// 데이터 출력하기
const updateList = () => {
    // let listCSS = '';
    // cssProperty.forEach((data, index) => {
    //     listCSS += `<li>${data.num}. ${data.name} : ${data.desc}</li>`;
    // });
    // cssList.innerHTML = listCSS;

    cssProperty.map((data, index) => {
        cssProp[index] = `<li>${data.num}. ${data.name} : ${data.desc}</li>`;
    });
    cssList.innerHTML = cssProp.join('');
};
updateList();

// 반대로 정렬
function sortReverse() {
    cssProperty.reverse();
    updateList();
}
// 반대로 정렬 클릭
document.querySelector('.btn1').addEventListener('click', () => {
    sortReverse();
});

// 내림차순 정렬
function sortDescending() {
    cssProperty.sort((a, b) => {
        return b.num - a.num;
    });
    updateList();
}
// 내림차순 정렬 클릭
document.querySelector('.btn2').addEventListener('click', () => {
    sortDescending();
});

// 오름차순 정렬
function sortAscending() {
    cssProperty.sort((a, b) => {
        return a.num - b.num;
    });
    updateList();
}
// 오름차순 정렬 클릭
document.querySelector('.btn3').addEventListener('click', () => {
    sortAscending();
});

// 알파벳 정렬(a~z)
function sortAlphabet() {
    cssProperty.sort(function (a, b) {
        if (a.name > b.name) return 1;
        else if (a.name < b.name) return -1;
        else return 0;
    });
    updateList();
}
// 알파벳 정렬 클릭(a~z)
document.querySelector('.btn4').addEventListener('click', () => {
    sortAlphabet();
});

// 알파벳 정렬(z~a)
function sortAlphabetZ() {
    cssProperty.sort(function (a, b) {
        if (a.name < b.name) return 1;
        else if (a.name > b.name) return -1;
        else return 0;
    });
    updateList();
}
// 알파벳 정렬 클릭(z~a)
document.querySelector('.btn5').addEventListener('click', () => {
    sortAlphabetZ();
});

// 피셔 에이츠 알고리즘
function shuffle(data) {
    // console.log(data);
    for (let i = data.length - 1; i >= 0; i--) {
        const randomIndex = Math.floor(Math.random() * (i + 1));
        // console.log(randomIndex);
        [data[i], data[randomIndex]] = [data[randomIndex], data[i]]; // 중복된 수가 나오지 않도록 설정
        cssList.innerHTML += data[i];
    }
}
// 랜덤 정렬
document.querySelector('.btn6').addEventListener('click', (e) => {
    e.preventDefault();
    cssList.innerHTML = '';
    shuffle(cssProp);
});

<main id="main">
    <div class="search__wrap">
        <span>
            sort(), reverse()를 이용하여 정렬하기,<br />
            피셔 예이츠 알고리즘 이용하여 정렬하기
        </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>
<!-- //main -->

/* 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: var(--htmlColor);
        font-size: 6vw;
        margin-bottom: 10px;
    }
    
    .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__list li {
        text-align: left;
        line-height: 1.7;
    }
    
    .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-top: 70px;
    }
    
    .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 .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 16px;
    }
    
    .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:hover a {
        background-color: var(--htmlColor);
        color: #fff;
    }
    
    /* media query */
    @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 {
            font-size: 16px;
            padding: 12px 30px;
        }
    }