진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해
- 찰리 채플린
반응형
서치 이펙트 (searchEffect)
CSS 속성 검색할 수 있는 사이트를 만들었습니다.
[ 원하는 속성을 검색해보세요! ]
VSCode
<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="mouseEffect06.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="search__conts">
<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>
<div class="search__deco01">
<span></span>
</div>
</main>
<footer id="footer">
<a href="mailto:ehcjswo1@gmail.com">ehcjswo1@gmail.com</a>
</footer>
search__box 클래스는 검색하기와 검색하는 입력 상자를 만들기 위해 만들었습니다.
<label> 요소는 검색 상자의 레이블을 정의하며, for 속성은 해당 레이블이 연결된 입력 요소의 id 값과 일치합니다.
<input> 요소는 검색어를 입력하는 입력 상자를 정의하며, type 속성은 "text"로 설정되어 있습니다.
name 속성은 서버로 제출될 때 해당 입력 상자의 이름을 식별하는 데 사용됩니다.
id 속성은 label 요소와 연결됩니다. placeholder 속성은 입력 상자에 표시되는 힌트 텍스트를 정의합니다.
search__info 클래스는 안에는 <span> 요소사이를 스크립트를 이용해 CSS속성 갯수를 표시해줍니다.
search__list 클래스는 <ul>, <li> 요소를 사용해 CSS속성들을 목록으로 만들었습니다.
<li data-name="align-content"><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
위의 코드에서 "data-name"은 해당 요소의 이름을 지정하는데 사용되는 사용자 정의 데이터 속성입니다. 이 속성은 CSS와 JavaScript에서 요소를 식별하거나 처리하는 데 사용될 수 있습니다.
"data-name"은 HTML에서 사용되는 사용자 정의 데이터 속성 (custom data attribute) 중 하나입니다. 이 속성은 "data-" 접두사를 가지며, 개발자가 임의의 데이터를 요소에 저장하고 JavaScript 등의 스크립트에서 해당 데이터에 액세스 할 수 있도록 합니다.
"<strong>"은 HTML에서 사용되는 인라인 요소 태그 중 하나로, 그 안에 포함된 텍스트나 요소의 텍스트를 굵게 표시합니다. 즉, "strong" 태그는 해당 텍스트나 요소가 강조되어야 함을 나타냅니다.
브라우저는 일반적으로 "strong" 태그 안의 텍스트를 볼드체로 표시합니다. 예를 들어, 다음과 같이 사용할 수 있습니다.
script
<script>
//선택자
const searchBox = document.querySelector(".search__box input"); //검색
const searchList = document.querySelectorAll(".search__list li"); //목록리스트
const searchTOT = document.querySelector(".search__info span"); //갯수를 넣어줄 span
//num 갯수를 searchBox.addEventListener("keyup",)에서 키업 이벤트가 발생할때마다 갯수를 갱신해주는 변수
let num =0;
//검색
function searchChk(){
var h1 = document.getElementsByTagName(".search__list li.hide")[0].style.length;
var x = h1.style.length;
}
searchBox.addEventListener("keyup", ()=>{
const userWord = searchBox.value; //사용자가입력한 키워드
searchList.forEach((el , i)=>{
// const cssName = el.getAttribute("data-name");
const cssName = el.dataset.name;
if(cssName.indexOf(userWord)){
//cssName.indexOf(userWord)이 값이 없을경우
el.classList.add("hide");
console.log("cssName.indexOf(userWord) : ", cssName.indexOf(userWord));
}else{
//cssName.indexOf(userWord)이 값이 있을경우
//데이터가 있을경우엔 remove를 써서 hide를 제거하기 때문에 화면에 출력됨
//그리고 num++을 통해서 있는 데이터값을 1 더해줌
num++;
el.classList.remove("hide");
}
if(i == searchList.length-1 && num>=0 ){
searchTOT.innerText = num;
console.log("chk")
num =0;
}
})
});
//상단에서 querySelectorAll로 가져온 목록리스트의 길이를 searchList.length로 구할수있어요
//목록리스트의 길이라고 쓰고 갯수라고 표현하는것 searchTOT에 값을 innerText로 넣어줘요
searchTOT.innerText = searchList.length;
</script>
document.querySelector : CSS 선택자를 사용하여 HTML 요소를 찾는 메서드
document.querySelectorAll : CSS 선택자를 사용하여 HTML 요소들의 목록을 찾는 메서드
dataset : HTML 요소에 사용자 정의 데이터 속성을 설정하고, JavaScript에서 해당 속성에 액세스하는 방법
classList : HTML 요소의 클래스를 조작하는 메서드
addEventListener : HTML 요소에 이벤트 핸들러를 등록하는 메서드
innerText : HTML 요소의 텍스트 내용을 설정하는 속성
위 코드에서 searchBox, searchList, searchTOT는 document.querySelector를 사용하여 각각 ".search__box input", ".search__list li", ".search__info span" 요소를 찾아서 변수에 할당합니다.
그 다음으로 searchBox에 "keyup" 이벤트 핸들러를 등록하고, 해당 이벤트가 발생하면 검색어를 확인하고 목록에서 검색어와 일치하지 않는 요소들의 클래스를 "hide"로 추가합니다.
검색어와 일치하는 요소들은 "hide" 클래스를 제거합니다.
이렇게 각 요소에 대해 검색어와 일치하는지 여부를 확인하고, 화면에 출력되는 요소들의 갯수를 계산하여 searchTOT 요소에 표시합니다.