728x90
오늘은 위와 같은 서치 이펙트를 만들어 보려고 합니다.
만들기 전에 먼저 개념을 설명하고 넘어가겠습니다!
Search Effect란?
웹 사이트나 애플리케이션에서 검색 기능을 개선하기 위해 사용되는 기술 중 하나입니다.
일반적으로 검색어와 일치하는 결과를 실시간으로 보여주는 것을 말합니다.
전체 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>검색 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/search.css">
</head>
<body class="pink">
<header id="header">
<ul>
<li class="active"><a href="mouseEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li><a href="mouseEffect03.html">3</a></li>
<li><a href="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
<li><a href="mouseEffect05.html">6</a></li>
</ul>
</header>
<!--// header-->
<main id="main">
<div class="search__wrap">
<div class="search__header">
<h2 class="title">🤭자바스크립트</h2>
</div>
<div class="serch__contents">
<hgroup>
<h3>CSS 속성 검색하기</h3>
<h4>indexOf() / search()</h4>
</hgroup>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" name="search" id="search" placeholder="CSS 속성을 입력해주세요!">
</div>
<div class="search__info">
<div>
CSS 속성 갯수 : <span>0</span>개
</div>
</div>
<div class="search__list">
<ul>
<li data-name="align-content"><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
<li data-name="align-items"><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
<li data-name="align-self"><strong>align-self</strong> : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.</li>
<li data-name="all"><strong>all</strong> : 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
<li data-name="animation"><strong>animation</strong> : 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
<li data-name="animation-delay"><strong>animation-delay</strong> : 애니메이션 지연 시간을 설정합니다.</li>
<li data-name="animation-direction"><strong>animation-direction</strong> : 애니메이션 움직임 방향을 설정합니다.</li>
<li data-name="animation-duration"><strong>animation-duration</strong> : 애니메이션 움직임 시간을 설정합니다.</li>
<li data-name="animation-fill-mode"><strong>animation-fill-mode</strong> : 애니메이션이 끝난 후의 상태를 설정합니다.</li>
<li data-name="animation-iteration-count"><strong>animation-iteration-count</strong> : 애니메이션 반복 횟수 설정합니다.</li>
<li data-name="animation-name"><strong>animation-name</strong> : 애니메이션 keyframe 이름을 설정합니다.</li>
<li data-name="animation-play-state"><strong>animation-play-state</strong> : 애니메이션 진행상태를 설정합니다.</li>
<li data-name="animation-timing-function"><strong>animation-timing-function</strong> : 애니메이션 움직임의 속도를 설정합니다.</li>
<li data-name="backdrop-filter"><strong>backdrop-filter</strong> : 배경에 그래픽 효과를 설정합니다.</li>
<li data-name="backface-visibility"><strong>backface-visibility</strong> : 요소의 뒷면을 설정합니다.</li>
<li data-name="background-attachment"><strong>background-attachment</strong> : 배경 이미지의 고정 여부를 설정합니다.</li>
<li data-name="background-blend-mode"><strong>background-blend-mode</strong> : 배경을 혼합했을 때의 상태를 설정합니다.</li>
<li data-name="background-clip"><strong>background-clip</strong> : 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
<li data-name="background-color"><strong>background-color</strong> : 백그라운드 색을 설정합니다.</li>
<li data-name="background-image"><strong>background-image</strong> : 백그라운드 이미지 및 배경 속성을 설정합니다.</li>
<li data-name="background-origin"><strong>background-origin</strong> : 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
<li data-name="background-position"><strong>background-position</strong> : 백그라운드 이미지의 위치 영역을 설정합니다.</li>
<li data-name="background-repeat"><strong>background-repeat</strong> : 백그라운드 이미지 반복 여부를 설정합니다.</li>
<li data-name="background-size"><strong>background-size</strong> : 백그라운드 이미지 사이즈를 설정합니다.</li>
<li data-name="background"><strong>background</strong> : 백그라운드 속성을 일괄적으로 설정합니다.</li>
<li data-name="border"><strong>border</strong> : 테두리 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-bottom"><strong>border-bottom</strong> : 테두리 아래쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-bottom-color"><strong>border-bottom-color</strong> : 테두리 아래쪽 색 속성을 설정합니다.</li>
<li data-name="border-bottom-left-radius"><strong>border-bottom-left-radius</strong> : 아래부분 왼쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-bottom-right-radius"><strong>border-bottom-right-radius</strong> : 아래부분 오른쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-bottom-style"><strong>border-bottom-style</strong> : 테두리 아래쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-bottom-width"><strong>border-bottom-width</strong> : 테두리 아래쪽 두께 속성을 설정합니다.</li>
<li data-name="border-collapse"><strong>border-collapse</strong> : 테이블의 테두리 분리 여부를 설정합니다.</li>
<li data-name="border-color"><strong>border-color</strong> : 테두리 색 속성을 설정합니다.</li>
<li data-name="border-image"><strong>border-image</strong> : 테두리 이미지 속성을 설정합니다.</li>
<li data-name="border-image-outset"><strong>border-image-outset</strong> : 테두리 이미지 간격 속성을 설정합니다.</li>
<li data-name="border-image-repeat"><strong>border-image-repeat</strong> : 테두리 이미지 반복 속성을 설정합니다.</li>
<li data-name="border-image-slice"><strong>border-image-slice</strong> : 테두리 이미지 크기 속성을 설정합니다.</li>
<li data-name="border-image-source"><strong>border-image-source</strong> : 테두리 이미지 경로 속성을 설정합니다.</li>
<li data-name="border-image-width"><strong>border-image-width</strong> : 테두리 이미지 두께 속성을 설정합니다.</li>
<li data-name="border-left"><strong>border-left</strong> : 테두리 왼쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-left-color"><strong>border-left-color</strong> : 테두리 왼쪽 색 속성을 설정합니다.</li>
<li data-name="border-left-style"><strong>border-left-style</strong> : 테두리 왼쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-left-width"><strong>border-left-width</strong> : 테두리 왼쪽 두께 속성을 설정합니다.</li>
<li data-name="border-radius"><strong>border-radius</strong> : 모서리 굴곡을 설정합니다.</li>
<li data-name="border-right"><strong>border-right</strong> : 테두리 오른쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-right-color"><strong>border-right-color</strong> : 테두리 오른쪽 색 속성을 설정합니다.</li>
<li data-name="border-right-style"><strong>border-right-style</strong> : 테두리 오른쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-right-width"><strong>border-right-width</strong> : 테두리 오른쪽 두께 속성을 설정합니다.</li>
<li data-name="border-spacing"><strong>border-spacing</strong> : 테이블의 테두리 간격을 설정합니다.</li>
<li data-name="border-style"><strong>border-style</strong> : 테두리 스타일 속성을 설정합니다.</li>
<li data-name="border-top"><strong>border-top</strong> : 테두리 위쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-top-color"><strong>border-top-color</strong> : 테두리 위쪽 색 속성을 설정합니다.</li>
<li data-name="border-top-left-radius"><strong>border-top-left-radius</strong> : 윗부분 왼쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-top-right-radius"><strong>border-top-right-radius</strong> : 윗부분 오른쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-top-style"><strong>border-top-style</strong> : 테두리 위쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-top-width"><strong>border-top-width</strong> : 테두리 위쪽 두께 속성을 설정합니다.</li>
<li data-name="border-width"><strong>border-width</strong> : 테두리 두께 속성을 설정합니다.</li>
<li data-name="bottom"><strong>bottom</strong> : 위치 요소의 아래쪽 속성을 설정합니다.</li>
<li data-name="box-decoration-break"><strong>box-decoration-break</strong> : 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정합니다.</li>
<li data-name="box-shadow"><strong>box-shadow</strong> : 박스 요소의 그림자를 설정합니다.</li>
<li data-name="box-sizing"><strong>box-sizing</strong> : 요소 크기에 패딩 포함 여부를 설정합니다.</li>
<li data-name="caption-side"><strong>caption-side</strong> : 표(table) 요소에서 캡션(caption) 요소가 위치할 쪽을 지정하는 데 사용됩니다.</li>
<li data-name="caret-color"><strong>caret-color</strong> : 입력 커서(caret)의 색상을 지정합니다.</li>
<li data-name="clear"><strong>clear</strong> : 요소의 좌우측 또는 상하측 여백에 대한 플로팅(floating) 요소의 영향을 지우거나 남겨둘지를 설정합니다.</li>
<li data-name="clip"><strong>clip</strong> : 요소의 내용을 잘라내는 영역을 지정합니다.</li>
<li data-name="color"><strong>color</strong> : 텍스트의 색상을 지정합니다.</li>
<li data-name="column-count"><strong>column-count</strong> : 다단(column) 레이아웃에서 컨테이너의 열(column) 수를 지정합니다.</li>
<li data-name="column-fill"><strong>column-fill</strong> : 다단 레이아웃에서 마지막 열을 채우는 방법을 지정합니다.</li>
<li data-name="column-gap"><strong>column-gap</strong> : 다단 레이아웃에서 컬럼(column) 간격을 지정합니다.</li>
<li data-name="column-rule"><strong>column-rule</strong> : 다단 레이아웃에서 컬럼 사이에 배치되는 선의 스타일을 설정합니다.</li>
<li data-name="column-rule-color"><strong>column-rule-color</strong> : 다단 레이아웃에서 컬럼 사이에 배치되는 선의 색상을 설정합니다.</li>
<li data-name="column-rule-style"><strong>column-rule-style</strong> : 다단 레이아웃에서 컬럼 사이에 배치되는 선의 스타일을 설정합니다.</li>
<li data-name="column-rule-width"><strong>column-rule-width</strong> : 다단 레이아웃에서 컬럼 사이에 배치되는 선의 너비를 설정합니다.</li>
<li data-name="column-span"><strong>column-span</strong> : 다단 레이아웃에서 요소가 여러 열(column)을 걸칠지를 지정합니다.</li>
<li data-name="column-width"><strong>column-width</strong> : 다단 레이아웃에서 각 열(column)의 너비를 지정합니다.</li>
<li data-name="columns"><strong>columns</strong> : 다단 레이아웃에서 컨테이너의 열(column) 수와 각 열의 너비를 지정합니다.</li>
<li data-name="content"><strong>content</strong> : 가상 가상 요소(pseudo-element)에서 콘텐츠를 정의합니다.</li>
<li data-name="counter-increment"><strong>counter-increment</strong> : 리스트(list)나 카운터(counter)에서 숫자를 증가시키는 방법을 지정합니다.</li>
<li data-name="counter-reset"><strong>counter-reset</strong> : 리스트(list)나 카운터(counter)에서 숫자를 초기화하는 방법을 지정합니다.</li>
<li data-name="cursor"><strong>cursor</strong> : 마우스 커서의 모양을 지정합니다.</li>
<li data-name="display"><strong>display</strong> : 요소를 화면에 어떻게 표시할지를 지정합니다.</li>
<li data-name="empty-cells"><strong>empty-cells</strong> : 표(table)에서 셀(cell)이 비어있을 때의 표시 방법을 지정합니다.</li>
<li data-name="filter"><strong>filter</strong> : 표(table)에서 셀(cell)이 비어있을 때의 표시 방법을 지정합니다.</li>
<li data-name="flex"><strong>flex</strong> : 요소를 유연한(flexible) 박스 모델(flexbox)로 설정합니다.</li>
<li data-name="flex-basis"><strong>flex-basis</strong> : flex item의 초기 크기를 지정합니다. 이 속성은 flex shorthand 속성에서 flex item의 초기 크기를 설정할 때 사용되기도 합니다.</li>
<li data-name="flex-flow"><strong>flex-flow</strong> : flex-direction 속성과 flex-wrap 속성을 함께 지정하는 단축 속성입니다.</li>
<li data-name="flex-direction"><strong>flex-direction</strong> : flex container 안에서 flex item들의 배치 방향을 지정하는 속성입니다. </li>
<li data-name="flex-grow"><strong>flex-grow</strong> : flex item의 크기를 늘리는데 사용되는 속성입니다.</li>
<li data-name="flex-shrink"><strong>flex-shrink</strong> : flex item의 크기를 줄이는데 사용되는 속성입니다.</li>
<li data-name="flex-wrap"><strong>flex-wrap</strong> : flex container 안에서 flex item들이 여러 줄에 걸쳐 배치되는지 여부를 지정하는 속성입니다.</li>
<li data-name="float"><strong>float</strong> : 요소를 좌우 방향으로 띄우는 속성입니다.</li>
<li data-name="font"><strong>font</strong> : 글꼴과 관련된 속성들을 지정하는 단축 속성입니다.</li>
<li data-name="font-family"><strong>font-family</strong> : 폰트 종류를 설정합니다.</li>
<li data-name="font-size"><strong>font-size</strong> : 폰트 사이즈 속성을 설정합니다.</li>
<li data-name="font-size-adjust"><strong>font-size-adjust</strong> : 소문자를 기준으로 폰트 크기를 설정합니다.</li>
<li data-name="font-stretch"><strong>font-stretch</strong> : 는 CSS의 속성(property) 중 하나로, 글꼴의 너비를 지정하는 속성입니다.</li>
<li data-name="font-style"><strong>font-style</strong> : 폰트의 스타일을 설정합니다.</li>
<li data-name="font-variant"><strong>font-variant</strong> : 글꼴 변형 형태를 일괄적으로 설정합니다.</li>
<li data-name="font-variant-numeric"><strong>font-variant-numeric</strong> : 숫자에 대한 글꼴 글리프(표시 형태)를 설정합니다.</li>
<li data-name="font-variant-ligatures"><strong>font-variant-ligatures</strong> : 글꼴 글리프가 겹쳤을 때 설정합니다.</li>
<li data-name="font-variant-emoji"><strong>font-variant-emoji</strong> : font-variant-emoji 속성은 이모지 글꼴 글리프를 설정합니다.</li>
<li data-name="font-variant-east-asian"><strong>font-variant-east-asian</strong> : 아시아 언어 글꼴 글리프를 설정합니다</li>
<li data-name="font-variant-caps"><strong>font-variant-caps</strong> : 소문자/대문자에 대한 글꼴 글리프를 설정합니다.</li>
<li data-name="font-variant-alternates"><strong>font-variant-alternates</strong> : 글꼴 글리프의 대체 형태를 설정합니다.</li>
<li data-name="font-variant-position"><strong>font-variant-position</strong> : 글꼴 글리프의 위치를 설정합니다.</li>
<li data-name="font-variation-settings"><strong>font-variation-settings</strong> : 가변 폰트를 설정합니다.</li>
<li data-name="font-weight"><strong>font-weight</strong> : 폰트의 두께를 설정합니다.</li>
<li data-name="grid"><strong>grid</strong> : CSS 그리드 레이아웃을 만들기 위한 속성으로, 요소들을 행(row)과 열(column)의 그리드로 배치합니다.</li>
<li data-name="grid-area"><strong>grid-area</strong> : CSS 그리드 레이아웃에서 아이템의 위치와 크기를 지정하는 단축 속성입니다.</li>
<li data-name="grid-auto-columns"><strong>grid-auto-columns</strong> : 그리드 컨테이너에 대한 자동 생성된 열(column)의 크기를 지정합니다.</li>
<li data-name="grid-auto-flow"><strong>grid-auto-flow</strong> : 그리드 아이템이 배치될 방향을 지정합니다.</li>
<li data-name="grid-auto-rows"><strong>grid-auto-rows</strong> : 그리드 컨테이너에 대한 자동 생성된 행(row)의 크기를 지정합니다.</li>
<li data-name="grid-column"><strong>grid-column</strong> : 그리드 아이템이 차지할 열(column) 범위를 지정하는 단축 속성입니다.</li>
<li data-name="grid-column-end"><strong>grid-column-end</strong> : 그리드 아이템의 끝 열(column) 위치를 지정합니다.</li>
<li data-name="grid-column-gap"><strong>grid-column-gap</strong> : 그리드 아이템들 사이의 열(column) 간격을 지정합니다.</li>
<li data-name="grid-column-start"><strong>grid-column-start</strong> : 그리드 아이템의 시작 열(column) 위치를 지정합니다.</li>
<li data-name="grid-gap"><strong>grid-gap</strong> : 그리드 아이템들 사이의 행(row)과 열(column) 간격을 지정하는 단축 속성입니다.</li>
<li data-name="grid-row"><strong>grid-row</strong> : 그리드 아이템이 차지할 행(row) 범위를 지정하는 단축 속성입니다.</li>
<li data-name="grid-row-end"><strong>grid-row-end</strong> : 그리드 아이템의 끝 행(row) 위치를 지정합니다.</li>
<li data-name="grid-row-gap"><strong>grid-row-gap</strong> : 그리드 아이템들 사이의 행(row) 간격을 지정합니다.</li>
<li data-name="grid-row-start"><strong>grid-row-start</strong> : 그리드 아이템의 시작 행(row) 위치를 지정합니다.</li>
<li data-name="grid-template"><strong>grid-template</strong> : 그리드의 행(row)과 열(column)의 크기 및 간격을 지정하는 단축 속성입니다.</li>
<li data-name="grid-template-areas"><strong>grid-template-areas</strong> : 그리드 레이아웃의 영역 이름과 위치를 지정합니다.</li>
<li data-name="grid-template-columns"><strong>grid-template-columns</strong> : 그리드의 열(column)의 크기와 개수를 지정합니다.</li>
<li data-name="grid-template-rows"><strong>grid-template-rows</strong> : 그리드의 행(row)의 크기와 개수를 지정합니다.</li>
<li data-name="hanging-punctuation"><strong>hanging-punctuation</strong> : 문장부호의 위치를 조절하는 속성입니다. 문장부호가 현재 행의 왼쪽이나 오른쪽에 걸치도록 지정할 수 있습니다.</li>
<li data-name="height"><strong>height</strong> : 요소의 세로 크기를 설정합니다.</li>
<li data-name="hyphens"><strong>hyphens</strong> : 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다.</li>
<li data-name="isolation"><strong>isolation</strong> : 요소가 자식 요소와 격리되어 있는지 아닌지를 나타내는 속성입니다. 격리된 요소는 자식 요소들과 서로의 레이아웃에 영향을 주지 않습니다.</li>
<li data-name="justify-content"><strong>justify-content</strong> : 렉스 박스(flex box)나 그리드(grid)의 아이템들을 수평 방향으로 정렬하는 방법을 지정합니다.</li>
<li data-name="left"><strong>left</strong> : 요소의 왼쪽 위치를 지정합니다.</li>
<li data-name="letter-spacing"><strong>letter-spacing</strong> : 글자 사이의 간격을 지정합니다.</li>
<li data-name="line-height"><strong>line-height</strong> : 줄 간격을 지정합니다.</li>
<li data-name="list-style"><strong>list-style</strong> : 리스트의 마커(기호) 모양, 위치, 이미지 등을 지정하는 단축 속성입니다.</li>
<li data-name="list-style-image"><strong>list-style-image</strong> : 리스트의 마커(기호)로 사용할 이미지를 지정합니다.</li>
<li data-name="list-style-position"><strong>list-style-position</strong> : 리스트 마커(기호)의 위치를 지정합니다.</li>
<li data-name="list-style-type"><strong>list-style-type</strong> : 리스트 마커의 유형을 지정하는 속성입니다. disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha 등의 값이 있습니다. </li>
<li data-name="margin"><strong>margin</strong> : 요소의 네 방향(margin-top, margin-right, margin-bottom, margin-left)의 마진 값을 한번에 지정하는 속성입니다.</li>
<li data-name="margin-bottom"><strong>margin-bottom</strong> : 요소의 아래쪽 마진 값을 지정하는 속성입니다.</li>
<li data-name="margin-left"><strong>margin-left</strong> : 요소의 왼쪽 마진 값을 지정하는 속성입니다.</li>
<li data-name="margin-right"><strong>margin-right</strong> : 요소의 오른쪽 마진 값을 지정하는 속성입니다.</li>
<li data-name="margin-top"><strong>margin-top</strong> : 요소의 위쪽 마진 값을 지정하는 속성입니다.</li>
<li data-name="max-height"><strong>max-height</strong> : 요소의 최대 세로 크기를 설정합니다.</li>
<li data-name="max-width"><strong>max-width</strong> : 요소의 최대 가로 크기를 설정합니다.</li>
<li data-name="min-height"><strong>min-height</strong> : 최소 세로 크기를 설정합니다.</li>
<li data-name="min-width"><strong>min-width</strong> : 최소 가로 크기를 설정합니다.</li>
<li data-name="mix-blend-mode"><strong>mix-blend-mode</strong> : 요소의 배경색과 함께 조합될 색상 블렌딩 모드를 지정하는 속성입니다.</li>
<li data-name="object-fit"><strong>object-fit</strong> : 이미지 또는 비디오 요소의 크기와 화면 사이즈가 다를 때, 요소를 어떻게 맞출지 지정하는 속성입니다. contain, cover, fill, none, scale-down 등의 값이 있습니다.</li>
<li data-name="object-position"><strong>object-position</strong> : 이미지 또는 비디오 요소의 위치를 지정하는 속성입니다.</li>
<li data-name="opacity"><strong>opacity</strong> : 요소의 투명도를 지정하는 속성입니다. 0은 완전 투명, 1은 완전 불투명을 의미합니다.</li>
<li data-name="order"><strong>order</strong> : flexbox에서 요소의 순서를 지정하는 속성입니다. 0이 기본값이며, 음수와 양수 값을 지정할 수 있습니다.</li>
<li data-name="outline"><strong>outline</strong> : 요소 주변에 윤곽선을 지정하는 속성으로, outline-style, outline-width, outline-color 속성을 한번에 지정할 수 있는 단축 속성입니다.</li>
<li data-name="outline-color"><strong>outline-color</strong> : 윤곽선의 색상을 지정하는 속성입니다.</li>
<li data-name="outline-offset"><strong>outline-offset</strong> : 윤곽선과 요소의 간격을 지정하는 속성입니다.</li>
<li data-name="outline-style"><strong>outline-style</strong> : 윤곽선의 스타일을 지정하는 속성입니다. solid, dotted, dashed, double 등의 값이 있습니다.</li>
<li data-name="outline-width"><strong>outline-width</strong> : 윤곽선의 너비를 지정하는 속성입니다. medium, thin, thick 등의 상대적인 값 또는 절대적인 값을 사용할 수 있습니다.</li>
<li data-name="overflow"><strong>overflow</strong> : 요소 내부의 콘텐츠가 요소의 크기보다 클 때, 어떻게 처리할지 지정하는 속성입니다. visible, hidden, scroll, auto 등의 값이 있습니다.</li>
<li data-name="overflow-x"><strong>overflow-x</strong> : 요소 내부의 가로 방향 콘텐츠가 요소의 가로 크기보다 클 때, 어떻게 처리할지 지정하는 속성입니다.</li>
<li data-name="overflow-y"><strong>overflow-y</strong> : 요소 내부의 세로 방향 콘텐츠가 요소의 세로 크기보다 클 때, 어떻게 처리할지 지정하는 속성입니다.</li>
<li data-name="overflow-wrap"><strong>overflow-wrap</strong> : 의미가 없는 텍스트 줄바꿈을 설정합니다.</li>
<li data-name="padding"><strong>padding</strong> : 요소의 콘텐츠와 테두리 사이의 간격을 설정합니다.</li>
<li data-name="padding-bottom"><strong>padding-bottom</strong> : 요소의 하단 패딩(간격)을 설정합니다.</li>
<li data-name="padding-left"><strong>padding-left</strong> : 요소의 왼쪽 패딩(간격)을 설정합니다.</li>
<li data-name="padding-right"><strong>padding-right</strong> : 요소의 오른쪽 패딩(간격)을 설정합니다.</li>
<li data-name="padding-top"><strong>padding-top</strong> : 요소의 상단 패딩(간격)을 설정합니다.</li>
<li data-name="page-break-after"><strong>page-break-after</strong> : 인쇄 문서에서 페이지 나누기 후에 현재 요소 다음에 페이지를 시작합니다.</li>
<li data-name="page-break-before"><strong>page-break-before</strong> : 인쇄 문서에서 페이지 나누기 전에 현재 요소 이전에 페이지를 시작합니다.</li>
<li data-name="page-break-inside"><strong>page-break-inside</strong> : 인쇄 문서에서 현재 요소 내에서 페이지를 나눌 수 없도록 지정합니다.</li>
<li data-name="perspective"><strong>perspective</strong> : 3D 변환을 위한 원근 거리를 설정합니다.</li>
<li data-name="perspective-origin"><strong>perspective-origin</strong> : 3D 변환을 위한 원근 거리의 원점을 설정합니다.</li>
<li data-name="pointer-events"><strong>pointer-events</strong> : 요소에 대한 마우스 이벤트 처리를 활성화 또는 비활성화합니다.</li>
<li data-name="position"><strong>position</strong> : 요소의 위치 지정 방법을 설정합니다.</li>
<li data-name="quotes"><strong>quotes</strong> : 인용문 구분 기호의 따옴표를 설정합니다.</li>
<li data-name="resize"><strong>resize</strong> : 요소의 크기 조절 가능 여부를 지정합니다.</li>
<li data-name="right"><strong>right</strong> : 요소의 오른쪽 위치를 설정합니다.</li>
<li data-name="tab-size"><strong>tab-size</strong> : 탭 문자의 너비를 지정합니다.</li>
<li data-name="table-layout"><strong>table-layout</strong> : 테이블의 너비를 설정하는 알고리즘을 지정합니다.</li>
<li data-name="text-align"><strong>text-align</strong> : 텍스트 정렬 방식을 설정합니다.</li>
<li data-name="text-align-last"><strong>text-align-last</strong> : 문단의 마지막 텍스트 정렬 방식을 설정합니다.</li>
<li data-name="text-decoration"><strong>text-decoration</strong> : 텍스트 라인 속성을 일괄적으로 설정합니다.</li>
<li data-name="text-decoration-color"><strong>text-decoration-color</strong> : 글자 라인의 색상 속성을 설정합니다.</li>
<li data-name="text-decoration-line"><strong>text-decoration-line</strong> : 글자 라인의 위치 속성을 설정합니다.</li>
<li data-name="text-decoration-style"><strong>font</strong> : 텍스트에 대한 줄 표시(밑줄, 취소선 등)의 스타일을 설정합니다.</li>
<li data-name="text-decoration-skip-ink"><strong>text-decoration-skip-ink</strong> : 언더 라인의 글씨 겹침을 설정합니다.</li>
<li data-name="text-decoration-thickness"><strong>text-decoration-thickness</strong> : 글자 라인의 굵기 속성을 설정합니다.</li>
<li data-name="text-emphasis-color"><strong>text-emphasis-color</strong> : 강조 표시 색상을 설정합니다.</li>
<li data-name="text-emphasis-position"><strong>text-emphasis-position</strong> : 텍스트에 강조 표시 위치를 설정합니다.</li>
<li data-name="text-emphasis-style"><strong>text-emphasis-style</strong> : 텍스트에 강조 표시 스타일을 설정합니다.</li>
<li data-name="text-emphasis"><strong>text-emphasis</strong> : 텍스트에 강조 표시를 일괄적으로 설정합니다.</li>
<li data-name="text-indent"><strong>text-indent</strong> : 문단 들여쓰기 속성을 설정합니다.</li>
<li data-name="text-justify"><strong>text-justify</strong> : 양쪽 정렬을 했을 때 정렬 유형을 설정합니다.</li>
<li data-name="text-overflow"><strong>text-overflow</strong> : 텍스트가 영역을 벗어 났을 때 속성을 설정합니다.</li>
<li data-name="text-shadow"><strong>text-shadow</strong> : 텍스트 그림자를 설정합니다.</li>
<li data-name="text-transform"><strong>text-transform</strong> : 텍스트의 대소문자 변환을 지정합니다.</li>
<li data-name="text-underline-offset"><strong>text-underline-offset</strong> : 언더 라인의 오프셋 값을 설정합니다.</li>
<li data-name="text-underline-position"><strong>text-underline-position</strong> : 언더 라인의 위치를 설정합니다.</li>
<li data-name="top"><strong>top</strong> : 요소의 상단 가장자리(top) 위치를 설정합니다.</li>
<li data-name="transform"><strong>transform</strong> : 요소에 2D, 3D 변형(회전, 이동, 크기 조절 등)을 적용합니다.</li>
<li data-name="transform-origin"><strong>transform-origin</strong> : 요소의 변형 기준점(origin)을 설정합니다.</li>
<li data-name="transform-style"><strong>transform-style</strong> : 3D 변형을 사용할 때 자식 요소를 3D 공간에 위치시키는 방법을 지정합니다.</li>
<li data-name="transition"><strong>transition</strong> : 요소에 대한 전환 효과를 지정합니다. 여러 속성 중에서 일부만 전환을 적용하려면 transition-property를 사용합니다.</li>
<li data-name="transition-delay"><strong>transition-delay</strong> : 전환 효과가 시작되는 시점을 지연시킵니다.</li>
<li data-name="transition-duration"><strong>transition-duration</strong> : 전환 효과의 지속 시간을 설정합니다.</li>
<li data-name="transition-property"><strong>transition-property</strong> : 전환 효과를 적용할 속성을 지정합니다.</li>
<li data-name="transition-timing-function"><strong>transition-timing-function</strong> : 전환 효과의 타이밍 함수를 설정합니다.</li>
<li data-name="unicode-bidi"><strong>unicode-bidi</strong> : 텍스트의 언어 방향을 설정합니다.</li>
<li data-name="user-select"><strong>user-select</strong> : 요소 내에서 사용자의 텍스트 선택을 허용할지를 지정합니다.</li>
<li data-name="vertical-align"><strong>vertical-align</strong> : 인라인 요소의 수직 정렬 방식을 설정합니다.</li>
<li data-name="visibility"><strong>visibility</strong> : 요소의 표시 여부를 설정합니다. hidden 값으로 설정하면 요소는 표시되지 않지만 공간을 차지합니다.</li>
<li data-name="white-space"><strong>white-space</strong> : 줄바꿈 및 공백을 설정합니다. </li>
<li data-name="width"><strong>width</strong> : 요소의 가로 크기를 설정합니다.</li>
<li data-name="word-break"><strong>word-break</strong> : 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다.</li>
<li data-name="word-spacing"><strong>word-spacing</strong> : 단어 간 간격을 설정합니다.</li>
<li data-name="word-wrap"><strong>word-wrap</strong> : 요소의 너비가 작아서 한 줄에 들어가지 않는 단어의 줄바꿈 처리 방법을 지정합니다.</li>
<li data-name="z-index"><strong>z-index</strong> : 요소의 쌓이는 순서(z축 방향)를 설정합니다. 값이 클수록 위에 쌓입니다. 값이 음수일 경우 다른 요소들보다 아래에 쌓입니다.</li>
</ul>
</div>
</div>
</div>
</main>
<!-- // main -->
<footer id="footer">
<a href="mailto:1346zany@gmail.com">1346zany@gmail.com</a>
</footer>
<!-- //footer -->
<script>
//선택자
const searchBox = document.querySelector(".search__box input") //검색
const searchList = document.querySelectorAll(".search__list li") //목록리스트
document.querySelector(".search__info span").textContent = searchList.length;
//검색
searchBox.addEventListener("keyup", () => {
const userWord = searchBox.value; //사용자가 입력한 키워드
searchlist.forEach(el => {
// const cssName = el.getAttribute("data-name");
const cssName = el.dataset.name;
if(cssName.indexOf(userWord)){
//데이터가 있을 때
el.classList.add("hide");
} else {
//데이터가 없을 떄
el.classList.remove("hide");
}
})
});
</script>
</body>
</html>
main
<main id="main">
<div class="search__wrap">
<div class="search__header">
<h2 class="title">🤭자바스크립트</h2>
</div>
<div class="serch__contents">
<hgroup>
<h3>CSS 속성 검색하기</h3>
<h4>indexOf() / search()</h4>
</hgroup>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" name="search" id="search" placeholder="CSS 속성을 입력해주세요!">
</div>
<div class="search__info">
<div>
CSS 속성 갯수 : <span>0</span>개
</div>
</div>
<div class="search__list">
<ul>
<li data-name="align-content"><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
<li data-name="align-items"><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
<li data-name="align-self"><strong>align-self</strong> : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.</li>
<li data-name="all"><strong>all</strong> : 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
<li data-name="animation"><strong>animation</strong> : 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
<li data-name="animation-delay"><strong>animation-delay</strong> : 애니메이션 지연 시간을 설정합니다.</li>
<li data-name="animation-direction"><strong>animation-direction</strong> : 애니메이션 움직임 방향을 설정합니다.</li>
<li data-name="animation-duration"><strong>animation-duration</strong> : 애니메이션 움직임 시간을 설정합니다.</li>
<li data-name="animation-fill-mode"><strong>animation-fill-mode</strong> : 애니메이션이 끝난 후의 상태를 설정합니다.</li>
<li data-name="animation-iteration-count"><strong>animation-iteration-count</strong> : 애니메이션 반복 횟수 설정합니다.</li>
<li data-name="animation-name"><strong>animation-name</strong> : 애니메이션 keyframe 이름을 설정합니다.</li>
<li data-name="animation-play-state"><strong>animation-play-state</strong> : 애니메이션 진행상태를 설정합니다.</li>
<li data-name="animation-timing-function"><strong>animation-timing-function</strong> : 애니메이션 움직임의 속도를 설정합니다.</li>
<li data-name="backdrop-filter"><strong>backdrop-filter</strong> : 배경에 그래픽 효과를 설정합니다.</li>
<li data-name="backface-visibility"><strong>backface-visibility</strong> : 요소의 뒷면을 설정합니다.</li>
<li data-name="background-attachment"><strong>background-attachment</strong> : 배경 이미지의 고정 여부를 설정합니다.</li>
<li data-name="background-blend-mode"><strong>background-blend-mode</strong> : 배경을 혼합했을 때의 상태를 설정합니다.</li>
<li data-name="background-clip"><strong>background-clip</strong> : 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
<li data-name="background-color"><strong>background-color</strong> : 백그라운드 색을 설정합니다.</li>
<li data-name="background-image"><strong>background-image</strong> : 백그라운드 이미지 및 배경 속성을 설정합니다.</li>
<li data-name="background-origin"><strong>background-origin</strong> : 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
<li data-name="background-position"><strong>background-position</strong> : 백그라운드 이미지의 위치 영역을 설정합니다.</li>
<li data-name="background-repeat"><strong>background-repeat</strong> : 백그라운드 이미지 반복 여부를 설정합니다.</li>
<li data-name="background-size"><strong>background-size</strong> : 백그라운드 이미지 사이즈를 설정합니다.</li>
<li data-name="background"><strong>background</strong> : 백그라운드 속성을 일괄적으로 설정합니다.</li>
<li data-name="border"><strong>border</strong> : 테두리 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-bottom"><strong>border-bottom</strong> : 테두리 아래쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-bottom-color"><strong>border-bottom-color</strong> : 테두리 아래쪽 색 속성을 설정합니다.</li>
<li data-name="border-bottom-left-radius"><strong>border-bottom-left-radius</strong> : 아래부분 왼쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-bottom-right-radius"><strong>border-bottom-right-radius</strong> : 아래부분 오른쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-bottom-style"><strong>border-bottom-style</strong> : 테두리 아래쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-bottom-width"><strong>border-bottom-width</strong> : 테두리 아래쪽 두께 속성을 설정합니다.</li>
<li data-name="border-collapse"><strong>border-collapse</strong> : 테이블의 테두리 분리 여부를 설정합니다.</li>
<li data-name="border-color"><strong>border-color</strong> : 테두리 색 속성을 설정합니다.</li>
<li data-name="border-image"><strong>border-image</strong> : 테두리 이미지 속성을 설정합니다.</li>
<li data-name="border-image-outset"><strong>border-image-outset</strong> : 테두리 이미지 간격 속성을 설정합니다.</li>
<li data-name="border-image-repeat"><strong>border-image-repeat</strong> : 테두리 이미지 반복 속성을 설정합니다.</li>
<li data-name="border-image-slice"><strong>border-image-slice</strong> : 테두리 이미지 크기 속성을 설정합니다.</li>
<li data-name="border-image-source"><strong>border-image-source</strong> : 테두리 이미지 경로 속성을 설정합니다.</li>
<li data-name="border-image-width"><strong>border-image-width</strong> : 테두리 이미지 두께 속성을 설정합니다.</li>
<li data-name="border-left"><strong>border-left</strong> : 테두리 왼쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-left-color"><strong>border-left-color</strong> : 테두리 왼쪽 색 속성을 설정합니다.</li>
<li data-name="border-left-style"><strong>border-left-style</strong> : 테두리 왼쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-left-width"><strong>border-left-width</strong> : 테두리 왼쪽 두께 속성을 설정합니다.</li>
<li data-name="border-radius"><strong>border-radius</strong> : 모서리 굴곡을 설정합니다.</li>
<li data-name="border-right"><strong>border-right</strong> : 테두리 오른쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-right-color"><strong>border-right-color</strong> : 테두리 오른쪽 색 속성을 설정합니다.</li>
<li data-name="border-right-style"><strong>border-right-style</strong> : 테두리 오른쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-right-width"><strong>border-right-width</strong> : 테두리 오른쪽 두께 속성을 설정합니다.</li>
<li data-name="border-spacing"><strong>border-spacing</strong> : 테이블의 테두리 간격을 설정합니다.</li>
<li data-name="border-style"><strong>border-style</strong> : 테두리 스타일 속성을 설정합니다.</li>
<li data-name="border-top"><strong>border-top</strong> : 테두리 위쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-top-color"><strong>border-top-color</strong> : 테두리 위쪽 색 속성을 설정합니다.</li>
<li data-name="border-top-left-radius"><strong>border-top-left-radius</strong> : 윗부분 왼쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-top-right-radius"><strong>border-top-right-radius</strong> : 윗부분 오른쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-top-style"><strong>border-top-style</strong> : 테두리 위쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-top-width"><strong>border-top-width</strong> : 테두리 위쪽 두께 속성을 설정합니다.</li>
<li data-name="border-width"><strong>border-width</strong> : 테두리 두께 속성을 설정합니다.</li>
<li data-name="bottom"><strong>bottom</strong> : 위치 요소의 아래쪽 속성을 설정합니다.</li>
<li data-name="box-decoration-break"><strong>box-decoration-break</strong> : 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정합니다.</li>
<li data-name="box-shadow"><strong>box-shadow</strong> : 박스 요소의 그림자를 설정합니다.</li>
<li data-name="box-sizing"><strong>box-sizing</strong> : 요소 크기에 패딩 포함 여부를 설정합니다.</li>
<li data-name="caption-side"><strong>caption-side</strong> : 표(table) 요소에서 캡션(caption) 요소가 위치할 쪽을 지정하는 데 사용됩니다.</li>
<li data-name="caret-color"><strong>caret-color</strong> : 입력 커서(caret)의 색상을 지정합니다.</li>
<li data-name="clear"><strong>clear</strong> : 요소의 좌우측 또는 상하측 여백에 대한 플로팅(floating) 요소의 영향을 지우거나 남겨둘지를 설정합니다.</li>
<li data-name="clip"><strong>clip</strong> : 요소의 내용을 잘라내는 영역을 지정합니다.</li>
<li data-name="color"><strong>color</strong> : 텍스트의 색상을 지정합니다.</li>
<li data-name="column-count"><strong>column-count</strong> : 다단(column) 레이아웃에서 컨테이너의 열(column) 수를 지정합니다.</li>
<li data-name="column-fill"><strong>column-fill</strong> : 다단 레이아웃에서 마지막 열을 채우는 방법을 지정합니다.</li>
<li data-name="column-gap"><strong>column-gap</strong> : 다단 레이아웃에서 컬럼(column) 간격을 지정합니다.</li>
<li data-name="column-rule"><strong>column-rule</strong> : 다단 레이아웃에서 컬럼 사이에 배치되는 선의 스타일을 설정합니다.</li>
<li data-name="column-rule-color"><strong>column-rule-color</strong> : 다단 레이아웃에서 컬럼 사이에 배치되는 선의 색상을 설정합니다.</li>
<li data-name="column-rule-style"><strong>column-rule-style</strong> : 다단 레이아웃에서 컬럼 사이에 배치되는 선의 스타일을 설정합니다.</li>
<li data-name="column-rule-width"><strong>column-rule-width</strong> : 다단 레이아웃에서 컬럼 사이에 배치되는 선의 너비를 설정합니다.</li>
<li data-name="column-span"><strong>column-span</strong> : 다단 레이아웃에서 요소가 여러 열(column)을 걸칠지를 지정합니다.</li>
<li data-name="column-width"><strong>column-width</strong> : 다단 레이아웃에서 각 열(column)의 너비를 지정합니다.</li>
<li data-name="columns"><strong>columns</strong> : 다단 레이아웃에서 컨테이너의 열(column) 수와 각 열의 너비를 지정합니다.</li>
<li data-name="content"><strong>content</strong> : 가상 가상 요소(pseudo-element)에서 콘텐츠를 정의합니다.</li>
<li data-name="counter-increment"><strong>counter-increment</strong> : 리스트(list)나 카운터(counter)에서 숫자를 증가시키는 방법을 지정합니다.</li>
<li data-name="counter-reset"><strong>counter-reset</strong> : 리스트(list)나 카운터(counter)에서 숫자를 초기화하는 방법을 지정합니다.</li>
<li data-name="cursor"><strong>cursor</strong> : 마우스 커서의 모양을 지정합니다.</li>
<li data-name="display"><strong>display</strong> : 요소를 화면에 어떻게 표시할지를 지정합니다.</li>
<li data-name="empty-cells"><strong>empty-cells</strong> : 표(table)에서 셀(cell)이 비어있을 때의 표시 방법을 지정합니다.</li>
<li data-name="filter"><strong>filter</strong> : 표(table)에서 셀(cell)이 비어있을 때의 표시 방법을 지정합니다.</li>
<li data-name="flex"><strong>flex</strong> : 요소를 유연한(flexible) 박스 모델(flexbox)로 설정합니다.</li>
<li data-name="flex-basis"><strong>flex-basis</strong> : flex item의 초기 크기를 지정합니다. 이 속성은 flex shorthand 속성에서 flex item의 초기 크기를 설정할 때 사용되기도 합니다.</li>
<li data-name="flex-flow"><strong>flex-flow</strong> : flex-direction 속성과 flex-wrap 속성을 함께 지정하는 단축 속성입니다.</li>
<li data-name="flex-direction"><strong>flex-direction</strong> : flex container 안에서 flex item들의 배치 방향을 지정하는 속성입니다. </li>
<li data-name="flex-grow"><strong>flex-grow</strong> : flex item의 크기를 늘리는데 사용되는 속성입니다.</li>
<li data-name="flex-shrink"><strong>flex-shrink</strong> : flex item의 크기를 줄이는데 사용되는 속성입니다.</li>
<li data-name="flex-wrap"><strong>flex-wrap</strong> : flex container 안에서 flex item들이 여러 줄에 걸쳐 배치되는지 여부를 지정하는 속성입니다.</li>
<li data-name="float"><strong>float</strong> : 요소를 좌우 방향으로 띄우는 속성입니다.</li>
<li data-name="font"><strong>font</strong> : 글꼴과 관련된 속성들을 지정하는 단축 속성입니다.</li>
<li data-name="font-family"><strong>font-family</strong> : 폰트 종류를 설정합니다.</li>
<li data-name="font-size"><strong>font-size</strong> : 폰트 사이즈 속성을 설정합니다.</li>
<li data-name="font-size-adjust"><strong>font-size-adjust</strong> : 소문자를 기준으로 폰트 크기를 설정합니다.</li>
<li data-name="font-stretch"><strong>font-stretch</strong> : 는 CSS의 속성(property) 중 하나로, 글꼴의 너비를 지정하는 속성입니다.</li>
<li data-name="font-style"><strong>font-style</strong> : 폰트의 스타일을 설정합니다.</li>
<li data-name="font-variant"><strong>font-variant</strong> : 글꼴 변형 형태를 일괄적으로 설정합니다.</li>
<li data-name="font-variant-numeric"><strong>font-variant-numeric</strong> : 숫자에 대한 글꼴 글리프(표시 형태)를 설정합니다.</li>
<li data-name="font-variant-ligatures"><strong>font-variant-ligatures</strong> : 글꼴 글리프가 겹쳤을 때 설정합니다.</li>
<li data-name="font-variant-emoji"><strong>font-variant-emoji</strong> : font-variant-emoji 속성은 이모지 글꼴 글리프를 설정합니다.</li>
<li data-name="font-variant-east-asian"><strong>font-variant-east-asian</strong> : 아시아 언어 글꼴 글리프를 설정합니다</li>
<li data-name="font-variant-caps"><strong>font-variant-caps</strong> : 소문자/대문자에 대한 글꼴 글리프를 설정합니다.</li>
<li data-name="font-variant-alternates"><strong>font-variant-alternates</strong> : 글꼴 글리프의 대체 형태를 설정합니다.</li>
<li data-name="font-variant-position"><strong>font-variant-position</strong> : 글꼴 글리프의 위치를 설정합니다.</li>
<li data-name="font-variation-settings"><strong>font-variation-settings</strong> : 가변 폰트를 설정합니다.</li>
<li data-name="font-weight"><strong>font-weight</strong> : 폰트의 두께를 설정합니다.</li>
<li data-name="grid"><strong>grid</strong> : CSS 그리드 레이아웃을 만들기 위한 속성으로, 요소들을 행(row)과 열(column)의 그리드로 배치합니다.</li>
<li data-name="grid-area"><strong>grid-area</strong> : CSS 그리드 레이아웃에서 아이템의 위치와 크기를 지정하는 단축 속성입니다.</li>
<li data-name="grid-auto-columns"><strong>grid-auto-columns</strong> : 그리드 컨테이너에 대한 자동 생성된 열(column)의 크기를 지정합니다.</li>
<li data-name="grid-auto-flow"><strong>grid-auto-flow</strong> : 그리드 아이템이 배치될 방향을 지정합니다.</li>
<li data-name="grid-auto-rows"><strong>grid-auto-rows</strong> : 그리드 컨테이너에 대한 자동 생성된 행(row)의 크기를 지정합니다.</li>
<li data-name="grid-column"><strong>grid-column</strong> : 그리드 아이템이 차지할 열(column) 범위를 지정하는 단축 속성입니다.</li>
<li data-name="grid-column-end"><strong>grid-column-end</strong> : 그리드 아이템의 끝 열(column) 위치를 지정합니다.</li>
<li data-name="grid-column-gap"><strong>grid-column-gap</strong> : 그리드 아이템들 사이의 열(column) 간격을 지정합니다.</li>
<li data-name="grid-column-start"><strong>grid-column-start</strong> : 그리드 아이템의 시작 열(column) 위치를 지정합니다.</li>
<li data-name="grid-gap"><strong>grid-gap</strong> : 그리드 아이템들 사이의 행(row)과 열(column) 간격을 지정하는 단축 속성입니다.</li>
<li data-name="grid-row"><strong>grid-row</strong> : 그리드 아이템이 차지할 행(row) 범위를 지정하는 단축 속성입니다.</li>
<li data-name="grid-row-end"><strong>grid-row-end</strong> : 그리드 아이템의 끝 행(row) 위치를 지정합니다.</li>
<li data-name="grid-row-gap"><strong>grid-row-gap</strong> : 그리드 아이템들 사이의 행(row) 간격을 지정합니다.</li>
<li data-name="grid-row-start"><strong>grid-row-start</strong> : 그리드 아이템의 시작 행(row) 위치를 지정합니다.</li>
<li data-name="grid-template"><strong>grid-template</strong> : 그리드의 행(row)과 열(column)의 크기 및 간격을 지정하는 단축 속성입니다.</li>
<li data-name="grid-template-areas"><strong>grid-template-areas</strong> : 그리드 레이아웃의 영역 이름과 위치를 지정합니다.</li>
<li data-name="grid-template-columns"><strong>grid-template-columns</strong> : 그리드의 열(column)의 크기와 개수를 지정합니다.</li>
<li data-name="grid-template-rows"><strong>grid-template-rows</strong> : 그리드의 행(row)의 크기와 개수를 지정합니다.</li>
<li data-name="hanging-punctuation"><strong>hanging-punctuation</strong> : 문장부호의 위치를 조절하는 속성입니다. 문장부호가 현재 행의 왼쪽이나 오른쪽에 걸치도록 지정할 수 있습니다.</li>
<li data-name="height"><strong>height</strong> : 요소의 세로 크기를 설정합니다.</li>
<li data-name="hyphens"><strong>hyphens</strong> : 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다.</li>
<li data-name="isolation"><strong>isolation</strong> : 요소가 자식 요소와 격리되어 있는지 아닌지를 나타내는 속성입니다. 격리된 요소는 자식 요소들과 서로의 레이아웃에 영향을 주지 않습니다.</li>
<li data-name="justify-content"><strong>justify-content</strong> : 렉스 박스(flex box)나 그리드(grid)의 아이템들을 수평 방향으로 정렬하는 방법을 지정합니다.</li>
<li data-name="left"><strong>left</strong> : 요소의 왼쪽 위치를 지정합니다.</li>
<li data-name="letter-spacing"><strong>letter-spacing</strong> : 글자 사이의 간격을 지정합니다.</li>
<li data-name="line-height"><strong>line-height</strong> : 줄 간격을 지정합니다.</li>
<li data-name="list-style"><strong>list-style</strong> : 리스트의 마커(기호) 모양, 위치, 이미지 등을 지정하는 단축 속성입니다.</li>
<li data-name="list-style-image"><strong>list-style-image</strong> : 리스트의 마커(기호)로 사용할 이미지를 지정합니다.</li>
<li data-name="list-style-position"><strong>list-style-position</strong> : 리스트 마커(기호)의 위치를 지정합니다.</li>
<li data-name="list-style-type"><strong>list-style-type</strong> : 리스트 마커의 유형을 지정하는 속성입니다. disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha 등의 값이 있습니다. </li>
<li data-name="margin"><strong>margin</strong> : 요소의 네 방향(margin-top, margin-right, margin-bottom, margin-left)의 마진 값을 한번에 지정하는 속성입니다.</li>
<li data-name="margin-bottom"><strong>margin-bottom</strong> : 요소의 아래쪽 마진 값을 지정하는 속성입니다.</li>
<li data-name="margin-left"><strong>margin-left</strong> : 요소의 왼쪽 마진 값을 지정하는 속성입니다.</li>
<li data-name="margin-right"><strong>margin-right</strong> : 요소의 오른쪽 마진 값을 지정하는 속성입니다.</li>
<li data-name="margin-top"><strong>margin-top</strong> : 요소의 위쪽 마진 값을 지정하는 속성입니다.</li>
<li data-name="max-height"><strong>max-height</strong> : 요소의 최대 세로 크기를 설정합니다.</li>
<li data-name="max-width"><strong>max-width</strong> : 요소의 최대 가로 크기를 설정합니다.</li>
<li data-name="min-height"><strong>min-height</strong> : 최소 세로 크기를 설정합니다.</li>
<li data-name="min-width"><strong>min-width</strong> : 최소 가로 크기를 설정합니다.</li>
<li data-name="mix-blend-mode"><strong>mix-blend-mode</strong> : 요소의 배경색과 함께 조합될 색상 블렌딩 모드를 지정하는 속성입니다.</li>
<li data-name="object-fit"><strong>object-fit</strong> : 이미지 또는 비디오 요소의 크기와 화면 사이즈가 다를 때, 요소를 어떻게 맞출지 지정하는 속성입니다. contain, cover, fill, none, scale-down 등의 값이 있습니다.</li>
<li data-name="object-position"><strong>object-position</strong> : 이미지 또는 비디오 요소의 위치를 지정하는 속성입니다.</li>
<li data-name="opacity"><strong>opacity</strong> : 요소의 투명도를 지정하는 속성입니다. 0은 완전 투명, 1은 완전 불투명을 의미합니다.</li>
<li data-name="order"><strong>order</strong> : flexbox에서 요소의 순서를 지정하는 속성입니다. 0이 기본값이며, 음수와 양수 값을 지정할 수 있습니다.</li>
<li data-name="outline"><strong>outline</strong> : 요소 주변에 윤곽선을 지정하는 속성으로, outline-style, outline-width, outline-color 속성을 한번에 지정할 수 있는 단축 속성입니다.</li>
<li data-name="outline-color"><strong>outline-color</strong> : 윤곽선의 색상을 지정하는 속성입니다.</li>
<li data-name="outline-offset"><strong>outline-offset</strong> : 윤곽선과 요소의 간격을 지정하는 속성입니다.</li>
<li data-name="outline-style"><strong>outline-style</strong> : 윤곽선의 스타일을 지정하는 속성입니다. solid, dotted, dashed, double 등의 값이 있습니다.</li>
<li data-name="outline-width"><strong>outline-width</strong> : 윤곽선의 너비를 지정하는 속성입니다. medium, thin, thick 등의 상대적인 값 또는 절대적인 값을 사용할 수 있습니다.</li>
<li data-name="overflow"><strong>overflow</strong> : 요소 내부의 콘텐츠가 요소의 크기보다 클 때, 어떻게 처리할지 지정하는 속성입니다. visible, hidden, scroll, auto 등의 값이 있습니다.</li>
<li data-name="overflow-x"><strong>overflow-x</strong> : 요소 내부의 가로 방향 콘텐츠가 요소의 가로 크기보다 클 때, 어떻게 처리할지 지정하는 속성입니다.</li>
<li data-name="overflow-y"><strong>overflow-y</strong> : 요소 내부의 세로 방향 콘텐츠가 요소의 세로 크기보다 클 때, 어떻게 처리할지 지정하는 속성입니다.</li>
<li data-name="overflow-wrap"><strong>overflow-wrap</strong> : 의미가 없는 텍스트 줄바꿈을 설정합니다.</li>
<li data-name="padding"><strong>padding</strong> : 요소의 콘텐츠와 테두리 사이의 간격을 설정합니다.</li>
<li data-name="padding-bottom"><strong>padding-bottom</strong> : 요소의 하단 패딩(간격)을 설정합니다.</li>
<li data-name="padding-left"><strong>padding-left</strong> : 요소의 왼쪽 패딩(간격)을 설정합니다.</li>
<li data-name="padding-right"><strong>padding-right</strong> : 요소의 오른쪽 패딩(간격)을 설정합니다.</li>
<li data-name="padding-top"><strong>padding-top</strong> : 요소의 상단 패딩(간격)을 설정합니다.</li>
<li data-name="page-break-after"><strong>page-break-after</strong> : 인쇄 문서에서 페이지 나누기 후에 현재 요소 다음에 페이지를 시작합니다.</li>
<li data-name="page-break-before"><strong>page-break-before</strong> : 인쇄 문서에서 페이지 나누기 전에 현재 요소 이전에 페이지를 시작합니다.</li>
<li data-name="page-break-inside"><strong>page-break-inside</strong> : 인쇄 문서에서 현재 요소 내에서 페이지를 나눌 수 없도록 지정합니다.</li>
<li data-name="perspective"><strong>perspective</strong> : 3D 변환을 위한 원근 거리를 설정합니다.</li>
<li data-name="perspective-origin"><strong>perspective-origin</strong> : 3D 변환을 위한 원근 거리의 원점을 설정합니다.</li>
<li data-name="pointer-events"><strong>pointer-events</strong> : 요소에 대한 마우스 이벤트 처리를 활성화 또는 비활성화합니다.</li>
<li data-name="position"><strong>position</strong> : 요소의 위치 지정 방법을 설정합니다.</li>
<li data-name="quotes"><strong>quotes</strong> : 인용문 구분 기호의 따옴표를 설정합니다.</li>
<li data-name="resize"><strong>resize</strong> : 요소의 크기 조절 가능 여부를 지정합니다.</li>
<li data-name="right"><strong>right</strong> : 요소의 오른쪽 위치를 설정합니다.</li>
<li data-name="tab-size"><strong>tab-size</strong> : 탭 문자의 너비를 지정합니다.</li>
<li data-name="table-layout"><strong>table-layout</strong> : 테이블의 너비를 설정하는 알고리즘을 지정합니다.</li>
<li data-name="text-align"><strong>text-align</strong> : 텍스트 정렬 방식을 설정합니다.</li>
<li data-name="text-align-last"><strong>text-align-last</strong> : 문단의 마지막 텍스트 정렬 방식을 설정합니다.</li>
<li data-name="text-decoration"><strong>text-decoration</strong> : 텍스트 라인 속성을 일괄적으로 설정합니다.</li>
<li data-name="text-decoration-color"><strong>text-decoration-color</strong> : 글자 라인의 색상 속성을 설정합니다.</li>
<li data-name="text-decoration-line"><strong>text-decoration-line</strong> : 글자 라인의 위치 속성을 설정합니다.</li>
<li data-name="text-decoration-style"><strong>font</strong> : 텍스트에 대한 줄 표시(밑줄, 취소선 등)의 스타일을 설정합니다.</li>
<li data-name="text-decoration-skip-ink"><strong>text-decoration-skip-ink</strong> : 언더 라인의 글씨 겹침을 설정합니다.</li>
<li data-name="text-decoration-thickness"><strong>text-decoration-thickness</strong> : 글자 라인의 굵기 속성을 설정합니다.</li>
<li data-name="text-emphasis-color"><strong>text-emphasis-color</strong> : 강조 표시 색상을 설정합니다.</li>
<li data-name="text-emphasis-position"><strong>text-emphasis-position</strong> : 텍스트에 강조 표시 위치를 설정합니다.</li>
<li data-name="text-emphasis-style"><strong>text-emphasis-style</strong> : 텍스트에 강조 표시 스타일을 설정합니다.</li>
<li data-name="text-emphasis"><strong>text-emphasis</strong> : 텍스트에 강조 표시를 일괄적으로 설정합니다.</li>
<li data-name="text-indent"><strong>text-indent</strong> : 문단 들여쓰기 속성을 설정합니다.</li>
<li data-name="text-justify"><strong>text-justify</strong> : 양쪽 정렬을 했을 때 정렬 유형을 설정합니다.</li>
<li data-name="text-overflow"><strong>text-overflow</strong> : 텍스트가 영역을 벗어 났을 때 속성을 설정합니다.</li>
<li data-name="text-shadow"><strong>text-shadow</strong> : 텍스트 그림자를 설정합니다.</li>
<li data-name="text-transform"><strong>text-transform</strong> : 텍스트의 대소문자 변환을 지정합니다.</li>
<li data-name="text-underline-offset"><strong>text-underline-offset</strong> : 언더 라인의 오프셋 값을 설정합니다.</li>
<li data-name="text-underline-position"><strong>text-underline-position</strong> : 언더 라인의 위치를 설정합니다.</li>
<li data-name="top"><strong>top</strong> : 요소의 상단 가장자리(top) 위치를 설정합니다.</li>
<li data-name="transform"><strong>transform</strong> : 요소에 2D, 3D 변형(회전, 이동, 크기 조절 등)을 적용합니다.</li>
<li data-name="transform-origin"><strong>transform-origin</strong> : 요소의 변형 기준점(origin)을 설정합니다.</li>
<li data-name="transform-style"><strong>transform-style</strong> : 3D 변형을 사용할 때 자식 요소를 3D 공간에 위치시키는 방법을 지정합니다.</li>
<li data-name="transition"><strong>transition</strong> : 요소에 대한 전환 효과를 지정합니다. 여러 속성 중에서 일부만 전환을 적용하려면 transition-property를 사용합니다.</li>
<li data-name="transition-delay"><strong>transition-delay</strong> : 전환 효과가 시작되는 시점을 지연시킵니다.</li>
<li data-name="transition-duration"><strong>transition-duration</strong> : 전환 효과의 지속 시간을 설정합니다.</li>
<li data-name="transition-property"><strong>transition-property</strong> : 전환 효과를 적용할 속성을 지정합니다.</li>
<li data-name="transition-timing-function"><strong>transition-timing-function</strong> : 전환 효과의 타이밍 함수를 설정합니다.</li>
<li data-name="unicode-bidi"><strong>unicode-bidi</strong> : 텍스트의 언어 방향을 설정합니다.</li>
<li data-name="user-select"><strong>user-select</strong> : 요소 내에서 사용자의 텍스트 선택을 허용할지를 지정합니다.</li>
<li data-name="vertical-align"><strong>vertical-align</strong> : 인라인 요소의 수직 정렬 방식을 설정합니다.</li>
<li data-name="visibility"><strong>visibility</strong> : 요소의 표시 여부를 설정합니다. hidden 값으로 설정하면 요소는 표시되지 않지만 공간을 차지합니다.</li>
<li data-name="white-space"><strong>white-space</strong> : 줄바꿈 및 공백을 설정합니다. </li>
<li data-name="width"><strong>width</strong> : 요소의 가로 크기를 설정합니다.</li>
<li data-name="word-break"><strong>word-break</strong> : 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다.</li>
<li data-name="word-spacing"><strong>word-spacing</strong> : 단어 간 간격을 설정합니다.</li>
<li data-name="word-wrap"><strong>word-wrap</strong> : 요소의 너비가 작아서 한 줄에 들어가지 않는 단어의 줄바꿈 처리 방법을 지정합니다.</li>
<li data-name="z-index"><strong>z-index</strong> : 요소의 쌓이는 순서(z축 방향)를 설정합니다. 값이 클수록 위에 쌓입니다. 값이 음수일 경우 다른 요소들보다 아래에 쌓입니다.</li>
</ul>
</div>
</div>
</div>
</main>
<!-- // main -->search__box를 만들어 안에 검색하기와 검색 입력창을 만들어줍니다.
search__info로 속성 갯수가 총 몇개인지 나오도록 설정할 겁니다.
그리고 리스트를 만들어 검색하면 나올 정보들을 넣어줍니다.
script
선택자
//선택자
const searchBox = document.querySelector(".search__box input") //검색
const searchList = document.querySelectorAll(".search__list li") //목록리스트검색창과 목록리스트를 설정해줍니다.
전체 속성 개수 구하기
document.querySelector(".search__info span").textContent = searchList.length;queryselector로 선택해서 전체속성 개수를 출력해줍니다.
검색
//검색
searchBox.addEventListener("keyup", () => {
const userWord = searchBox.value; //사용자가 입력한 키워드
searchlist.forEach(el => {
// const cssName = el.getAttribute("data-name");
const cssName = el.dataset.name;
if(cssName.indexOf(userWord)){
//데이터가 있을 때
el.classList.add("hide");
} else {
//데이터가 없을 떄
el.classList.remove("hide");
}
})
});searchBox 요소에 이벤트 리스너를 등록하고, keyup 이벤트가 발생할 때마다 콜백 함수가 실행됩니다.
이때, searchBox.value를 통해 사용자가 입력한 검색어를 가져옵니다.
forEach() 메소드를 사용하여 검색 대상이 될 요소들을 반복합니다.
반복문 내에서는 dataset.name 속성을 통해 검색 대상의 이름을 가져옵니다.
그리고 indexOf() 메소드를 사용하여 검색어가 검색 대상의 이름에 포함되어 있는지 확인합니다.
만약 포함되어 있다면, 해당 요소의 hide 클래스를 추가하여 검색 결과를 화면에서 숨깁니다.
만약 없을 경우, 다 나오도록 숨김 효과를 뺴줍니다.