“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
검색 이펙트
검색 이펙트는 검색 결과가 노출되는 것 자체가 인지적 영향을 미치는 현상입니다. 검색 이펙트는 검색 엔진 결과 페이지에서 웹사이트가 노출되는 위치,타이틀,설명 등의 정보에 영향을 받습니다.
검색 이펙트는 사용자들이 검색을 할 때, 검색 결과 페이지에서 웹사이트가 노출되는 위치에 따라 사용자의 인지적인 영향을 받기 때문에 중요합니다. 상위 검색 결과에 노출될수록, 해당 웹사이트를 방문하는 사용자 수가 늘어나고,검색어에 대한 신뢰도가 높아집니다.
HTML
<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> :표(caption) 요소의 캡션(caption) 위치를 지정합니다</li>
<li data-name="caret-color"><strong>caret-color</strong> : 텍스트 입력 컨트롤 내에서 캐럿(caret) 색상을 지정합니다.</li>
<li data-name="clear"><strong>clear</strong> : 요소의 좌우/상하측 형제 요소(float이나 inline-block 요소)와의 관계를 지정합니다.</li>
<li data-name="clip"><strong>clip</strong> : 요소의 보이는 부분을 클리핑(clipping)합니다.</li>
<li data-name="color"><strong>color</strong> : 요소의 텍스트 색상을 지정합니다. </li>
<li data-name="column-count"><strong>column-count</strong> : 다단 컨텐츠(multi-column content)를 사용할 때 열(column)의 개수를 지정합니다</li>
<li data-name="column-fill"><strong>column-fill</strong> : 다단 컨텐츠의 마지막 열(column)의 채우기(fill) 방식을 지정합니다</li>
<li data-name="column-gap"><strong>column-gap</strong> : 다단 컨텐츠에서 열(column) 사이의 간격을 지정합니다</li>
<li data-name="column-rule"><strong>column-rule</strong> : 다단 컨텐츠의 열(column) 경계선(border)을 지정합니다.</li>
<li data-name="column-rule-color"><strong>column-rule-color</strong> : 다단 컨텐츠의 열(column) 경계선(border) 색상을 지정합니다.</li>
<li data-name="column-rule-style"><strong>column-rule-style</strong> : 다단 컨텐츠의 열(column) 경계선(border) 스타일을 지정합니다</li>
<li data-name="column-rule-width"><strong>column-rule-width</strong> : 다단 컨텐츠의 열(column) 경계선(border) 두께를 지정합니다</li>
<li data-name="column-span"><strong>column-span</strong> : 요소를 다단 컨텐츠(multi-column content)로 분할할 때, 열(column)을 건너뛸 수 있는지 여부를 지정합니다</li>
<li data-name="column-width"><strong>column-width</strong> : 다단 컨텐츠에서 각 열(column)의 너비를 지정합니다.</li>
<li data-name="columns"><strong>columns</strong> : 다단 컨텐츠(multi-column content)를 사용할 때 열(column)의 너비와 개수를 지정합니다</li>
<li data-name="content"><strong>content</strong> : 가상 요소(pseudo-element)의 내용(content)을 지정합니다.</li>
<li data-name="counter-increment"><strong>counter-increment</strong> : 요소 내부에서 사용되는 하나 이상의 카운터(counter) 값을 증가시킵니다</li>
<li data-name="counter-reset"><strong>counter-reset</strong> : 요소 내부에서 사용되는 하나 이상의 카운터(counter) 값을 초기화합니다</li>
<li data-name="cursor"><strong>cursor</strong> : 마우스 커서의 모양을 지정합니다. </li>
<li data-name="direction"><strong>direction</strong> : 요소의 텍스트 방향(direction)을 지정합니다.</li>
<li data-name="display"><strong>display</strong> : 요소의 표시(display) 방법을 지정합니다.</li>
<li data-name="empty-cells"><strong>empty-cells</strong> : HTML 테이블에서 빈 셀(empty cell)의 표시 여부를 정의하는 CSS 속성입니다.</li>
<li data-name="filter"><strong>filter</strong> : 이미지나 요소에 대해 적용할 수 있는 CSS 속성으로, 흐림(blur), 색상 반전(invert), 채도 조정(saturate) 등 다양한 필터 효과를 설정할 수 있습니다.</li>
<li data-name="flex"><strong>flex</strong> : 요소의 유연한(=flexible) 박스 모델을 정의하는 CSS 속성으로, flex container와 flex item으로 구성됩니다.</li>
<li data-name="flex-basis"><strong>flex-basis</strong> : flex item의 초기 크기를 설정하는 CSS 속성입니다. </li>
<li data-name="flex-direction"><strong>flex-direction</strong> : flex container에서 flex item의 배치 방향을 설정하는 CSS 속성입니다</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 item이 남은 공간을 얼마나 채울지를 설정하는 CSS 속성입니다.</li>
<li data-name="flex-shrink"><strong>flex-shrink</strong> : flex item의 크기가 flex container보다 작아지는 경우 얼마나 줄어들지를 설정하는 CSS 속성입니다.</li>
<li data-name="flex-wrap"><strong>flex-wrap</strong> : flex item이 flex container 내에 한 줄로 배치되지 않고 여러 줄로 나뉘어 배치되는지를 설정하는 CSS 속성입니다.</li>
<li data-name="float"><strong>float</strong> : 요소를 좌우 방향으로 띄워서 배치하는 CSS 속성입니다.</li>
<li data-name="font"><strong>font</strong> : 글꼴과 글자 크기, 글자 굵기 등을 설정하는 CSS 속성입니다</li>
<li data-name="grid"><strong>grid</strong> : 행(Rows)과 열(Columns)을 가지며, 그리드 아이템(Items)을 배치할 수 있습니다.</li>
<li data-name="grid-area"><strong>grid-area</strong> : 그리드 유닛이 묶인 영역으로 고유한 식별자를 가지며, 식별자를 통해 요소를 배치할 수 있습니다.</li>
<li data-name="grid-auto-columns"><strong>grid-auto-columns</strong> : 암시적 열(Track)의 크기를 정의합니다.</li>
<li data-name="grid-auto-flow"><strong>grid-auto-flow</strong> : 배치하지 않은 아이템(Item)을 어떤 방식의 '자동 배치 알고리즘'으로 처리할지 정의합니다.</li>
<li data-name="grid-auto-rows"><strong>grid-auto-rows</strong> : 암시적 행(Track)의 크기를 정의합니다.</li>
<li data-name="grid-column"><strong>grid-column</strong> : 컨테이너에 Grid 트랙의 크기들을 지정해주는 속성입니다.</li>
<li data-name="grid-column-end"><strong>grid-column-end</strong> : 그리드 아이템의 열 끝 위치 지정합니다.</li>
<li data-name="grid-column-gap"><strong>grid-column-gap</strong> : 열 사이의 간격을 설정합니다.</li>
<li data-name="grid-column-start"><strong>grid-column-start</strong> : 특정 item을 표시하기 시작할 열을 지정합니다.</li>
<li data-name="grid-gap"><strong>grid-gap</strong> : 그리드 셀 사이의 간격입니다.</li>
<li data-name="grid-row"><strong>grid-row</strong> : grid-row-start/end 속성의 단축속성입니다.</li>
<li data-name="grid-row-end"><strong>grid-row-end</strong> : 특정 item을 표시하기 끝마칠 행을 지정합니다.</li>
<li data-name="grid-row-gap"><strong>grid-row-gap</strong> : 행 사이의 간격을 설정합니다.</li>
<li data-name="grid-row-start"><strong>grid-row-start</strong> : 특정 item을 표시하기 시작할 행을 지정합니다.</li>
<li data-name="grid-template"><strong>grid-template</strong> : 명시적 행(Track)의 크기를 정의합니다.</li>
<li data-name="grid-template-areas"><strong>grid-template-areas</strong> : 각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법입니다.</li>
<li data-name="grid-template-columns"><strong>grid-template-columns</strong> : 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성입니다.</li>
<li data-name="grid-template-rows"><strong>grid-template-rows</strong> : 명시적 행(Track)의 크기를 정의합니다.</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> : 플렉스 요소의 수평 방향 정렬 방식을 설정합니다.</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> : 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다.</li>
<li data-name="list-style-position"><strong>list-style-position</strong> : 항목을 어느 위치에서 시작할지 지정합니다.</li>
<li data-name="list-style-type"><strong>list-style-type</strong> : 리스트에 다양한 마커(marker)를 적용할 수 있습니다.</li>
<li data-name="margin"><strong>margin</strong> : 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다.</li>
<li data-name="margin-bottom"><strong>margin-bottom</strong> : 요소의 아래쪽에 바깥 여백 영역margin area을 설정합니다.</li>
<li data-name="margin-left"><strong>margin-left</strong> : 요소의 왼쪽에 바깥 여백 영역margin area을 설정합니다.</li>
<li data-name="margin-right"><strong>margin-right</strong> : 요소의 오른쪽에 바깥 여백 영역margin area을 설정합니다.</li>
<li data-name="margin-top"><strong>margin-top</strong> : 요소의 위쪽에 바깥 여백 영역margin area을 설정합니다.</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> : 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다</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> : 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다</li>
<li data-name="outline"><strong>outline</strong> : 모든 외곽선 속성을 한꺼번에 지정합니다.</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> : 요소의 외곽선 스타일을 설정합니다</li>
<li data-name="outline-width"><strong>outline-width</strong> : 요소의 외곽선 넓이을 설정합니다</li>
<li data-name="overflow"><strong>overflow</strong> : 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다.</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-origin"><strong>perspective-origin</strong> : 뷰어가 보고 있는 위치를 결정합니다. 원근감 속성에 의해 소실점으로 사용됩니다.</li>
<li data-name="perspective"><strong>perspective</strong> : 3D 위치 요소에 약간의 원근감을 주기 위해 z=0 평면과 사용자 사이의 거리를 결정합니다.</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>: 인용 부호(quote)의 모양을 정의하는 CSS 속성입니다</li>
<li data-name="resize"><strong>resize</strong>: 요소의 크기 조절 가능 여부를 정의하는 CSS 속성입니다</li>
<li data-name="right"><strong>right</strong>: 요소의 오른쪽 위치를 설정하는 CSS 속성입니다.</li>
<li data-name="tab-size"><strong>tab-size</strong>: 탭 문자(tab)의 크기를 설정하는 CSS 속성입니다.</li>
<li data-name="table-layout"><strong>table-layout</strong>: 테이블의 셀 너비를 조정하는 방식을 설정하는 CSS 속성입니다</li>
<li data-name="top"><strong>top</strong>: 요소의 상단 위치를 설정하는 CSS 속성입니다</li>
<li data-name="transform"><strong>transform</strong>: 요소의 변환(translation, rotation, scaling) 효과를 정의하는 CSS 속성입니다.</li>
<li data-name="transform-origin"><strong>transform-origin</strong>: 요소의 변환 기준점을 설정하는 CSS 속성입니다.</li>
<li data-name="transform-style"><strong>transform-style</strong>: 3D 변환된 자식 요소가 3D 공간에 있는 것처럼 렌더링되는지 여부를 설정하는 CSS 속성입니다.</li>
<li data-name="transition"><strong>transition</strong>: CSS 속성의 변화를 부드럽게 전환하는 효과를 설정하는 CSS 속성입니다</li>
<li data-name="transition-delay"><strong>transition-delay</strong>: 속성 변화가 시작되기 전에 대기하는 시간을 설정하는 CSS 속성입니다.</li>
<li data-name="transition-duration"><strong>transition-duration</strong>: 속성 변화가 일어나는 지속시간을 설정하는 CSS 속성입니다.</li>
<li data-name="transition-property"><strong>transition-property</strong>: 전환 효과를 적용할 CSS 속성을 지정하는 CSS 속성입니다. 이 속성에 지정한 속성이 변경될 때, 전환 효과가 적용됩니다.</li>
<li data-name="transition-timing-function"><strong>transition-timing-function</strong>: 전환 효과의 타이밍 함수를 지정하는 CSS 속성입니다.</li>
<li data-name="unicode-bidi"><strong>unicode-bidi</strong>: 언어 흐름과 문자 흐름의 방향을 설정하는 CSS 속성입니다</li>
<li data-name="user-select"><strong>user-select</strong>: 사용자 선택 가능 여부를 지정하는 CSS 속성입니다.</li>
<li data-name="vertical-align"><strong>vertical-align</strong>: 요소의 수직 정렬 방식을 설정하는 CSS 속성입니다.</li>
<li data-name="visibility"><strong>visibility</strong>: 요소의 표시 여부를 설정하는 CSS 속성입니다</li>
<li data-name="word-spacing"><strong>word-spacing</strong>: 단어 사이의 간격을 설정하는 CSS 속성입니다.</li>
<li data-name="word-wrap"><strong>word-wrap</strong>: 텍스트 줄 바꿈을 설정하는 CSS 속성입니다.</li>
<li data-name="z-index"><strong>z-index</strong>: 요소의 쌓이는 순서를 설정하는 CSS 속성입니다</li>
</ul>
</div>
</div>
</div>
</main>
<footer id="footer">
<a href="mailto:jeongyouna_@naver.com">jeongyouna_@naver.com</a>
</footer>HTML
- body 태그 안에 header,main,footer구역을 만들어 줍니다.
- header 구역에 목록태그, ul 태그 ,li태그를 사용해서 목록을 만들어 줍니다.
- main 구역을 나눠서 각각 class명을 입력하고 원하는 텍스트를 알맞은 태그를 사용해서 텍스트를 입력해 줍니다.
- footer에는 이메일을 보낼 수 있게 자신의 이메일을 입력해 줍니다.
CSS - reset
@font-face {
font-family: 'CookieRun';
font-weight: 400;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunRegular.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'CookieRun';
font-weight: 700;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBold.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'CookieRun';
font-weight: 900;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBlack.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBlack.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBlack.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBlack.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/cookierun/CookieRunBlack.ttf') format("truetype");
font-display: swap;
}
*, *:before, *:after {
margin:0;
padding:0;
box-sizing:border-box;
}
html,
body {
width: 100%;
height: 100%;
font-family: 'CookieRun';
}
body.pink{
background-color: #FFD9F4;
background-image:
linear-gradient(90deg, #FFB9EA 0px, #FFB9EA 1px, transparent 1px, transparent 99px, transparent 100px),
linear-gradient(#FFB9EA 0px, #FFB9EA 1px, transparent 1px, transparent 99px, transparent 100px),
linear-gradient(#FFB9EA 0px, #FFB9EA 1px, transparent 1px, transparent 99px, transparent 100px),
linear-gradient(90deg, #FFB9EA 0px, #FFB9EA 1px, transparent 1px, transparent 99px, transparent 100px),
linear-gradient(transparent 0px, transparent 5px, #FFD9F4 5px, #FFD9F4 95px, transparent 95px, transparent 100px),
linear-gradient(90deg, #FFB9EA 0px, #FFB9EA 1px, transparent 1px, transparent 99px, #FFB9EA 99px, #FFB9EA 100px),
linear-gradient(90deg, transparent 0px, transparent 5px, #FFD9F4 5px, #FFD9F4 95px, transparent 95px, transparent 100px),
linear-gradient(#FFB9EA, #FFB9EA);
background-size:100px 100%, 100% 100px, 100% 10px, 10px 100%, 100% 100px, 100px 100%, 100px 100%, 100px 100px, 100px 100px;
}
body.yellow{
background-color: #FFEF4A;
background-image:
linear-gradient(90deg, #E6D535 0px, #E6D535 1px, transparent 1px, transparent 99px, transparent 100px),
linear-gradient(#E6D535 0px, #E6D535 1px, transparent 1px, transparent 99px, transparent 100px),
linear-gradient(#E6D535 0px, #E6D535 1px, transparent 1px, transparent 99px, transparent 100px),
linear-gradient(90deg, #E6D535 0px, #E6D535 1px, transparent 1px, transparent 99px, transparent 100px),
linear-gradient(transparent 0px, transparent 5px, #FFEF4A 5px, #FFEF4A 95px, transparent 95px, transparent 100px),
linear-gradient(90deg, #E6D535 0px, #E6D535 1px, transparent 1px, transparent 99px, #E6D535 99px, #E6D535 100px),
linear-gradient(90deg, transparent 0px, transparent 5px, #FFEF4A 5px, #FFEF4A 95px, transparent 95px, transparent 100px),
linear-gradient(#E6D535, #E6D535);
background-size: 100px 100%, 100% 100px, 100% 10px, 10px 100%, 100% 100px, 100px 100%, 100px 100%, 100px 100px, 100px 100px;
}
CSS - search
#header {
padding: 1.4vw 1.4vw 2vw 1.4vw;
text-align: center;
}
#header li {
list-style: none;
display: inline;
}
#header li a {
text-decoration: none;
width: 50px;
height: 50px;
line-height: 40px;
display: inline-block;
border-radius: 50%;
text-align: center;
color: #fff;
border: 5px solid #fff;
transition: background-color 0.3s;
}
#header li:nth-child(3n+1) a {
background-color: #AF6EE3;
border-color: #9659C9;
color: #EEDAFF
}
#header li:nth-child(3n+1) a:hover {
background-color: #9659C9;
}
#header li:nth-child(3n+2) a {
background-color: #FFEF4A;
border-color: #F2C81E;
color: #675E3B;
}
#header li:nth-child(3n+2) a:hover {
background-color: #F2C81E;
}
#header li:nth-child(3n+3) a {
background-color: #F76ECE;
border-color: #C04D9E;
color: #FFDEF5;
}
#header li:nth-child(3n+3) a:hover {
background-color: #C04D9E;
}
/* main */
#main {}
/* search__wrap */
.search__wrap {
margin: 0 auto;
width: 90%;
margin: 5% auto;
background-color: #fff;
border: 0.3vw solid #000;
border-top-left-radius: 3vw;
border-bottom-right-radius: 3vw;
box-shadow: 1vw 1vw 0px #000;
transition: box-shadow 0.3s;
overflow: hidden;
}
.search__wrap:hover {
box-shadow: 0.5vw 0.5vw 0px #000;
}
.search__header {
border-bottom: 0.3vw solid #000;
padding: 0 0 0 3vw;
background-color: #AF6EE3;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.search__header::before {
content: "";
width: 90%;
height: 0.3vw;
background: #000;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-10px);
border-radius: 5px;
}
.search__header::after {
content: "";
width: 90%;
height: 0.3vw;
background: #000;
position: absolute;
right: 0;
top: 50%;
transform: translateY(4px);
border-radius: 5px;
}
.search__header .title {
position: relative;
background: #AF6EE3;
position: relative;
z-index: 10;
padding-right: 35px;
padding: 0.6vw 8vw 0.6vw 5vw;
}
.search__header .btn {
display: flex;
}
.search__header .btn span {
display: block;
width: 3vw;
height: 3vw;
line-height: 3.9vw;
position: relative;
z-index: 10;
border-left: 0.3vw solid #000;
box-sizing: content-box;
text-align: center;
font-size: 2vw;
cursor: pointer;
}
.search__conts hgroup {
text-align: center;
padding: 3vw 5vw;
border-bottom: 0.3vw solid #000;
}
.search__conts hgroup h3 {
color: #FFEF4A;
font-size: 8vw;
text-shadow: 0.4vw 0.4vw 0px #000;
-webkit-text-stroke: 0.2vw rgb(0, 0, 0);
}
.search__conts hgroup h4 {
color: #AF6EE3;
font-size: 6vw;
text-shadow: 0.4vw 0.4vw 0px #000;
-webkit-text-stroke: 0.2vw rgb(0, 0, 0);
}
.search__box {
text-align: center;
padding: 1vw;
border-bottom: 0.3vw dashed #000;
}
.search__box label {
padding: 1vw;
}
.search__box input {
border: 0.3vw solid #000;
box-shadow: 0.3vw 0.3vw 0 #000;
width: 80%;
padding: 1vw 2vw;
border-radius: 50px;
font-family: 'cookieRun';
outline: none;
}
.search__list ul {
padding: 3vw;
}
.search__info {
text-align: right;
padding: 0.1vw 2vw;
border-top: 0.3vw dashed #000;
border-bottom: 0.3 dashed #000;
}
.search__list li {
list-style: none;
line-height: 2;
}
.search__list li.hide {
display: none;
}
/* footer */
#footer {
text-align: center;
padding: 3vw;
}
#footer a {
color: #000;
}CSS
- 2군데로 나눠서 reset에는 폰트와 전체적인 바디의 색감을 잡아주고
- search에는 검색 박스를 만들어 줍니다. 반응형으로 볼 때 화면이 꺠지지 않기 위해 px단위를 vw로 단위를 바꿔줍니다.
Javascript
<script>
//선택자
const searchBox = document.querySelector(".search__box input"); //검색
const searchList = document.querySelectorAll(".search__list li"); //목록 리스트
const searchInfo = document.querySelector(".search__info span");
//console.log(searchInfo);
searchSum.textContent = searchLisst.length;
//검색
searchBox.addEventListener("keyup", () => {
const userWord = searchBox.value; //사용자가 입력한 키워드를 가져올 때 value를 씀
searchList.forEach((el,index) => {
// const cssName = el.getAttribute("data-name");
const cssName = el.dataset.name; //지역변수
//searchSum.textContent = i;
if(cssName.indexOf(userWord)){
//데이터 있으면
el.classList.add("hide");
} else {
//데이터 없을 때
el.classList.remove("hide");
}
searchInfo.textContent = index
})
});
</script>javascript
- document.write.querySelector(클래스명)를 통해 해당 클래스명을 가지고 있는 태그들을 각 변수에 저장해 줍니다.
- addEventListener("keyup")메서드를 사용해 사용자가 입력한 내용을 지역 변수 userWord에 저장합니다.
- 사용자가 입력한 문자열이 searchList에 있는 값 중에 포함되어 있는지 확인하여 포함된 리스트를 화면에 보여주는 로직을 실행합니다.
- 이 때 비교대상은 searchList에 있는 li이므로 그 수만큼 forEach()를 사용해서 반복 실행합니다.
- if..eles문을 사용하여 사용자가 입력한 값의 데이터가 있을 경우 (ture)보여주고 없을 경우 (false)숨겨줍니다.
- css속성 목록의 총 갯수를 입력하기 위해 searchList.lenghth를 통해 얻은 값을 .textContent를 사용해 화며에 보여줍니다.
📍속성 정리
| 속성 | 설명 |
| keyup | 키보드에서 키를 누르고 떼는 순간을 감지하는 이벤트 |
| indexOf | 문자열 메서드, 특정 문자열이 다른 문자열 내에서 처음으로 등장하는 위치를 찾아주는 메서드 |
| search() | 문자열 메서드, 특정 문자열이 다른 문자열 내에서 등장하는 첫번째 위치를 찾아주는 메서드 |
| getAttribute() | DOM 요소에서 속성값을 가져오는 메서드 |
| dataset | DOM요소의 data-* 속성 값을 가져오거나 설정하는데 사용하는 속성 |
| textContent | DOM요소의 텍스트 콘테츠를 가져오거나 수정하는 속성 |
완성된 검색 이펙트