728x90
반응형
![](https://blog.kakaocdn.net/dn/cOnI1x/btrKkfFQhnl/7doiv19HBRB8ALlkRRkcG0/img.jpg)
searchEffect02
includes()를 이용하여 검색하기. 타입 검색 기능 추가.
HTML
데이터 구분을 위해 data-name을 활용합니다.
data-type을 추가하여 타입으로도 검색이 가능하도록 하였습니다.
<main id="main">
<div class="search__wrap">
<span>includes()를 이용하여 검색하기</span>
<h1>CSS 속성 검색하기</h1>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해주세요!">
</div>
<div class="search__info">
<div class="type">플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요!</div>
<div>
전체 속성 갯수 : <span class="num">0</span>
</div>
</div>
<div class="search__list">
<div class="css">
<ul>
<li data-name="align-content" data-type="플렉스"><strong>align-content</strong> : align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
<li data-name="align-items" data-type="플렉스"><strong>align-items</strong> : align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
<li data-name="align-self" data-type="플렉스"><strong>align-self</strong> : align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.</li>
<li data-name="all" data-type="기타"><strong>all</strong> : all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
<li data-name="animation" data-type="애니메이션"><strong>animation</strong> : animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
<li data-name="animation-delay" data-type="애니메이션"><strong>animation-delay</strong> : animation-delay 속성은 애니메이션 지연 시간을 설정합니다.</li>
<li data-name="animation-direction" data-type="애니메이션"><strong>animation-direction</strong> : animation-direction은 애니메이션의 움직임 방향을 설정합니다.</li>
<li data-name="animation-duration" data-type="애니메이션"><strong>animation-duration</strong> : animation-duration은 애니메이션의 움직임 시간을 설정합니다.</li>
<li data-name="animation-fill-mode" data-type="애니메이션"><strong>animation-fill-mode</strong> : animation-fill-mode는 애니메이션이 끝난 후의 상태를 설정합니다.</li>
<li data-name="animation-iteration-count" data-type="애니메이션"><strong>animation-iteration-count</strong> : animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다.</li>
<li data-name="animation-name" data-type="애니메이션"><strong>animation-name</strong> : animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.</li>
<li data-name="animation-play-state" data-type="애니메이션"><strong>animation-play-state</strong> : animation-play-state 속성은 애니메이션 진행상태를 설정합니다.</li>
<li data-name="animation-timing-function" data-type="애니메이션"><strong>animation-timing-function</strong> : animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다.</li>
<li data-name="backdrop-filter" data-type="효과"><strong>backdrop-filter</strong> : backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다.</li>
<li data-name="backface-visibility" data-type="기타"><strong>backface-visibility</strong> : backface-visibility 속성은 요소의 뒷면을 설정합니다.</li>
<li data-name="background-attachment" data-type="백그라운드"><strong>background-attachment</strong> : background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.</li>
<li data-name="background-blend-mode" data-type="백그라운드"><strong>background-blend-mode</strong> : background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.</li>
<li data-name="background-clip" data-type="백그라운드"><strong>background-clip</strong> : background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
<li data-name="background-color" data-type="백그라운드"><strong>background-color</strong> : background-color 속성은 백그라운드 색을 설정합니다.</li>
<li data-name="background-image" data-type="백그라운드"><strong>background-image</strong> : background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.</li>
<li data-name="background-origin" data-type="백그라운드"><strong>background-origin</strong> : background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.</li>
<li data-name="background-position" data-type="백그라운드"><strong>background-position</strong> : background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.</li>
<li data-name="background-repeat" data-type="백그라운드"><strong>background-repeat</strong> : background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.</li>
<li data-name="background-size" data-type="백그라운드"><strong>background-size</strong> : background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.</li>
<li data-name="background" data-type="백그라운드"><strong>background</strong> : background 속성은 백그라운드 속성을 일괄적으로 설정합니다.</li>
<li data-name="border" data-type="테두리"><strong>border</strong> : border 속성은 테두리 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-bottom" data-type="테두리"><strong>border-bottom</strong> : border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-bottom-color" data-type="테두리"><strong>border-bottom-color</strong> : border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다.</li>
<li data-name="border-bottom-left-radius" data-type="테두리"><strong>border-bottom-left-radius</strong> : border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-bottom-right-radius" data-type="테두리"><strong>border-bottom-right-radius</strong> : border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-bottom-style" data-type="테두리"><strong>border-bottom-style</strong> : border-bottom-style 속성은 테두리 아래쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-bottom-width" data-type="테두리"><strong>border-bottom-width</strong> : border-bottom-width 속성은 테두리 아래쪽 두께 속성을 설정합니다.</li>
<li data-name="border-collapse" data-type="테두리"><strong>border-collapse</strong> : border-collapse 속성은 테이블의 테두리 분리 여부를 설정합니다.</li>
<li data-name="border-color" data-type="테두리"><strong>border-color</strong> : border-color 속성은 테두리 색 속성을 설정합니다.</li>
<li data-name="border-image" data-type="테두리"><strong>border-image</strong> : border-image 속성은 테두리 이미지 속성을 설정합니다.</li>
<li data-name="border-image-outset" data-type="테두리"><strong>border-image-outset</strong> : border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다.</li>
<li data-name="border-image-repeat" data-type="테두리"><strong>border-image-repeat</strong> : border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다.</li>
<li data-name="border-image-slice" data-type="테두리"><strong>border-image-slice</strong> : border-image-slice 속성은 테두리 이미지 크기 속성을 설정합니다.</li>
<li data-name="border-image-source" data-type="테두리"><strong>border-image-source</strong> : border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다.</li>
<li data-name="border-image-width" data-type="테두리"><strong>border-image-width</strong> : border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다.</li>
<li data-name="border-left" data-type="테두리"><strong>border-left</strong> : border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-left-color" data-type="테두리"><strong>border-left-color</strong> : border-left-color 속성은 테두리 왼쪽 색 속성을 설정합니다.</li>
<li data-name="border-left-style" data-type="테두리"><strong>border-left-style</strong> : border-left-style 속성은 테두리 왼쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-left-width" data-type="테두리"><strong>border-left-width</strong> : border-left-width 속성은 테두리 왼쪽 두께 속성을 설정합니다.</li>
<li data-name="border-radius" data-type="테두리"><strong>border-radius</strong> : border-radius 속성은 모서리 굴곡을 설정합니다.</li>
<li data-name="border-right" data-type="테두리"><strong>border-right</strong> : border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-right-color" data-type="테두리"><strong>border-right-color</strong> : border-right-color 속성은 테두리 오른쪽 색 속성을 설정합니다.</li>
<li data-name="border-right-style" data-type="테두리"><strong>border-right-style</strong> : border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-right-width" data-type="테두리"><strong>border-right-width</strong> : border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다.</li>
<li data-name="border-spacing" data-type="테두리"><strong>border-spacing</strong> : border-spacing 속성은 테이블의 테두리 간격을 설정합니다.</li>
<li data-name="border-style" data-type="테두리"><strong>border-style</strong> : border-style 속성은 테두리 스타일 속성을 설정합니다.</li>
<li data-name="border-top" data-type="테두리"><strong>border-top</strong> : border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다.</li>
<li data-name="border-top-color" data-type="테두리"><strong>border-top-color</strong> : border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다.</li>
<li data-name="border-top-left-radius" data-type="테두리"><strong>border-top-left-radius</strong> : border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-top-right-radius" data-type="테두리"><strong>border-top-right-radius</strong> : border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.</li>
<li data-name="border-top-style" data-type="테두리"><strong>border-top-style</strong> : border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다.</li>
<li data-name="border-top-width" data-type="테두리"><strong>border-top-width</strong> : border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다.</li>
<li data-name="border-width" data-type="테두리"><strong>border-width</strong> : border-width 속성은 테두리 두께 속성을 설정합니다.</li>
<li data-name="bottom" data-type="위치"><strong>bottom</strong> : bottom 속성은 위치 요소의 아래쪽 속성을 설정합니다.</li>
<li data-name="box-decoration-break" data-type="박스"><strong>box-decoration-break</strong> : box-decoration-break 속성은 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정합니다.</li>
<li data-name="box-shadow" data-type="박스"><strong>box-shadow</strong> : box-shadow 속성은 박스 요소의 그림자를 설정합니다.</li>
<li data-name="box-sizing" data-type="박스"><strong>box-sizing</strong> : box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다.</li>
<li data-name="caption-side" data-type="위치"><strong>caption-side</strong> : caption-side 속성은 caption의 위치를 설정합니다.</li>
<li data-name="caret-color" data-type="테두리"><strong>caret-color</strong> : caret-color 속성은 input의 커서 색을 정의합니다.</li>
<li data-name="clear" data-type="테두리"><strong>clear</strong> : clear 속성은 float 요소의 성질을 차단합니다.</li>
<li data-name="clip" data-type="테두리"><strong>clip</strong> : clip 속성은 보이는 영역을 설정합니다.</li>
<li data-name="color" data-type="테두리"><strong>color</strong> : color 속성은 글씨 색을 설정합니다.</li>
<li data-name="column-count" data-type="테두리"><strong>column-count</strong> : column-count 속성은 컬럼의 수를 정의합니다.</li>
<li data-name="column-fill" data-type="테두리"><strong>column-fill</strong> : column-fill 속성은 열의 지정방법을 정의합니다.</li>
<li data-name="column-gap" data-type="테두리"><strong>column-gap</strong> : column-gap 속성은 컬럼의 간격을 정의합니다.</li>
<li data-name="column-rule" data-type="테두리"><strong>column-rule</strong> : column-rule 속성은 컬럼 라인의 가로값, 스타일, 컬러를 정의합니다.</li>
<li data-name="column-rule-color" data-type="테두리"><strong>column-rule-color</strong> : column-rule-color 속성은 컬럼의 라인 색을 정의합니다.</li>
<li data-name="column-rule-style" data-type="테두리"><strong>column-rule-style</strong> : column-rule-style 속성은 컬럼 라인의 스타일을 정의합니다.</li>
<li data-name="column-rule-width" data-type="테두리"><strong>column-rule-width</strong> : column-rule-width 속성은 컬럼 라인의 가로값을 정의합니다.</li>
<li data-name="column-span" data-type="테두리"><strong>column-span</strong> : column-span 속성은 열의 속성을 정의합니다.</li>
<li data-name="column-width" data-type="테두리"><strong>column-width</strong> : column-width 속성은 컬럼의 가로 값을 정의합니다.</li>
<li data-name="columns" data-type="테두리"><strong>columns</strong> : columns 속성은 열의 폭과 열의 수를 정의합니다.</li>
<li data-name="content" data-type="테두리"><strong>content</strong> : content 속성은 콘텐츠 내용을 설정합니다.</li>
<li data-name="counter-increment" data-type="테두리"><strong>counter-increment</strong> : counter-increment 속성은 콘텐츠의 순서 상태를 정의합니다.</li>
<li data-name="counter-reset" data-type="테두리"><strong>counter-reset</strong> : counter-reset 속성은 콘텐츠의 숫자를 초기화합니다.</li>
<li data-name="cursor" data-type="테두리"><strong>cursor</strong> : cursor 속성은 마우스 오버시 마우스 포인터를 정의합니다.</li>
<li data-name="direction" data-type="테두리"><strong>direction</strong> : direction 속성은 문장의 방향을 설정합니다.</li>
<li data-name="display" data-type="테두리"><strong>display</strong> : display 속성은 요소의 성질을 정의합니다.</li>
<li data-name="empty-cells" data-type="테두리"><strong>empty-cells</strong> : empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다.</li>
<li data-name="filter" data-type="테두리"><strong>filter</strong> : filter 속성은 그래픽 효과를 설정합니다.</li>
<li data-name="flex" data-type="테두리"><strong>flex</strong> : flex 속성은 콘텐츠의 성질을 flex로 정의합니다.</li>
<li data-name="flex-basis" data-type="테두리"><strong>flex-basis</strong> : flex-basis 속성은 요소의 기본 단위를 정의합니다.</li>
<li data-name="flex-direction" data-type="테두리"><strong>flex-direction</strong> : flex-direction 속성은 요소의 정렬 방향을 정의합니다.</li>
<li data-name="flex-flow" data-type="테두리"><strong>flex-flow</strong> : flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다.</li>
<li data-name="flex-grow" data-type="테두리"><strong>flex-grow</strong> : flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다.</li>
<li data-name="flex-shrink" data-type="테두리"><strong>flex-shrink</strong> : flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다.</li>
<li data-name="flex-wrap" data-type="테두리"><strong>flex-wrap</strong> : flex-wrap 속성은 요소의 줄 속성을 설정합니다.</li>
<li data-name="float" data-type="테두리"><strong>float</strong> : float 속성은 블록요소의 정렬 상태를 설정합니다.</li>
<li data-name="font" data-type="테두리"><strong>font</strong> : font 속성은 폰트에 관한 설정을 정의합니다.</li>
<li data-name="font-family" data-type="테두리"><strong>font-family</strong> : font-family 속성은 폰트 종류를 설정합니다.</li>
<li data-name="font-size" data-type="테두리"><strong>font-size</strong> : font-size 속성은 폰트 사이즈 속성을 설정합니다.</li>
<li data-name="font-size-adjust" data-type="테두리"><strong>font-size-adjust</strong> : font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다.</li>
<li data-name="font-stretch" data-type="테두리"><strong>font-stretch</strong> : font-stretch 속성은 폰트의 굵기를 정의합니다.</li>
<li data-name="font-style" data-type="테두리"><strong>font-style</strong> : font-style 속성은 폰트의 스타일을 정의합니다.</li>
<li data-name="font-variant" data-type="테두리"><strong>font-variant</strong> : font-variant 속성은 글꼴의 변형을 정의합니다.</li>
<li data-name="font-weight" data-type="테두리"><strong>font-weight</strong> : font-weight 속성은 폰트의 두께를 정의합니다.</li>
<li data-name="grid" data-type="테두리"><strong>grid</strong> : grid-template-columns 속성은 가로 컬럼의 크기와 위치 설정합니다.</li>
<li data-name="grid-area" data-type="테두리"><strong>grid-area</strong> : grid-area 속성은 grid item의 크기와 위치를 결정합니다.</li>
</ul>
</div>
</div>
</div>
</main>
JAVASCRIPT
includes()을 이용하여 사용자가 원하는 값을 입력시에 출력하는 값이 아닌 경우 hide로 숨기고.
0으로 false가 되어, 출력되야하는 값만 hide를 지워주어 원하는 키워드를 출력할 수 있습니다.
includes() 메서드의 특성인 문자열에서 원하는 문자열을 찾고 포함되어 있으면 출력하는 방식을 사용하였습니다.
//선택자
const searchBox = document.querySelector(".search__box input"); //검색 영역
const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트
const searchInfo = document.querySelector(".search__info .num") //전체 갯수
//전체 갯수 구하기
searchInfo.textContent = searchList.length;
//검색 영역
searchBox.addEventListener("keyup", () => {
const searchWord = searchBox.value; //사용자가 입력한 키워드
searchList.forEach(el => {
const cssname = el.dataset.name; //CSS 속성 모든 값
if (cssname.includes(searchWord)) {
el.classList.remove("hide");
} else {
el.classList.add("hide");
}
});
});
CSS
:root {
--htmlColor: #223547;
--cssColor: #472222;
--javascriptColor: #224736;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'NexonLv1Gothic';
color: var(--htmlColor);
}
*,
*:before,
*:after {
box-sizing: border-box;
}
a {
color: var(--htmlColor);
text-decoration: none;
}
li {
list-style: none;
}
/* header */
#header {
display: flex;
justify-content: space-between;
}
#header nav {
margin: 10px;
}
#header nav li {
position: relative;
display: inline;
}
#header nav li a {
width: 30px;
height: 30px;
border: 1px solid var(--htmlColor);
border-radius: 50%;
display: inline-block;
text-align: center;
line-height: 30px;
font-family: 'NexonLv1Gothic';
}
#header nav li.active a {
background-color: var(--htmlColor);
color: #fff;
}
#header nav li .sub {
position: absolute;
left: 0;
top: 35px;
width: 400px;
}
#header nav li .sub li a {
width: auto;
background-color: transparent;
color: var(--htmlColor);
border: 0;
text-align: left;
line-height: 1.2;
}
#header nav li .sub li.active a {
text-decoration: underline;
}
/* main */
#main {
margin: 50px 10px;
}
.search__wrap {
max-width: 1400px;
margin: 0 auto;
border: 3px solid var(--htmlColor);
border-radius: 20px;
background-color: #f1f3f6;
padding: 30px;
text-align: center;
}
.search__wrap>span {
font-size: 20px;
margin-bottom: 20px;
display: inline-block;
}
.search__wrap>h1 {
font-family: 'Tmon';
color: var(--htmlColor);
font-size: 6vw;
margin-bottom: 10px;
}
.search__box {
margin-bottom: 20px;
}
.search__box label {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.search__box input {
border: 2px solid var(--htmlColor);
padding: 15px 40px;
width: 70%;
border-radius: 50px;
font-size: 20px;
}
.search__list li {
text-align: left;
line-height: 1.7;
}
.search__list li.hide {
display: none;
}
.search__list li.show {
display: block;
}
.search__info {
text-align: right;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 2px dashed var(--htmlColor);
}
.search__info .type {
text-align: center;
margin-bottom: 10px;
}
@media (max-width: 600px) {
.search__wrap {
padding: 20px;
}
.search__wrap>span {
font-size: 16px;
margin-bottom: 10px;
}
.search__wrap>h1 {
font-size: 44px;
}
.search__box input {
font-size: 16px;
padding: 12px 30px;
}
}
/* footer */
#footer {
text-align: center;
}
#footer a {
color: #000;
font-family: 'NexonLv1Gothic';
padding-bottom: 50px;
}
#footer a:hover {
text-decoration: underline;
}
728x90
반응형
'Effect' 카테고리의 다른 글
searchEffect03 (6) | 2022.08.22 |
---|---|
QuizEffect - 60문제 (3) | 2022.08.21 |
searchEffect01 (4) | 2022.08.17 |
QuizEffect04 - 객관식(한문제) 유형 (9) | 2022.08.08 |
QuizEffect03 - 주관식(여러문제) 유형 (6) | 2022.08.05 |