티스토리 뷰
const cssProperty = [
{num: 1, name:"all", desc: "CSS 속성을 재설정하는데 사용하는 약식 속성이다"},
{num: 2, name:"animation", desc: "애니메이션 속성을 설정하기 위한 통합 속성이다"},
{num: 3, name:"animation-delay", desc: "애니메이션이 시작되는 시간을 설정한다"},
{num: 4, name:"animation-direction", desc: "애니메이션이 움직이는 방향을 설정한다"},
{num: 5, name:"animation-fill-mode", desc: "애니메이션이 실행 중인 시간 외에 적용되는 값을 정의한다"},
{num: 6, name:"animation-iteration-count", desc: "애니메이션이 중지되기 전에 애니메이션의 주기가 재생되는 횟수를 지정하는 데 사용된다"},
{num: 7, name:"animation-name", desc: "키프레임 규칙에 의해 정의된 하나 이상의 애니메이션 이름을 지정하는 데 사용되며 선택한 요소에 적용된다"},
{num: 8, name:"animation-play-state", desc: "CSS 애니메이션이 실행 중인지 일시 중지되었는지 지정한다"},
{num: 9, name:"animation-timing-function", desc: "애니메이션 효과(동작)의 시간당 속도를 설정한다"},
{num: 10, name:"appearance", desc: "브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현한다"},
{num: 11, name:"background", desc: "텍스트 색상, 위치, 반복 여부, 위치 ,크기등을 설정한다"},
{num: 12, name:"background-attachment", desc: "배경 이미지의 스크롤 여부를 설정한다"},
{num: 13, name:"backdrop-filter", desc: "CSS를 사용하여 요소 뒤의 콘텐츠에 필터 효과를 적용할 수 있다"},
{num: 14, name:"backface-visibility", desc: "뷰어를 향할 때 변형된 요소의 뒷면이 보이는지 여부를 결정한다"},
{num: 15, name:"background-blend-mode", desc: "요소들이 겹칠 경우 색상이 어떻게 나타나야 하는지를 설정한다"},
{num: 16, name:"background-clip", desc: "요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어느 범위까지 크기가 확대될지를 설정한다"},
{num:"10", name:"background-color", desc: "요소의 배경 색을 지정한다"},
{num:"10", name:"background-origin", desc: "배경 이미지를 어느 범위부터 채워 나갈지를 설정한다"},
{num:"10", name:"background-position", desc: "배경의 위치를 설정한다"},
{num:"10", name:"background-repeat", desc: "배경 이미지의 반복 여부와 반복 방향을 설정한다"},
{num:"10", name:"background-size", desc: "배경 이미지의 크기를 설정한다"},
{num:"10", name:"border", desc: "요소의 테두리를 설정한다 width, style, color 순서로 값을 대입한다"},
{num:"10", name:"border-bottom", desc: "요소의 아래쪽 테두리를 설정한다"},
{num:"10", name:"border-bottom-color", desc: "요소의 아래쪽 테두리의 색상을 설정한다"},
{num:"10", name:"border-bottom-left-radius", desc: "요소의 왼쪽 테두리의 경계를 둥근 모양으로 변경한다"},
{num:"10", name:"border-bottom-right-radius", desc: "요소의 오른쪽 테두리의 경계를 둥근 모양으로 변경한다"},
{num:"10", name:"border-bottom-style", desc: "border-bottom 속성과 마찬가지로 요소의 아래쪽 테두리를 설정한다"},
{num:"10", name:"border-bottom-width", desc: "요소의 아래 테두리의 너비를 설정한다"},
{num:"10", name:"border-collapse", desc: "셀의 테두리 간격을 벌리거나 줄인다"},
{num:"10", name:"border-color", desc: "요소의 모든 테두리의 색상을 설정한다"},
{num:"10", name:"border-image", desc: "테두리 주변에 테두리 대신 이미지를 추가한다"},
{num:"10", name:"border-image-outset", desc: "바깥 테두리와 바깥 이미지 사이의 거리를 설정한다"},
{num:"10", name:"border-image-repeat", desc: "바깥 테두리와 바깥 이미지 사이의 거리를 설정한다"},
{num:"10", name:"border-image-slice", desc: "테두리의 이미지를 어떻게 잘라낼지를 설정한다"},
{num:"10", name:"border-image-source", desc: "요소 주변의 테두리에 이미지를 설정한다"},
{num:"10", name:"caption-side", desc: "caption의 위치를 설정한다"},
{num:"10", name:"caret-color", desc: "input의 커서 색을 정의한다"},
{num:"10", name:"clear", desc: "float 요소의 성질을 차단합니다."},
{num:"10", name:"clip", desc: "보이는 영역을 설정한다"},
{num:"10", name:"color", desc: "글씨 색을 설정한다"},
{num:"10", name:"column-count", desc: "컬럼의 수를 정의한다"},
{num:"10", name:"column-fill", desc: "열의 지정방법을 정의한다"},
{num:"10", name:"column-gap", desc: "컬럼의 간격을 정의한다"},
{num:"10", name:"column-rule", desc: "컬럼 라인의 가로값, 스타일, 컬러를 정의한다"},
{num:"10", name:"column-rule-color", desc: "컬럼의 라인 색을 정의한다"},
{num:"23", name:"column-rule-style", desc: "컬럼 라인의 스타일을 정의한다"},
{num:"12", name:"column-rule-width", desc: "컬럼 라인의 가로값을 정의한다"},
{num:"23", name:"column-span", desc: "열의 속성을 정의한다"},
{num:"40", name:"column-width", desc: "컬럼의 가로 값을 정의한다"},
{num:"23", name:"columns", desc: "컬럼의 열의 폭과 열의 수를 정의한다"},
{num:"11", name:"content", desc: "콘텐츠 내용을 설정한다"},
{num:"20", name:"counter-increment", desc: "콘텐츠의 순서 상태를 정의한다"},
{num:"10", name:"counter-reset", desc: "콘텐츠의 숫자를 초기화합니다."},
{num:"01", name:"cursor", desc: "마우스 오버시 마우스 포인터를 정의한다"},
{num:"02", name:"direction", desc: "문장의 방향을 설정한다"},
{num:"03", name:"display", desc: "해당 요소를 어떻게 보여줄지를 지정할수있습니다."},
{num:"10", name:"empty-cells", desc: "테이블의 빈요소의 속성을 설정한다"},
{num:"18", name:"filter", desc: "그래픽 효과를 설정한다"},
{num:"20", name:"flex", desc: "콘텐츠의 성질을 flex로 정의한다"},
{num:"10", name:"flex-basis", desc: "요소의 기본 단위를 정의한다"},
{num:"10", name:"flex-direction", desc: "요소의 정렬 방향을 정의한다"},
{num:"09", name:"flex-flow", desc: "요소의 정렬 방향 flex-direction와 줄 속성 flex-wrap을 같이 설정한다"},
{num:"10", name:"flex-grow", desc: "요소의 크기를 숫자를 통해 정의한다"},
{num:"38", name:"flex-shrink", desc: "요소의 크기를 숫자를 통해 줄여줍니다."},
{num:"32", name:"flex-wrap", desc: "요소의 줄 속성을 설정한다"},
{num:"13", name:"float", desc: "블록요소의 정렬 상태를 설정한다"},
{num:"33", name:"font", desc: "폰트에 관한 설정을 정의한다"},
{num:"10", name:"font-family", desc: "폰트 종류를 설정한다"},
{num:"10", name:"font-size", desc: "폰트의 크기를 조절할수 있습니다."},
{num:"19", name:"font-size-adjust", desc: "소문자를 기준으로 폰트 크기를 설정한다"},
{num:"11", name:"font-stretch", desc: "폰트의 굵기를 정의한다"},
{num:"12", name:"font-style", desc: "폰트의 스타일을 정의한다"},
{num:"10", name:"font-variant", desc: "글꼴의 변형을 정의한다"},
{num:"23", name:"font-weight", desc: "폰트의 가중치나 굵기를 명시할수있다."},
{num:"23", name:"grid", desc: "flex와 달리 가로세로(2방향)설정이 가능한 2차원 레이아웃 시스템입니다."},
{num:"27", name:"grid-area", desc: "영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성"},
{num:"10", name:"grid-auto-columns", desc: "암시적인 열(Track)의 크기를 정의"},
{num:"12", name:"grid-auto-flow", desc: "자동 배치 알고리즘 방식을 정의"},
{num:"10", name:"grid-auto-rows", desc: "암시적인 행(Track)의 크기를 정의"},
{num:"10", name:"grid-column", desc: "grid-column-xxx의 단축 속성(열 시작/끝 위치)"},
{num:"10", name:"grid-column-end", desc: "그리드 아이템의 열 끝 위치 지정"},
{num:"10", name:"grid-column-gap", desc: "열과 열 사이의 간격(Line)을 정의"},
{num:"10", name:"grid-column-start", desc: "그리드 아이템의 열 시작 위치 지정"},
{num:"01", name:"grid-gap", desc: "행과 열 사이의 간격을 설정한다"},
{num:"10", name:"grid-row", desc: "grid-row-xxx의 단축 속성(행 시작/끝 위치)"},
{num:"10", name:"grid-row-end", desc: "그리드 아이템의 행 끝 위치 지정"},
{num:"40", name:"grid-row-gap", desc: "행과 행 사이의 간격(Line)을 정의"},
{num:"08", name:"grid-row-start", desc: "그리드 아이템(Item)의 행 시작 위치 지정"},
{num:"12", name:"grid-template", desc: "grid-template-xxx의 단축 속성"},
{num:"11", name:"grid-template-areas", desc: "영역(Area) 이름을 참조해 템플릿 생성"},
{num:"13", name:"grid-template-columns", desc: "명시적 열(Track)의 크기를 정의"},
{num:"30", name:"grid-template-rows", desc: "명시적 행(Track)의 크기를 정의"},
{num:"23", name:"hanging-punctuation", desc: "글씨의 시작 및 끝의 위치 정의한다"},
{num:"23", name:"height", desc: "콘텐츠 요소의 세로값을 설정한다"},
{num:"37", name:"hyphens", desc: "텍스트의 하이픈 영역을 설정한다"},
{num:"12", name:"isolation", desc: "stacking context을 설정한다"},
{num:"10", name:"left", desc: "위치 요소의 왼쪽 속성을 설정한다"},
{num:"10", name:"letter-spacing", desc: "글자 사이의 간격을 설정한다"},
{num:"23", name:"line-height", desc: "문장과 문장 사이의 간격을 설정한다"},
{num:"23", name:"list-style", desc: "목록 스타일 속성을 설정한다"},
{num:"10", name:"list-style-image", desc: "목록 마커의 이미지를 설정한다"},
{num:"40", name:"list-style-position", desc: "목록 마커의 위치 속성을 설정한다"},
{num:"10", name:"list-style-type", desc: "목록 마커의 유형을 설정한다"},
{num:"22", name:"margin", desc: "요소의 네 방향 바깥 여백 영역을 설정한다"},
{num:"30", name:"margin-bottom", desc: "요소의 아래쪽에 바깥 여백 영역을 설정한다"},
{num:"20", name:"margin-left", desc: "요소의 왼쪽에 바깥 여백 영역을 설정한다"},
{num:"12", name:"margin-right", desc: "요소의 오른쪽에 바깥 여백 영역을 설정한다"},
{num:"40", name:"margin-top", desc: "요소의 위쪽에 바깥 여백 영역을 설정한다"},
{num:"30", name:"mask", desc: "아이템이 부분적으로만 보여지게 하거나 혹은 완전히 가려서 보여지지 않게 할 수 있는 기능을 가지고 있습니다. 이 마스킹 혹은 특정한 점을 기준으로 이미지를 잘라내는 기능을 함께 제공합니다."},
{num:"20", name:"mask-border", desc: "요소의 경계의 가장자리를 따라 마스크를 만들 수 있습니다."},
{num:"10", name:"mask-border-mode", desc: "마스크 테두리에 사용되는 혼합(blending) 모드를 지정한다"},
{num:"30", name:"mask-border-outset", desc: "요소의 마스크 테두리가 테두리 상자에서 설정되는 거리를 지정한다"},
{num:"40", name:"mask-border-repeat", desc: "소스 이미지의 가장자리 영역이 요소의 마스크 테두리 크기에 맞게 조정되는 방식을 설정한다"},
{num:"50", name:"mask-border-slice", desc: "mask-border-source로 설정된 이미지를 영역으로 나눕니다. 이 영역은 요소의 마스크 테두리 구성 요소를 형성하는 데 사용됩니다."},
{num:"10", name:"mask-border-source", desc: "요소의 마스크 테두리를 만드는 데 사용되는 소스 이미지를 설정한다"},
{num:"10", name:"mask-border-width", desc: "요소의 마스크 테두리 너비를 설정한다"},
{num:"10", name:"mask-clip", desc: "마스크의 영향을 받는 영역을 결정합니다. 요소의 칠해진 콘텐츠는 이 영역으로 제한되어야 합니다."},
{num:"15", name:"mask-composite", desc: "현재 마스크 레이어 아래에 마스크 레이어가 있는 합성 작업을 나타냅니다."},
{num:"35", name:"mask-image", desc: "요소를 url에 지정된 이미지 만큼만 보이게 처리합니다."},
{num:"25", name:"mask-mode", desc: "mask-image에 의해 정의된 마스크 참조가 광도 또는 알파 마스크로 처리되는지 여부를 설정한다"},
{num:"10", name:"mask-origin", desc: "마스크의 원점을 설정한다"},
{num:"15", name:"mask-position", desc: "background-position처럼 마스크에 보일 요소위치를 지정한다"},
{num:"45", name:"mask-repeat", desc: "마스크 이미지가 반복되는 방식을 설정한다 마스크 이미지는 가로축, 세로축, 양축을 따라 반복하거나, 반복하지 않을 수 있습니다."},
{num:"10", name:"mask-size", desc: "background-size처럼 보일 요소의 크기를 지정한다"},
{num:"10", name:"mask-type", desc: "요소를 밝기 또는 알파 마스크로 사용할지 여부를 설정한다 mask 요소 자체에 적용됩니다."},
{num:"30", name:"max-height", desc: "요소의 최대 세로값을 설정한다"},
{num:"20", name:"max-width", desc: "요소의 최대 가로 값을 설정한다"},
{num:"34", name:"min-height", desc: "요소의 최소 세로 값을 설정한다"},
{num:"10", name:"min-width", desc: "요소의 최소 가로 값을 설정한다"},
{num:"20", name:"mix-blend-mode", desc: "배경의 혼합 상태를 정의한다"},
{num:"34", name:"object-fit", desc: "대체되는 요소의 내용(<img>, <video>, <object>, <svg> 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다."},
{num:"10", name:"object-position", desc: "기본적으로 요소의 가운데로 화상을 이동시킨다. 이 위치를 원하는 값으로 변경한다."},
{num:"10", name:"opacity", desc: "요소의 투명도를 제어하는데 사용됩니다."},
{num:"12", name:"orphans", desc: "페이지, 영역 또는 열의 맨 아래에 표시되어야 하는 블록 컨테이너의 최소 줄 수를 설정한다"},
{num:"10", name:"outline", desc: "요소 주위에 윤곽선을 그리는 데 사용됩니다."},
{num:"10", name:"outline-color", desc: "요소의 윤곽선 색상을 설정하는 데 사용됩니다."},
{num:"43", name:"outline-offset", desc: "요소 윤곽선의 가장자리 또는 테두리 사이의 간격을 설정한다"},
{num:"10", name:"outline-style", desc: "요소의 윤곽선 스타일을 설정하는 데 사용됩니다."},
{num:"01", name:"outline-width", desc: "요소의 윤곽선 너비를 설정하는 데 사용됩니다."},
{num:"10", name:"overflow", desc: "요소의 경계를 넘은 콘텐츠를 표시할지 여부를 지정한다"},
{num:"10", name:"overflow-x", desc: "요소의 콘텐츠를 표시할지, 잘릴지(숨겨야 하는지) 또는 콘텐츠가 요소의 왼쪽 및 오른쪽 가장자리를 넘을 때 수평 스크롤 막대를 추가할지 여부를 지정하는 데 사용됩니다."},
{num:"10", name:"overflow-y", desc: "요소의 콘텐츠를 표시할지, 잘릴지(숨겨야 하는지) 또는 콘텐츠가 요소의 위쪽 및 아래쪽 가장자리를 넘을 때 세로 스크롤 막대를 추가할지 여부를 지정하는 데 사용됩니다."},
{num:"10", name:"padding", desc: "한 번에 요소의 네 면에 패딩 영역(내용(content)과 테두리(border) 사이의 간격)을 설정한다"},
{num:"04", name:"padding-bottom", desc: "요소의 아래쪽 패딩 영역(내용(content)과 테두리(border) 사이의 간격)을 설정"},
{num:"10", name:"padding-left", desc: "요소의 왼쪽 패딩 영역(내용(content)과 테두리(border) 사이의 간격)을 설정"},
{num:"12", name:"padding-right", desc: "요소의 오른쪽 패딩 영역(내용(content)과 테두리(border) 사이의 간격)을 설정"},
{num:"10", name:"padding-top", desc: "요소의 위쪽 패딩 영역(내용(content)과 테두리(border) 사이의 간격)을 설정"},
{num:"10", name:"page-break-after", desc: "페이지 인쇄시 적용된 요소 뒤부터 페이지 분리에 관한 설정을 정의한다"},
{num:"23", name:"page-break-before", desc: "페이지 인쇄시 적용된 요소 앞부터 페이지 분리에 관한 설정을 정의한다"},
{num:"40", name:"page-break-inside", desc: "요소 내부에서 페이지 넘김을 지정합니다"},
{num:"10", name:"perspective", desc: "3차원 공간을 활성화하여 해당 요소의 자식이 해당 공간에 배치될 수 있도록 하는 데 사용됩니다."},
{num:"12", name:"perspective-origin", desc: "뷰어가 3차원 공간을 바라보는 위치를 선택하는 데 사용됩니다."},
{num:"32", name:"pointer-events", desc: "특정 그래픽 요소가 포인터 이벤트의 대상이 될 수 있는 조건을 제어하는 데 사용됩니다 ."},
{num:"31", name:"position", desc: "페이지에서 요소의 위치를 설정하는 데 사용됩니다 ."},
{num:"10", name:"quotes", desc: "속성을 사용하여 삽입할 때 사용할 따옴표를 지정하는 데 사용됩니다"},
{num:"11", name:"resize", desc: "사용자가 요소의 크기를 조정할 수 있는지 여부와 가능한 경우 방향을 지정할 수 있습니다."},
{num:"10", name:"right", desc: "위치 지정 요소의 오른쪽 오프셋을 지정하는 데 사용되는 오프셋 속성입니다 ."},
{num:"13", name:"shape-image-threshold", desc: "css모양 외부에 이미지를 사용할 때 모양을 추출하는 데 사용되는 알파 채널의 임계값을 설정하는 데 사용됩니다."},
{num:"13", name:"shape-margin", desc: "css모양에 여백을 추가하는 데 사용됩니다."},
{num:"10", name:"shape-outside", desc: "float된 요소의 경계를 감싸는 방식을 제어하는 데 사용됩니다."},
{num:"13", name:"tab-size", desc: "페이지에 표시되는 탭 문자의 너비를 결정하는 데 사용됩니다."},
{num:"16", name:"table-layout", desc: "테이블 열, 행 및 셀의 레이아웃을 지정한다"},
{num:"20", name:"text-align", desc: "블록 요소 내부의 인라인 요소가 정렬되는 방식을 제어하는 데 사용됩니다."},
{num:"31", name:"text-align-last", desc: "강제 줄 바꿈 직전의 블록이나 줄의 마지막 줄을 정렬하는 방법을 설정하는 데 사용됩니다."},
{num:"12", name:"text-decoration", desc: "텍스트 위, 텍스트 아래 또는 텍스트 위에 선 형태로 장식을 추가하거나 기존 장식을 제거하는 데 사용됩니다."},
{num:"19", name:"text-decoration-color", desc: "요소에 설정된 텍스트 장식(밑줄, 윗줄 및 선 통과)의 색상을 지정합니다"},
{num:"11", name:"text-decoration-line", desc: "글자 라인 스타일을 설정한다"},
{num:"13", name:"text-decoration-style", desc: "text-decoration-line이 있는 요소에 설정된 선(밑줄, 윗줄 및 선 통과)의 스타일을 설정한다"},
{num:"13", name:"text-indent", desc: "텍스트를 담고있는 블록 컨테이너에 적용되며 문단의 첫줄을 들여쓰기 할 때 사용합니다."},
{num:"35", name:"text-justify", desc: "텍스트의 간격을 정의한다"},
{num:"35", name:"text-orientation", desc: "콘텐츠 줄 내에서 문자의 방향을 설정한다"},
{num:"35", name:"text-overflow", desc: "박스 안에 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성입니다."},
{num:"12", name:"text-rendering", desc: "텍스트를 렌더링할 때 최적화할 항목을 선택할 수 있는 속성입니다."},
{num:"12", name:"text-shadow", desc: "텍스트에 그림자를 추가할 때 설정한다"},
{num:"22", name:"text-transform", desc: "대문자로 또는 소문자로 바꾸는 속성입니다."},
{num:"23", name:"top", desc: "각 옵션 속성들의 부모 태그를 기준으로 수직으로 위치를 설정한다"},
{num:"16", name:"touch-action", desc: "어떤 요소 내에서 브라우저가 처리할 터치 액션의 목록을 설정한다"},
{num:"38", name:"transform", desc: "요소에 회전, 크기 조절, 기울이기, 이동 효과를 설정한다"},
{num:"12", name:"transform-origin", desc: "transform 속성과 함께 사용되는 속성으로, 회전 중심(원점·기준점)을 설정한다"},
{num:"23", name:"transform-style", desc: "자식 요소를 3D 공간에 배치하거나 2D 평면에 평평하게 배치 할지 설정한다"},
{num:"33", name:"transition", desc: "특정 조건 하에서 변화하는 과정을 애니메이션으로 보여주고자 할 때 설정한다"},
{num:"38", name:"transition-delay", desc: "프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 설정한다"},
{num:"38", name:"transition-duration", desc: "애니메이션 소요 시간을 설정한다"},
{num:"07", name:"transition-property", desc: "transition의 적용 여부를 정의한다"},
{num:"02", name:"transition-timing-function", desc: "요소의 움직임 기능을 정의한다"},
{num:"12", name:"unicode-bidi", desc: "글자의 방향 속성을 설정한다"},
{num:"23", name:"vertical-align", desc: "텍스트의 상하 정렬 방식을 설정한다"},
{num:"12", name:"visibility", desc: "요소를 보이지 않게 정의한다"},
{num:"23", name:"white-space", desc: "줄바꿈, 공백, 줄 속성을 설정한다"},
{num:"24", name:"widows", desc: "CSS 페이지, 영역 또는 열의 맨 위에 표시되어야 하는 블록 컨테이너의 최소 줄 수를 설정한다"},
{num:"23", name:"width", desc: "요소의 가로 값을 정의한다"},
{num:"38", name:"will-change", desc: "값이 변경될 속성에 대한 힌트를 미리 지정한다"},
{num:"21", name:"word-break", desc: "줄바꿈 속성을 설정한다"},
{num:"22", name:"word-spacing", desc: "단어 사이의 간격을 정의한다"},
{num:"12", name:"word-wrap", desc: "줄바꿈을 설정한다"},
{num:"23", name:"writing-mode", desc: "텍스트의 방향(가로/세로)를 설정한다"},
{num:"07", name:"z-index", desc: "요소의 위치가 겹칠 경우 순서를 정의한다"}
];
const searchBox = document.querySelectorAll(".search span"); // 버튼
const cssList = document.querySelector(".list ul"); // 속성 목록
const cssCount = document.querySelector(".count"); // 속성 개수
// 데이터 출력
const updateList = function() { // css 속성 목록 업데이트 함수
let listHTML = ''; // 웹페이지에 나타날 속성 목록에 대한 변수
cssProperty.forEach(data => {
listHTML += `${data.num}. ${data.name} : ${data.desc} `; // 속성 번호, 이름, 설명을 li 태그로 하나씩 추가
});
cssList.innerHTML = listHTML; // 추가한 값을 css 목록에 저장
cssCount.innerHTML = `전체 목록 개수 : ${cssProperty.length}`; // 목록 개수를 출력
}
updateList(); // 함수 실행
//반대로 정렬
function reverse() {
cssProperty.reverse();
updateList();
}
// 오름차순 정렬
function sortAscending() {
cssProperty.sort((a, b) => {
return a.num - b.num;
});
updateList();
}
// 내림차순 정렬
function sortDesending() {
cssProperty.sort((a, b) => {
return b.num - a.num;
});
updateList();
}
// 알파벳 정렬(a부터 z)
function sortAlplabet() {
cssProperty.sort((a, b) => {
let value1 = a.name;
let value2 = b.name;
return value1.localeCompare(value2);
});
updateList();
}
// 알파벳 정렬(z부터 a)
function sortAlplabetZ() {
cssProperty.sort((a, b) => {
let value1 = a.name;
let value2 = b.name;
return value2.localeCompare(value1);
});
updateList();
}
// 오름차순 버튼 클릭시
document.querySelector(".btn1").addEventListener("click", () => {
sortAscending();
});
// 내림차순 버튼 클릭시
document.querySelector(".btn2").addEventListener("click", () => {
sortDesending();
});
// 알파벳 버튼 클릭시
document.querySelector(".btn3").addEventListener("click", () => {
sortAlplabet();
});
document.querySelector(".btn4").addEventListener("click", () => {
sortAlplabetZ();
});
// 반대로
document.querySelector(".btn5").addEventListener("click", () => {
reverse();
});
'Script Sample > Search Effect' 카테고리의 다른 글
| searchEffect05 - filter() (0) | 2022.02.15 |
|---|---|
| searchEffect04 - find() (0) | 2022.02.08 |
| searchEffect03 - charAt() (0) | 2022.02.08 |
| searchEffect02 - includes() (1) | 2022.02.07 |
| searchEffect01 - IndexOf() (2) | 2022.02.07 |
UP NEXT : Script Sample/Search Effect
댓글
© 2018 webstoryboy