“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
검색을 할 수 있는 효과를 적용해서 만들어 보았습니다.
간략한 설명:
함수식을 이용해서 검색어에 해당되는 단어만 보이도록 설정했습니다.
body의 main부분과 script부분을 나눠서 설명하겠습니다.
body의 main
<main id="main">
<div class="search__wrap">
<div class="search__header">
<h2 class="title">JAVASCRIPT</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="bottom"><strong>bottom</strong> : 요소의 하단 여백(margin)을 설정합니다. 값을 지정하면 해당 값만큼 하단으로 내려갑니다.</li>
<li data-name="box-decoration-break"><strong>box-decoration-break</strong> : 상자(box)의 장식 요소(decorations)가 여러 줄로 나뉘어져 있을 경우 어떻게 처리할지 설정합니다. </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> : 표(caption)의 위치를 설정합니다. top(기본값)은 표 상단에 위치시키고, bottom은 표 하단에 위치시킵니다.</li>
<li data-name="caret-color"><strong>caret-color</strong> : 입력 커서(caret)의 색상을 설정합니다.</li>
<li data-name="clear"><strong>clear</strong> : 요소의 좌우 혹은 상하측에 다른 요소가 위치할 경우 어떻게 처리할지 설정합니다. </li>
<li data-name="clip"><strong>clip</strong> : 요소의 크기를 설정하고, 초과하는 부분을 잘라내거나 숨길 때 사용합니다.</li>
<li data-name="color"><strong>color</strong> : 텍스트(text)의 색상을 설정합니다.</li>
<li data-name="column-count"><strong>column-count</strong> : 다단(multi-column) 레이아웃을 적용할 때, 컨테이너(container) 안에서 표시할 열(column)의 개수를 지정합니다.</li>
<li data-name="column-fill"><strong>column-fill</strong> : 다단 레이아웃에서 마지막 열의 높이를 어떻게 조정할지 설정합니다. </li>
<li data-name="column-gap"><strong>column-gap</strong> : 다단(multi-column) 레이아웃에서 열(column) 사이의 간격을 설정합니다.</li>
<li data-name="column-rule"><strong>column-rule</strong> : 다단 레이아웃에서 열(column)과 열 사이에 그려질 선을 설정합니다.</li>
<li data-name="column-rule-color"><strong>column-rule-color</strong> : 다단 레이아웃에서 열(column)과 열 사이의 선의 색상을 설정합니다.</li>
<li data-name="column-rule-style"><strong>column-rule-style</strong> : 다단 레이아웃에서 열(column)과 열 사이의 선의 스타일을 설정합니다.</li>
<li data-name="column-rule-width"><strong>column-rule-width</strong> : 다단 레이아웃에서 열(column)과 열 사이의 선의 두께를 설정합니다.</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> : 다단 레이아웃에서 컨테이너(container) 안에 표시할 열(column)의 개수와 폭을 한 번에 설정하는 단축 속성입니다.</li>
<li data-name="content"><strong>content</strong> : 요소의 콘텐츠(content)를 설정하거나 가상 요소(pseudo-element)에서 콘텐츠를 생성할 때 사용합니다.</li>
<li data-name="counter-increment"><strong>counter-increment</strong> : 요소의 카운터(counter) 값을 증가시키는데 사용됩니다.</li>
<li data-name="counter-reset"><strong>counter-reset</strong> : 요소의 카운터 값을 초기화하는데 사용됩니다.</li>
<li data-name="cursor"><strong>cursor</strong> : 마우스 커서(cursor) 모양을 설정합니다.</li>
<li data-name="direction"><strong>direction</strong> : 텍스트 방향을 설정합니다. ltr(기본값)은 왼쪽에서 오른쪽으로 텍스트가 흐르며, rtl은 오른쪽에서 왼쪽으로 텍스트가 흐릅니다.</li>
<li data-name="display"><strong>display</strong> : 요소의 표시(display) 방식을 설정합니다. none은 요소를 화면에 표시하지 않습니다. block은 요소를 블록(block) 요소로 표시하며, inline은 요소를 인라인(inline) 요소로 표시합니다.</li>
<li data-name="empty-cells"><strong>empty-cells</strong> : 표의 빈 셀(empty cell) 표시 여부를 설정합니다. </li>
<li data-name="filter"><strong>filter</strong> : 요소에 필터(filter) 효과를 적용합니다. </li>
<li data-name="flex"><strong>flex</strong> : 요소에 유연한(flexible) 박스 모델을 적용합니다. </li>
<li data-name="flex-basis">flex-basis<strong></strong> : 유연한 박스 모델에서 초기 크기를 설정합니다. </li>
<li data-name="flex-direction"><strong>flex-direction</strong> : 유연한 박스 모델에서 아이템(item)의 배치 방향을 설정합니다.</li>
<li data-name="flex-flow"><strong>flex-flow</strong> : 유연한 박스 모델에서 flex-direction과 flex-wrap을 함께 설정하는 축약형입니다.</li>
<li data-name="flex-grow"><strong>flex-grow</strong> : 유연한 박스 모델에서 아이템의 증가(flex) 비율을 설정합니다.</li>
<li data-name="flex-shrink"><strong>flex-shrink</strong> : 유연한 박스 모델에서 아이템의 축소(shrink) 비율을 설정합니다.</li>
<li data-name="flex-wrap"><strong>flex-wrap</strong> : 유연한 박스 모델에서 아이템을 여러 줄로 나눌지, 한 줄에 배치할지 설정합니다. </li>
<li data-name="float"><strong>float</strong> : 요소를 좌측 혹은 우측으로 띄워서 배치합니다. 이 속성을 사용하면 다른 요소들이 float된 요소 주위를 감쌀 수 있게 됩니다.</li>
<li data-name="font"><strong>font</strong> : 텍스트의 글꼴(font)과 스타일(style)을 설정합니다.</li>
<li data-name="font-family"><strong>font-family</strong> : font-family 속성은 폰트 종류를 설정합니다.</li>
<li data-name="font-size"><strong>font-size</strong> : font-size 속성은 폰트 사이즈 속성을 설정합니다.</li>
<li data-name="font-size-adjust"><strong>font-size-adjust</strong> : font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다.</li>
<li data-name="font-stretch"><strong>font-stretch</strong> : </li>
<li data-name="font-style"><strong>font-style</strong> : font-style 속성은 폰트의 스타일을 설정합니다.</li>
<li data-name="font-variant"><strong>font-variant</strong> : font-variant 속성은 글꼴 변형 형태를 일괄적으로 설정합니다.</li>
<li data-name="font-variant-numeric"><strong>font-variant-numeric</strong> :font-variant-numeric 속성은 숫자에 대한 글꼴 글리프(표시 형태)를 설정합니다.</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> : font-variant-east-asian 속성은 아시아 언어 글꼴 글리프를 설정합니다.</li>
<li data-name="font-variant-caps"><strong>font-variant-caps</strong> : font-variant-caps 속성은 소문자/대문자에 대한 글꼴 글리프를 설정합니다.</li>
<li data-name="font-variant-alternates"><strong>font-variant-alternates</strong> : font-variant-alternates 속성은 글꼴 글리프의 대체 형태를 설정합니다.</li>
<li data-name="font-variant-position"><strong>font-variant-position</strong> : font-variant-position 속성은 글꼴 글리프의 위치를 설정합니다.</li>
<li data-name="font-variation-settings"><strong>font-variation-settings</strong> : font-variation-settings 속성은 가변 폰트를 설정합니다.</li>
<li data-name="font-weight"><strong>font-weight</strong> : font-weight 속성은 폰트의 두께를 설정합니다.</li>
<li data-name="grid"><strong>grid</strong> : grid container를 정의하고, 그 안에서 grid items을 배치합니다.</li>
<li data-name="grid-areat"><strong>grid-areat</strong> : grid item의 위치와 크기를 지정합니다.</li>
<li data-name="grid-auto-columns"><strong>grid-auto-columns</strong> : 명시되지 않은 경우 자동으로 생성되는 grid columns의 크기를 정의합니다.</li>
<li data-name="grid-auto-flow"><strong>grid-auto-flow</strong> : grid items가 자동 배치될 때 배치 방향을 정의합니다.</li>
<li data-name="grid-auto-rows"><strong>grid-auto-rows</strong> : 명시되지 않은 경우 자동으로 생성되는 grid rows의 크기를 정의합니다.</li>
<li data-name="grid-column"><strong>grid-column</strong> : grid item이 차지할 grid column의 시작과 끝 위치를 지정합니다.</li>
<li data-name="grid-column-end"><strong>grid-column-end</strong> : grid item이 차지할 grid column의 끝 위치를 지정합니다.</li>
<li data-name="grid-column-gap"><strong>grid-column-gap</strong> : grid column 사이의 간격을 지정합니다.</li>
<li data-name="grid-column-start"><strong>grid-column-start</strong> : grid item이 차지할 grid column의 시작 위치를 지정합니다.</li>
<li data-name="grid-gap"><strong>grid-gap</strong> : grid row와 column 사이의 간격을 지정합니다.</li>
<li data-name="grid-row"><strong>grid-row</strong> : grid item이 차지할 grid row의 시작과 끝 위치를 지정합니다.</li>
<li data-name="grid-row-end"><strong>grid-row-end</strong> : grid item이 차지할 grid row의 끝 위치를 지정합니다.</li>
<li data-name="grid-row-start"><strong>grid-row-start</strong> : grid item이 차지할 grid row의 시작 위치를 지정합니다.</li>
<li data-name="grid-template"><strong>grid-template</strong> : grid의 전체 크기와 구조를 지정합니다.</li>
<li data-name="grid-template-areas"><strong>grid-template-areas</strong> : grid 영역을 지정하고, 영역에 이름을 부여합니다.</li>
<li data-name="grid-template-columns"><strong>grid-template-columns</strong> : grid columns의 개수와 크기를 지정합니다.</li>
<li data-name="grid-template-rows"><strong>grid-template-rows</strong> : grid rows의 개수와 크기를 지정합니다.</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> : flexbox나 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> : 리스트 아이템 마커의 종류를 지정하는 속성입니다.</li>
<li data-name="margin"><strong>margin</strong> : 모든 margin 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다.</li>
<li data-name="margin-bottom"><strong>margin-bottom</strong> : 아래쪽의 마진(margin) 값을 설정합니다.</li>
<li data-name="margin-left"><strong>margin-left</strong> : 왼쪽의 마진(margin) 값을 설정합니다.</li>
<li data-name="margin-right"><strong>margin-right</strong> : 오른쪽의 마진(margin) 값을 설정합니다.</li>
<li data-name="margin-top"><strong>margin-top</strong> : 윗쪽의 마진(margin) 값을 설정합니다.</li>
<li data-name="margin-height"><strong>margin-height</strong> : 요소의 높이와 여백을 각각 설정하거나, 요소의 높이를 조정하는 데 여백을 사용합니다.</li>
<li data-name="margin-width"><strong>margin-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> : 이미지나 동영상과 같은 요소가 해당 요소의 컨테이너 안에서 어떻게 표시될지를 지정합니다.</li>
<li data-name="object-position"><strong>object-position</strong> : 이미지나 비디오 등의 요소가 포함된 요소 내에서의 위치를 지정할 때 사용됩니다.</li>
<li data-name="opacity"><strong>opacity</strong> : 요소의 투명도를 지정할 때 사용됩니다. </li>
<li data-name="order"><strong>order</strong> : Flexbox나 Grid Layout 등의 레이아웃 방식에서 사용됩니다.</li>
<li data-name="outline"><strong>outline</strong> : 요소의 외곽선을 지정하는 데 사용됩니다. "outline" 속성은 요소의 경계와 다르게, 요소 외곽에 그려집니다.</li>
<li data-name="outline-color"><strong>outline-color</strong> : 요소의 외곽선 색상을 지정하는 데 사용됩니다.</li>
<li data-name="outline-offset"><strong>outline-offset</strong> : "outline" 속성으로 지정한 외곽선과 요소의 경계 사이의 거리를 조절하는 데 사용됩니다.</li>
<li data-name="outline-style"><strong>outline-style</strong> : "outline" 속성으로 지정한 외곽선의 스타일을 지정하는 데 사용됩니다.</li>
<li data-name="outline-width"><strong>outline-width</strong> : "outline" 속성으로 지정한 외곽선의 너비를 지정하는 데 사용됩니다.</li>
<li data-name="overflow"><strong>overflow</strong> : 요소의 내용이 자신의 경계를 벗어나는 경우 어떻게 처리할지를 지정하는 데 사용됩니다.</li>
<li data-name="overflow-x"><strong>overflow-x</strong> : 요소의 가로 방향 오버플로우(overflow) 처리를 지정하는 데 사용됩니다.</li>
<li data-name="overflow-y"><strong>overflow-y</strong> : 요소의 세로 방향 오버플로우(overflow) 처리를 지정하는 데 사용됩니다.</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> : 요소의 위치를 지정하는 속성입니다. static, relative, absolute, fixed, sticky 등의 값이 있습니다.</li>
<li data-name="quotes"><strong>quotes</strong> : 인용 부호의 모양을 지정하는 속성입니다.</li>
<li data-name="resize"><strong>resize</strong> : 요소의 크기 조정 여부를 지정하는 속성입니다. none, both, horizontal, vertical 등의 값이 있습니다.</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> : 테이블 요소의 셀 너비 및 자동 레이아웃 알고리즘을 지정하는 속성입니다. auto, fixed 등의 값이 있습니다.</li>
<li data-name="text-align"><strong>text-align</strong> : text-align 속성은 텍스트 정렬 방식을 설정합니다.</li>
<li data-name="text-align-last"><strong>text-align-last</strong> : text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.</li>
<li data-name="text-decoration"><strong>text-decoration</strong> : text-decoration 속성은 텍스트 라인 속성을 일괄적으로 설정합니다.</li>
<li data-name="text-decoration-color"><strong>text-decoration-color</strong> : text-decoration-color 속성은 글자 라인의 색상 속성을 설정합니다.</li>
<li data-name="text-decoration-line"><strong>text-decoration-line</strong> : text-decoration-line 속성은 글자 라인의 위치 속성을 설정합니다.</li>
<li data-name="text-decoration-style"><strong>text-decoration-style</strong> : 꾸밈에 사용되는 선의 스타일을 지정하는 속성입니다.</li>
<li data-name="text-decoration-skip-ink"><strong>text-decoration-skip-ink</strong> : text-decoration-skip-ink 속성은 언더 라인의 글씨 겹침을 설정합니다.</li>
<li data-name="text-decoration-thickness"><strong>text-decoration-thickness</strong> : text-decoration-thickness 속성은 글자 라인의 굵기 속성을 설정합니다.</li>
<li data-name="text-emphasis-color"><strong>text-emphasis-color</strong> : text-emphasis-color 속성은 텍스트에 강조 표시 색상을 설정합니다.</li>
<li data-name="text-emphasis-position"><strong>text-emphasis-position</strong> : text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다.</li>
<li data-name="text-emphasis-style"><strong>text-emphasis-style</strong> : text-emphasis-style 속성은 텍스트에 강조 표시 스타일을 설정합니다.</li>
<li data-name="text-emphasis"><strong>text-emphasis</strong> : text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다.</li>
<li data-name="text-indent"><strong>text-indent</strong> : text-indent 속성은 문단 들여쓰기 속성을 설정합니다.</li>
<li data-name="text-justify"><strong>text-justify</strong> : text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다.</li>
<li data-name="text-overflow"><strong>text-overflow</strong> : text-overflow 속성은 텍스트가 영역을 벗어 났을 때 속성을 설정합니다.</li>
<li data-name="text-shadow"><strong>text-shadow</strong> : text-shadow 속성은 텍스트 그림자를 설정합니다.</li>
<li data-name="text-transform"><strong>text-transform</strong> : 대문자 또는 소문자로 바꾸는 속성입니다.</li>
<li data-name="text-underline-offset"><strong>text-underline-offset</strong> : text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다.</li>
<li data-name="text-underline-position"><strong>text-underline-position</strong> : 언더 라인의 위치를 설정합니다.</li>
<li data-name="top"><strong>top</strong> : 요소의 위치를 위쪽으로부터 지정합니다.</li>
<li data-name="transform"><strong>transform</strong> :요소의 변형(transform)을 지정합니다.</li>
<li data-name="transform-origin"><strong>transform-origin</strong> : 요소의 변형 기준점(origin)을 지정합니다.</li>
<li data-name="transform-style"><strong>transform-style</strong> : 3D 변형(transform)을 사용할 때 하위 요소에 적용할 방법을 지정합니다.</li>
<li data-name="transition"><strong>transition</strong> : 요소에 특정한 변화(transition) 효과를 적용합니다.</li>
<li data-name="transition-delay"><strong>transition-delay</strong> : 트랜지션의 시작 시점을 지연시킵니다. 지정한 시간(ms)이 지난 후에 트랜지션이 시작됩니다.</li>
<li data-name="transition-duration"><strong>transition-duration</strong> : 트랜지션의 지속 시간을 설정합니다. 지정한 시간(ms) 동안 트랜지션 효과가 적용됩니다.</li>
<li data-name="transition-property"><strong>transition-property</strong> : 트랜지션을 적용할 CSS 속성을 지정합니다. 여러 개의 속성을 쉼표로 구분하여 지정할 수 있습니다.</li>
<li data-name="transition-timing-function"><strong>transition-timing-function</strong> : 속성을 서서히 변화시키는 속성입니다.</li>
<li data-name="unicode-bidi"><strong>unicode-bidi</strong> : 텍스트의 양방향 흐름을 지정하는 속성입니다. normal, embed, isolate, bidi-override 등의 값이 있습니다.</li>
<li data-name="user-select"><strong>user-select</strong> : 사용자가 요소 내의 텍스트를 선택할 수 있는지 여부를 지정하는 속성입니다. auto, none, text, contain, all 등의 값이 있습니다. </li>
<li data-name="vertical-align"><strong>vertical-align</strong> : 요소 내부의 인라인 요소의 수직 정렬을 지정하는 속성입니다. baseline, top, middle, bottom, sub, super, text-top, text-bottom 등의 값이 있습니다. </li>
<li data-name="visibility"><strong>visibility</strong> : 요소의 가시성 여부를 지정하는 속성입니다. visible, hidden, collapse 등의 값이 있습니다. </li>
<li data-name="word-spacing"><strong>word-spacing</strong> : 단어 사이의 간격을 지정하는 속성입니다. </li>
<li data-name="word-wrap"><strong>word-wrap</strong> : 긴 단어의 줄바꿈을 처리하는 방법을 지정하는 속성입니다. normal, break-word, anywhere 등의 값이 있습니다. </li>
<li data-name="z-index"><strong>z-index</strong> : 요소의 Z축 위치를 지정하는 속성입니다. 더 큰 숫자가 더 높은 위치에 있습니다. </li>
</ul>
</div>
</div>
</div>
</main>indexOf() 함수는, 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴합니다.
searchvalue : 필수 입력값, 찾을 문자열
position : optional, 기본값은 0, string에서 searchvalue를 찾기 시작할 위치 찾는 문자열이 없으면 -1을 리턴합니다.
문자열을 찾을 때 대소문자를 구분합니다.
search() 메서드는 정규 표현식과 이 String 객체간에 같은 것을 찾기 위한 검색을 실행합니다.
정규표현식과 주어진 스트링간에 첫번째로 매치되는 것의 인덱스를 반환한다. 찾지 못하면 -1 를 반환합니다.
문자열에서 조건 문자열을 찾아서 몇 번 째 위치에 확인을 해주는 함수로, 첫 번 째로 매치되는 인덱스를 반환하게 되지만, 찾지 못하면 -1 반환합니다.
쉽게 말하자면 검색되는 문자열의 위치값을 반환합니다.
input 태그의 placeholder 속성은 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시합니다.
입력박스에 어떠한 값을 입력해야 하는지 알려 줄 때 사용합니다.
이러한 도움말은 사용자가 입력할 수 있는 값에 대한 견본 값이나 입력 형식에 대한 간단한 설명 등이 사용되며,
사용자가 입력하기 전까지 입력 필드에 표시되다가 사용자가 입력을 시작하면 사라집니다.
placeholder 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같습니다.
- password
- search
- tel
- text
- url
만약 기본값이 아니라, 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder를 사용합니다.
화면 상에는 그 문자열이 보이지만, 버튼을 클릭했을 때 아무 값도 전송되지 않습니다.
- id : javascript에서 접근 목적. 현 페이지에서 한 개만이 유효 == Javascript
- class : js에서도 접근이 가능하지만, 일단은 css에서 디자인적인 요소인 경우가 많습니다.
== css 쪽에서 주로 사용, 현 페이지에서 다중으로 설정이 가능합니다. - name : 값을 전달하기 위한 목적을 가지고 있는 경우가 많습니다.
다중 설정이 가능합니다.
즉, A페이지에서 B페이지로 이동하는 경우 값을 넘겨줍니다.
hgroup 태그란 hgroup 엘리먼트는 문서 구획의 다단계 제목, 섹션의 제목 그룹을 나타냅니다.
하나 이상의 h1 - h6 요소를 묶을 때 사용합니다.
hgroup 태그를 어디에서 사용하냐면,
제목이 여러 단계를 가질 때, 즉 부제목이나 대체 타이틀을 가질 때 hn 요소들을 묶어줄 때 사용합니다.
헤더(h1 - h6)가 연속해서 나올 때, 문서의 설명, 개요 등의 목적으로, 최상위 순위의 h1-h6 글자를 hgroup 태그의 자손으로 정의합니다.
hgroup 태그는 부제목과 함께 다중레벨의 제목을 기본 제목으로 분류합니다.
다른 섹션에서 만든 두 번째 hn 요소를 방지합니다.
h1-h6 요소 외의 태그는 포함할 수 없습니다.
hgroup의 자손으로 오는 h1-h6 요소의 순위는, 만약 다른 요소들이 있다면, h1 요소와 같습니다. (가장 높은 순위)
전역 특성만 포함합니다.
label 태그는 input 태그를 제어하여 상태를 변경하게 도와주는 태그입니다.
label 태그 사이에 위치한 text, checkbox, radio 등은 클릭 가능 영역이 텍스트로 확장됩니다.
<label for=""> 와 <태그 id="">값은 서로 그룹을 형성합니다.
label for 사용법은 for 속성을 사용해서 <input> 태그의 id 속성에 연계해서 사용합니다.
label의 for값과 input의 id값을 일치시키면 됩니다.
script
<script>
//선택자
const searchBox = document.querySelector(".search__box input"); //검색
const searchList = document.querySelectorAll(".search__list li"); //목록 리스트
//검색
searchBox.addEventListener("keyup", () => {
const userWord = searchBox.value; //사용자가 입력한 키워드
// console.log(userWord)
searchList.forEach(el => {
// const cssName = el.getAttribute("data-name"); 밑에 있는 dataset.name 과 같은 방법
const cssName = el.dataset.name;
// console.log(cssName)
if(cssName.indexOf(userWord)){
//데이터가 있으면 실행
el.classList.add("hide");
} else {
//데이터가 없으면 실행
el.classList.remove("hide");
}
})
});
document.querySelector(".search__info span").innerHTML = searchList.length;
</script>검색창을 search__box 라는 class 로 이름을 지정하고, 거기에 입력을 하기 위해서 input 을 설정했습니다.
JavaScirpt 이벤트란, DOM에서 특정 이벤트가 발생되면 JavaScript 이벤트 객체에서 이를 확인할 수 있습니다.
DOM 구조에서 이벤트는 매우 다양하지만, 자주 쓰는 이벤트는 아래와 같습니다.
- 포커스 이벤트(focus, blur)
- 폼 이벤트(reset, submit)
- 뷰 이벤트(scroll, resize)
- 키보드 이벤트(keydown, keyup)
- 마우스 이벤트(mouseenter, mouseover, click, dbclick, mouseleave)
- 드래그 앤 드롭 이벤트 (dragstart, drag, dragleave, drop)
이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트입니다.
이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출합니다.
키보드 이벤트의 종류는
- keydown : 사용자가 키보드의 키를 눌렀을 때 발생합니다.
- keyup : 사용자가 키보드의 키를 눌렀다가 떼었을 때 발생합니다.
- keypress : 사용자가 키보드를 눌렀을 때 발생합니다.
Alt, Ctrl, Shift, Esc 키등 몇 가지 키에서는 이 이벤트를 발생시키지 않기 때문에 이 이벤트는 사용을 권장하지 않습니다.
사용자가 입력한 키워드를 userWord라는 변수값에 저장해줬습니다.
data name 즉 데이터의 이름을 선택자로 정했습니다.
JavaScript 에서 이 속성 값들을 읽는 방법은 너무 간단합니다.
값을 읽기 위한 완전한 HTML 이름과 함께 getAttribute() 를 사용하면 됩니다.
dataset으로 대체해서 쓸 수도 있습니다.
dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷 부분을 사용합니다.
indexOf() 함수는, 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴합니다.
classList 사용은 공백으로 구분된 문자열인 element.className 을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법입니다.
add(String) 는 지정한 클래스 값을 추가합니다. 만약 추가하려는 클래스가 이미 존재한다면 무시합니다.
remove(String) 는 지정한 클래스 값을 제거합니다. 존재하지 않는 클래스라면 에러가 발생하지는 않습니다.
이 함수를 이용해서 사용자가 입력한 키워드의 데이터가 data name 중에 있으면 add 를 실행하고, 없으면 remove를 실행하게 설정했습니다.