소스 보기
Javascript
CSS
HTML 
//선택자
const searchBox = document.querySelector(".search__box input");         //검색 영역
const searchList = document.querySelectorAll(".search__list ul li");    //목록 리스트
const searchInfo = document.querySelector(".search__info .num")         //전체 갯수
const searchNum = document.querySelector(".search__info .subnum")       //검색 목록 갯수

let count = 0;

//전체 갯수 구하기
searchInfo.textContent = searchList.length;
searchNum.textContent = searchList.length;

//검색 영역
searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;  //사용자가 입력한 키워드
    searchList.forEach(el => {
        // const cssName = el.dataset.name; //CSS속성 모든 값
        const cssType = el.dataset.type //CSS유형의 모든 값
        const cssName = el.querySelector("strong").innerText; //strong 태그의 값을 가져올 수 있다.
        
        if (cssName.includes(searchWord) || cssType.includes(searchWord)) {
            el.classList.remove("hide");
            count++

        } else {
            el.classList.add("hide");    //indexOf()값이 0(false)이되는 값만 hide를 지워줍니다.
        }
        searchNum.textContent = count; 
    })
    count = 0;
})

:root {
    --htmlColor : #223547;
    --cssColor : #472222;
    --javascriptColor : #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;
}
/* scroll */
::-webkit-scrollbar-track
{
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
    height: 10px;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #282936;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #0f1891a7;

}

/* 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 {
    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 li.show {
    display: block;
}

.search__info {
    text-align: right;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--htmlColor);
}
.search__info {
    text-align: center;
    margin-bottom: 10px;
}
/* keyword box */
.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);
    cursor: pointer;
    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;
    }
}

/* modal__wrap */
.modal__wrap {}
.modal__cont {
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.3);
    position: fixed;
    left: 0;
    top: 0;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
}
.modal__btn {
    color: #000;
    border: 1px solid rgb(177, 12, 12);
    border-radius: 50px;
    display: inline-block;
    padding: 10px 20px;
    position: absolute;
    right: 0px;
    top: 20px;
    cursor: pointer;
    transition: all 0.3s;
}
.modal__btn:hover {
    background-color: rgb(0, 255, 42);
    color: #3B3D63;
}
.modal__box {
    width: 70%;
    height: 70vh;
    margin: 0 auto;
    background-color: #fff;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 20px -5px hsl(180deg 2% 10%);
    transform: scale(0);
  
}
.modal__box .title {
    padding-inline: 1rem;
    background-color: #000007;
    display: flex;
    align-items: center;
    color: #fff;
    height: 50px;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
.modal__box .title .dot {
    width: 15px;
    height: 15px;
    background-color: #fbff00;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    margin-left: 2rem;
}
.modal__box .title .dot::before {
    content: '';
    position: absolute;
    left: 25px;
    top: 0;
    width: 15px;
    height: 15px;
    background-color: #22ff00;
    border-radius: 50%;
}
.modal__box .title .dot::after {
    content: '';
    position: absolute;
    right: 25px;
    top: 0;
    width: 15px;
    height: 15px;
    background-color: rgb(255, 0, 0);
    border-radius: 50%;
}
.modal__box .title .plus {
    background: #282936;
    padding: 0.5rem 0.5rem 0.3rem 0.5rem;
    border-radius: 0.5rem;
    color: #7A7D9D;
}
.modal__box .title .tabs {
    display: flex;
    margin-left: 50px;
}
.modal__box .title .tabs > div {
    color: #7A7D9D;
    background-color: #1f224a;
    padding: 0.35rem 0.8rem 0.25rem 0.8rem;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    border-radius: 0.4rem;
    text-transform: uppercase;
    cursor: grab;
}
.modal__box .title .tabs > div.active {
    background-color: #fff;
}
.modal__box .title .tabs > div em {
    font-style: normal;
}
.modal__box .title .tabs > div .favicon {
    margin-right: 0.4rem;
    margin-top: 0.2rem;
}
.modal__box .title .tabs > div .close {
    margin-left: 4rem;
}
.title .plus {
    border: 1px solid #000;
    padding: 0.4rem;
    border-radius: 10px;
    background-color: #1f224a;
    color: #fff;
}
.modal__box .cont {
    background-color: #282936;
    height: 100%;
    box-sizing: border-box;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    overflow-y: auto;
}
.modal__box .cont > div{ 
    display: none;
}

.modal__box .cont > div.active {
    display: block;
    height: 100%;
}
.modal__close {
    position: absolute;
    right: 100px;
    top: 40px;
    background-color: #1f224a;
    padding: 1rem 1rem 0.8rem 1rem;
    border-radius: 5px;
    box-shadow: 0 3px 5px -5px hsl(180deg 2% 10%);
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0;
}
.modal__close:hover{
    background-color: #13142d7d;
}
.modal__close svg{
    color: #fff;
}

/* 모달 애니메이션 */
.modal__cont.show { /*전체 배경*/
    animation: foldOut 1s ease forwards;
}

.modal__cont.show .modal__box {   /*스크립트 배경*/
    animation: zoomOut 0.5s 1s ease forwards; /*초를 두개써서딜레이를 줄 수 있다*/
}

.modal__cont.show .modal__close {    /* 닫기버튼*/
    animation: closeOut 0.6s 1.5s ease forwards;
}

.modal__cont.show.hide {  
    animation: foldIn 0.3s 0.3s ease backwards; 
}
.modal__cont.show.hide .modal__box{   
    animation: zoomIn 0.5s 1s ease backwards;
}
.modal__cont.show.hide .modal__close {    /* 닫기버튼*/
    animation: closeIn 0.3s 0.6s ease backwards;
    opacity: 1;
}

@keyframes foldOut {
    0% {transform: scaleX(0) scaleY(0.001);}
    50% {transform: scaleX(1) scaleY(0.001);}
    100% {transform: scaleX(1) scaleY(1);}
}
@keyframes closeOut {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes foldIn {
    0% {transform: scaleX(1) scaleY(1);}
    50% {transform: scaleX(1) scaleY(0.001);}
    100% {transform: scaleX(0) scaleY(0.001);}
}
@keyframes zoomOut {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}
@keyframes zoomIn {
    100% {transform: scale(1);}
    0% {transform: scale(0);}
}

@media (max-width: 1100px){
    #header {
        width: 100%;
    }
    .modal__box{
        width: 96%;
    }
    .modal__box .title {
        overflow: hidden;
    }
    .modal__box .title .dot {
        display: none;
    }
    .modal__box .title .tabs {
        margin-left: 0;
    }
    .modal__box .title .tabs > div .close {
        display: none;
    }
}
@media (max-width: 600px){
    #header {
        text-align: center;
    }
    #header h1{
        line-height: 1.4;
    }
    .modal__box{
        width: 96%;
    }
}

/* footer */
#footer {
    text-align: center;
}
#footer a {
    color: #000;
    font-family: 'NexonLv1Gothic';
    padding-bottom: 50px;
}
#footer a:hover {
    text-decoration: underline;
}

 <main id="main">
    <div class="search__wrap">
        <span>includes()를 이용하여 검색하기</span>
        <h1>CSS 속성 검색하기</h1>

        <div class="search__box">
            <label for="search">검색하기</label>
            <input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해주세요!">
        </div>
        <div class="search__info">
            <div class="type">플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요!</div>
            <div>전체 속성 갯수 : <span class="num"></span></div>
            <div>목록 속성 갯수 : <span class="subnum"></span></div>
        </div>
        <div class="search__list">
            <div class="css">
                <ul>
                   (리스트 정보가 들어가도록 되어있음)
                   <li data-name="accent-color" data-type="플렉스"><strong>accent-color</strong> : 특정 요소에 색상을 지정합니다.
                   </li>
                   <li data-name="align-content" data-type="플렉스"><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬
                       상태를 설정합니다.</li>
                   <li data-name="align-items" data-type="플렉스"><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬
                       상태를 설정합니다.</li>
                   <li data-name="align-self" data-type="플렉스"><strong>align-self</strong> : 아이템의 교차축 정렬 정하는 속성 입니다.
                   </li>
                   <li data-name="all" data-type="기타"><strong>all</strong> : 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
                   <li data-name="animation" data-type="애니메이션"><strong>animation</strong> : HTML 요소에 적용되는 CSS 스타일을
                       다른 CSS 스타일로 부드럽게 변화시킵니다.</li>
                </ul>
            </div>
        </div>
    </div>
</main>
includes()를 이용하여 검색하기

CSS 속성 검색하기

플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요!
전체 속성 갯수 :
목록 속성 갯수 :
  • accent-color : 특정 요소에 색상을 지정합니다.
  • align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.
  • align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.
  • align-self : 아이템의 교차축 정렬 정하는 속성 입니다.
  • all : 요소의 속성을 초기화 또는 상속을 설정합니다.
  • animation : HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다.
  • animation-delay : 적용 대기 시간을 지정합니다.
  • animation-direction : 애니메이션의 진행 방향을 설정합니다.
  • animation-duration : 실행된 애니메이션 진행 시간을 지정하는 속성입니다.
  • animation-fill-mode : 애니메이션 실행 이전이나 이후에 애니메이션 효과를 표시할지의 여부를 지정하는 속성입니다.
  • animation-iteration-count : 애니메이션 반복 횟수 설정합니다.
  • animation-name : @keyframes 규칙으로 생성한 애니메애션 이름을 지정하여 해당 애니메이션이 실행되도록 하는 속성입니다.
  • animation-play-state : 애니메이션이 실행 중인지 일시 중지되었는지 지정합니다.
  • animation-timeline : 속성 은 요소에 적용할 스크롤 애니메이션을 설명하는 하나 이상의 @scroll-timeline at-rules 이름을 지정합니다.
  • animation-timing-function : 애니메이션 움직임의 속도 설정 합니다.
  • appearance : 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현합니다.
  • aspect-ratio : 요소의 크기를 비율대로 조정할 수 있게 합니다.
  • backdrop-filter : 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성입니다.
  • backface-visibility : 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다.
  • background : 백그라운드 속성을 일괄적으로 설정합니다.
  • background-attachment : 배경 이미지의 고정 여부를 설정합니다.
  • background-blend-mode : 배경을 혼합했을 때 그래픽 효과를 설정합니다.
  • background-clip : 백그라운드 이미지의 위치 기준점을 설정합니다.
  • background-color : 백그라운드 색을 지정합니다.
  • background-image : 백그라운드 이미지 속성을 설정합니다.
  • background-origin : 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.
  • background-position : 백그라운드 이미지의 위치 영역을 설정합니다.
  • background-position-x : 백그라운드 이미지의 x축 위치 영역을 설정합니다.
  • background-position-y : 백그라운드 이미지의 y축 위치 영역을 설정합니다.
  • background-repeat : 백드라운드 이미지 반복 여부를 설정합니다.
  • background-size : 백그라운드 이미지 사이즈 크기를 설정합니다.
  • block-size : 기록 모드에 따라서, 요소의 블록의 수평과 수직 크기를 정의한다.
  • border : 테두리 속성을 일괄적으로 설정합니다.
  • border-block : 속성 스타일 시트에서 하나의 장소에서 각각의 논리 블록 border 속성 값을 설정합니다.
  • border-block-color : 요소의 쓰기 모드, 방향성, 폰트 방향에 따라 물리적 테두리 색상에 매핑하는 요소의 논리 블록 테두리의 색상을 정의합니다.
  • border-block-end : 속성 스타일 시트에서 하나의 장소에서 각각의 논리 블록 엔드 border 속성 값을 설정합니다.
  • border-block-end-color : 요소의 쓰기 모드, 방향성, 폰트 방향에 따라 물리적 테두리 색상에 매핑하는 요소의 논리 블록 엔드 테두리 색상을 정의합니다.
  • border-block-end-style : 요소의 쓰기 모드, 방향성, 폰트 방향에 따라 물리적 테두리 스타일에 매핑하는 요소의 논리 블록 엔드 국경의 스타일을 정의합니다.
  • border-block-end-width : 요소의 쓰기 모드, 방향성, 폰트 방향에 따라 폭 물리적 경계에 매핑하는 요소의 논리 블록 엔드 테두리 폭을 정의합니다.
  • border-block-start : 스타일 시트에서 하나의 장소에서 각각의 논리 블록 스타트 border 속성 값을 설정합니다.
  • border-block-start-color : 요소의 쓰기 모드, 방향성, 폰트 방향에 따라 물리적 테두리 색상에 매핑하는 요소의 논리 블록 시작 테두리 색상을 정의합니다.
  • border-block-start-style : 요소의 쓰기 모드, 방향성, 폰트 방향에 따라 물리적 테두리 스타일에 매핑하는 요소의 논리 블록 시작 테두리 스타일을 정의합니다.
  • border-block-start-width : 요소의 쓰기 모드, 방향성, 폰트 방향에 따라 폭 물리적 경계에 매핑하는 요소의 논리 블록 시작 테두리 폭을 정의합니다.
  • border-block-style : 요소의 쓰기 모드, 방향성, 폰트 방향에 따라 물리적 테두리 스타일에 매핑하는 요소의 논리 블록 테두리의 스타일을 정의합니다.
  • border-block-width : 요소의 쓰기 모드, 방향성, 폰트 방향에 따라 폭 물리적 경계에 매핑하는 요소의 논리 블록 테두리의 폭을 정의합니다.
  • border-bottom : 테두리 아래쪽 속성을 일괄적으로 설정합니다.
  • border-bottom-color : 테투리 아래쪽 색 속성을 설정합니다.
  • border-bottom-left-radius : 아래 왼쪽 모서리 굴곡을 설정합니다.
  • border-bottom-right-radius : 아래 오른쪽 모서리 굴곡을 설정합니다.
  • border-bottom-style : 테두리 아래쪽 스타일 속성을 설정합니다.
  • border-bottom-width : 테두리 아래쪽 두께 속성을 설정합니다.
  • border-collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다.
  • border-color : 테두리(border)의 색상을 설정합니다.
  • border-end-end-radius : 소의에 따라 물리적 경계 반경에 매핑하는 요소에 논리적 경계 반경 정의 writing-mode , direction , 및 text-orientation . 이것은 폰트 방향 및 쓰기 모드에 관계없이 작업 할 스타일을 작성할 때 유용 합니다.
  • border-end-start-radius : 요소의에 따라 물리적 경계 반경에 매핑하는 요소에 논리적 경계 반경 정의 writing-mode , direction , 및 text-orientation . 이것은 폰트 방향 및 쓰기 모드에 관계없이 작업 할 스타일을 작성할 때 유용 합니다.
  • border-image : 요소의 주위에 이미지를 그립니다.
  • border-image-outset : 요소의 테두리 상자와 테두리 이미지의 거리를 설정합니다.
  • border-image-repeat : 속성은 원본 이미지의 모서리 영역을 요소의 테두리 이미지 크기에 맞춰 조절할 때 사용할 방법을 지정합니다.
  • border-image-slice : 테두리이미지를 잘라줍니다.
  • border-image-source : 테두리 이미지로 사용할 원본 이미지를 지정합니다.
  • border-image-width : 이미지의 테두리 너비를 설정합니다.
  • border-inline : 스타일 시트에서 하나의 장소에서 각각의 논리적 인라인 border 속성 값을 설정합니다.
  • border-inline-color : 인라인 테두리의 색상을 정의합니다.
  • border-inline-end :
  • border-inline-end-color :
  • border-inline-end-style :
  • border-inline-end-width :
  • border-inline-start :
  • border-inline-start-color :
  • border-inline-start-style :
  • border-inline-start-width :
  • border-inline-style :
  • border-inline-width :
  • border-left : 왼쪽 테두리를 일괄 설정합니다.
  • border-left-color : 왼쪽 테두리 색상을 지정합니다.
  • border-left-style : 테두리의 왼쪽 스타일을 지정합니다.
  • border-left-width : 왼쪽 테두리 너비를 지정합니다.
  • border-radius : 테두리를 둥글게 만들어줍니다.
  • border-right : 오른쪽 테두리를 설정합니다.
  • border-right-color : 오른쪽 테두리 색상을 지정합니다.
  • border-right-style : 테두리의 오른쪽 스타일을 지정합니다.
  • border-right-width : 테두리의 오른쪽 너비를 지정합니다.
  • border-spacing : 인접한 셀의 경계 사이의 거리를 설정 합니다.
  • border-start-end-radius :
  • border-start-start-radius :
  • border-style : 테두리의 스타일을 일괄적으로 지정합니다.
  • border-top : 테두리의 위쪽 부분 속성을 한 번에 설정합니다.
  • border-top-color : 테두리의 위쪽 부분 색상을 설정합니다.
  • border-top-left-radius : 테두리의 위쪽 왼쪽 부분 모서리를 둥글게 설정합니다.
  • border-top-right-radius : 테두리의 위쪽 오른쪽 부분 모서리를 둥글게 설정합니다.
  • border-top-style : 테두리의 위쪽 부분 스타일을 설정합니다.
  • border-top-width : 테두리의 위쪽 부분 너비를 설정합니다.
  • border-width : 테두리의 너비를 설정합니다.
  • bottom : 아래에서 시작한 좌표를 지정해줍니다
  • box-decoration-break :
  • box-shadow : 두리를 감싼 그림자 효과를 추가합니다.
  • box-sizing : 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다.
  • break-after :
  • break-before :
  • break-inside :
  • caption-side :
  • caret-color :
  • clear : 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰입니다.
  • clip :
  • clip-path :
  • color : 단어 뜻대로 색상, 정확히는 글자의 색상을 설정합니다.
  • color-scheme :
  • column-count :
  • column-fill :
  • column-gap (grid-column-gap) :
  • column-rule :
  • column-rule-color :
  • column-rule-style :
  • column-rule-width :
  • column-span : 해당 요소가 몇 개의 칼럼을 병합하여 표현할지를 설정합니다.
  • column-width : 다단 구성 시 단의 너비를 지정하는 속성입니다.
  • columns : 다단으로 편집할 수 있습니다.
  • contain :
  • content : 스트나 이미지 등을 화면에 출력시킵니다.
  • content-visibility :
  • counter-increment :
  • counter-reset :
  • counter-set :
  • cursor : 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다.
  • direction : 폰트가 써지는 방향을 설정합니다.
  • display : 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다.
  • empty-cells :
  • filter :
  • flex : 레이아웃 구성을 설정해줍니다.
  • flex-basis :
  • flex-direction : 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.
  • flex-flow :
  • flex-grow :
  • flex-shrink :
  • flex-wrap : 정렬된 요소들의 총 넓이가 부모 넓이 보다 클 때, 이 요소들을 다음 줄에 이어서 정렬 해주는 기능입니다.
  • float : 웹페이지에서 이미지를 어떻게 띄워서 폰트와 함께 배치할 것인가에 대한 속성입니다.
  • font : 글자의 폰트를 정의하는 속성인데, 여러 기능을 동시에 가지고 있는 속성이기도 합니다.
  • font-family : 글꼴을 설정하는 속성입니다.
  • font-feature-settings :
  • font-kerning :
  • font-language-override :
  • font-optical-sizing :
  • font-size : 글자의 크기를 설정합니다.
  • font-size-adjust :
  • font-stretch :
  • font-style : 글자의 스타일을 설정합니다.
  • font-synthesis :
  • font-variant :
  • font-variant-alternates :
  • font-variant-caps :
  • font-variant-east-asian :
  • font-variant-ligatures :
  • font-variant-numeric :
  • font-variant-position :
  • font-variation-settings :
  • font-weight :
  • forced-color-adjust :
  • gap (grid-gap) :
  • grid : Grid의 전체 영역입니다. Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬된다고 생각하면 됩니다.
  • grid-area : 영역(Area) 이름을 설정하거나, grid-row 와 grid-column 의 단축 속성 입니다.
  • grid-auto-columns :
  • grid-auto-flow :
  • grid-auto-rows :
  • grid-column :
  • grid-column-end :
  • grid-column-start :
  • grid-row :
  • grid-row-end :
  • grid-row-start :
  • grid-template : grid-template-xxx의 단축 속성입니다
  • grid-template-areas : 영역(Area) 이름을 참조해 템플릿 생성 해줍니다
  • grid-template-columns : 명시적 열(Track)의 크기를 정의합니다.
  • grid-template-rows : 명시적 행(Track)의 크기를 정의합니다.
  • hanging-punctuation :
  • height : 요소의 높이를 지정합니다.
  • hyphenate-character :
  • hyphens :
  • image-orientation :
  • image-rendering :
  • Experimental image-resolution! :
  • ime-mode :
  • initial-letter! :
  • initial-letter-align! :
  • inline-size :
  • inset :
  • inset-block :
  • inset-block-end :
  • inset-block-start :
  • inset-inline :
  • inset-inline-end :
  • inset-inline-start :
  • isolation :
  • justify-content : 플렉스 요소의 수평 방향 정렬 방식을 설정합니다.
  • justify-items : 수직축을 중심으로 좌우로 위치를 조정하는 속성입니다.
  • justify-self :
  • left : 왼쪽좌표를 지정 해줍니다.
  • letter-spacing : 글자와 글자 사이의 간격을 지정하는 속성입니다.
  • line-break :
  • line-height : 줄간격을 지정하는 속성입니다.
  • line-height-step :
  • list-style : 리스트 모양의 종류를 지정합니다.
  • list-style-image :
  • list-style-position :
  • list-style-type :
  • margin : 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다.
  • margin-block :
  • margin-block-end :
  • margin-block-start :
  • margin-bottom : 아래쪽에 바깥 여백 영역 설정합니다.
  • margin-inline :
  • margin-inline-end :
  • margin-inline-start :
  • margin-left : 왼쪽에 바깥 여백 영역을 설정합니다.
  • margin-right : 오른쪽에 바깥 여백 영역을 설정합니다.
  • margin-top : 위쪽에 바깥 여백 영역을 설정합니다.
  • Experimental margin-trim :
  • mask :
  • mask-border :
  • mask-border-mode :
  • mask-border-outset :
  • mask-border-repeat :
  • mask-border-slice :
  • mask-border-source :
  • mask-border-width :
  • mask-clip :
  • mask-composite :
  • mask-image :
  • mask-mode :
  • mask-origin :
  • mask-position :
  • mask-repeat :
  • mask-size :
  • mask-type :
  • max-block-size :
  • max-height : 높이의 최대값을 설정합니다.
  • max-inline-size :
  • max-width : 너비의 최대값을 설정합니다.
  • min-block-size :
  • min-height : 높이의 최소값을 설정합니다.
  • min-inline-size :
  • min-width : 너비의 최소값을 설정합니다.
  • mix-blend-mode :
  • object-fit : 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.
  • object-position : 대체 요소의 콘텐츠 정렬 방식을 지정합니다. 대체 요소의 객체가 덮지 않은 부분은 요소의 배경이 보이게 됩니다.
  • offset :
  • offset-anchor :
  • offset-distance :
  • offset-path :
  • Experimental offset-position :
  • offset-rotate :
  • opacity : 투명도를 설정합니다.
  • order :
  • orphans :
  • outline :
  • outline-color :
  • outline-offset :
  • outline-style :
  • outline-width :
  • overflow : 소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정합니다.
  • overflow-anchor :
  • overflow-block :
  • overflow-clip-margin :
  • overflow-inline :
  • overflow-wrap :
  • overflow-x :
  • overflow-y :
  • overscroll-behavior :
  • overscroll-behavior-block :
  • overscroll-behavior-inline :
  • overscroll-behavior-x :
  • overscroll-behavior-y :
  • padding : 네 방향 안쪽 여백 영역을 설정합니다.
  • padding-block-end :
  • padding-block-start :
  • padding-bottom : 아래 안쪽 여백 영역을 설정합니다.
  • padding-inline-end :
  • padding-inline-start :
  • padding-left : 왼쪽 안쪽 여백 영역을 설정합니다.
  • padding-right : 오른쪽 안쪽 여백 영역을 설정합니다.
  • padding-top : 위쪽 안쪽 여백 영역을 설정합니다.
  • page-break-after :
  • page-break-before :
  • page-break-inside :
  • perspective :
  • perspective-origin :
  • place-content :
  • place-items :
  • place-self :
  • pointer-events :
  • position : HTML 문서 상에서 요소가 배치되는 방식을 결정합니다.
  • print-color-adjust :
  • quotes :
  • resize : 사용자가 해당 요소의 높이나 너비를 변경할 수 있게 해줍니다.
  • right : 오른쪽 좌표를 지정해줍니다.
  • rotate : 요소를 회전합니다.
  • row-gap (grid-row-gap) :
  • ruby-align :
  • ruby-position :
  • scale : 요소를 확대합니다.
  • scroll-behavior :
  • scroll-margin :
  • scroll-margin-block :
  • scroll-margin-block-end :
  • scroll-margin-block-start :
  • scroll-margin-bottom :
  • scroll-margin-inline :
  • scroll-margin-inline-end :
  • scroll-margin-inline-start :
  • scroll-margin-left :
  • scroll-margin-right :
  • scroll-margin-top :
  • scroll-padding :
  • scroll-padding-block :
  • scroll-padding-block-end :
  • scroll-padding-block-start :
  • scroll-padding-bottom :
  • scroll-padding-inline :
  • scroll-padding-inline-end :
  • scroll-padding-inline-start :
  • scroll-padding-left :
  • scroll-padding-right :
  • scroll-padding-top :
  • scroll-snap-align :
  • scroll-snap-coordinate :
  • scroll-snap-destination :
  • scroll-snap-points-x :
  • scroll-snap-points-y :
  • scroll-snap-stop :
  • scroll-snap-type :
  • scrollbar-color :
  • scrollbar-width :
  • shape-image-threshold :
  • shape-margin :
  • shape-outside :
  • tab-size :
  • table-layout :
  • text-align : 스트의 정렬 방향을 의미합니다.
  • text-align-last :
  • text-combine-upright :
  • text-decoration : 폰트에 장식용 선을 추가합니다.
  • text-decoration-color : 폰트에 장식용 선의 색상을 지정합니다.
  • text-decoration-line :
  • Experimental text-decoration-skip :
  • text-decoration-skip-ink :
  • text-decoration-style :
  • text-emphasis :
  • text-emphasis-color :
  • text-emphasis-position :
  • text-emphasis-style :
  • text-indent :
  • text-justify :
  • text-orientation :
  • text-overflow :
  • text-rendering :
  • text-shadow :
  • Experimental text-size-adjust :
  • text-transform :
  • text-underline-position :
  • top :
  • touch-action :
  • transform : 웹요소의 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 강력한 기능입니다.
  • transform-box :
  • transform-origin :
  • transform-style :
  • transition : 서서히 변화시키는 속성입니다.
  • transition-delay :
  • transition-duration :
  • transition-property :
  • transition-timing-function :
  • translate : 이동 효과를 담당합니다.
  • unicode-bidi :
  • user-select :
  • vertical-align :
  • visibility :
  • white-space : 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다.
  • widows :
  • width :
  • will-change :
  • word-break :
  • word-spacing :
  • writing-mode :
  • z-index : 배치 순서 결정해줍니다.