“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
Search_Effect : 검색 효과 웹페이지 만들기
검색하면 연관데이터가 나오는 웹페이지를 만들어 보았습니다.
✈. 완성화면 : 검색해 보세요!
✈. HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>검색 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/search.css">
</head>
<body class="pink">
<header id="header">
<ul>
<li class="active"><a href="mouseEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li><a href="mouseEffect03.html">3</a></li>
<li><a href="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
<li><a href="mouseEffect06.html">6</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="search__wrap">
<div class="search__header">
<h2 class="title">CSS 검색하기</h2>
</div>
<div class="search__conts">
<hgroup>
<h3>자바스크립트 검색하기</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="grid-auto-rows"><strong>grid-auto-rows</strong> : 그리드 아이템의 행 높이를 설정합니다.</li>
<li data-name="grid-column"><strong>grid-column</strong> : 그리드 아이템의 열 위치와 span 값을 설정합니다.</li>
<li data-name="grid-column-end"><strong>grid-column-end</strong> : 그리드 아이템의 끝나는 열 위치를 설정합니다.</li>
<li data-name="grid-column-ga"><strong>grid-column-gap</strong> : 그리드 컨테이너의 열 사이의 간격을 설정합니다.</li>
<li data-name="grid-column-start"><strong>grid-column-start</strong> : 그리드 아이템의 시작하는 열 위치를 설정합니다.</li>
<li data-name="grid-gap"><strong>grid-gapv 그리드 컨테이너의 행과 열 사이의 간격을 설정합니다.</li>
<li data-name="grid-row"><strong>grid-row</strong> : 그리드 아이템의 행 위치와 span 값을 설정합니다.</li>
<li data-name="grid-row-end"><strong>grid-row-end</strong> : 그리드 아이템의 끝나는 행 위치를 설정합니다.</li>
<li data-name="grid-row-gap"><strong>grid-row-gap</strong> : 그리드 컨테이너의 행 사이의 간격을 설정합니다.</li>
<li data-name="grid-row-start"><strong>grid-row-start</strong> : 그리드 아이템의 시작하는 행 위치를 설정합니다.</li>
<li data-name="grid-template"><strong>grid-template</strong> : 그리드 레이아웃의 행과 열 크기, 간격 및 흐름을 설정합니다.</li>
<li data-name="grid-template-areas"><strong>grid-template-areas</strong> : 그리드 레이아웃의 영역 이름을 설정하고 영역의 배치를 지정합니다.</li>
<li data-name="grid-template-columns"><strong>grid-template-columns</strong> : 그리드 레이아웃의 열 크기와 간격을 설정합니다.</li>
<li data-name="grid-template-rows"><strong>grid-template-rows</strong> : 그리드 레이아웃의 행 크기와 간격을 설정합니다.</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> : 목록 마커로 사용할 이미지를 설정합니다.</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> : 요소의 외부 여백을 한번에 설정합니다.</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="tmin-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="overflowv"><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="caption-side"><strong>caption-side</strong> : 표나 테이블과 같은 요소의 캡션 위치를 지정하는 데 사용됩니다. </li>
<li data-name="caret-color"><strong>caret-color</strong> : 텍스트 입력 커서의 색상을 지정하는 데 사용됩니다.</li>
<li data-name="clear"><strong>clear</strong> : float 속성을 가지고 있는 요소들 사이에서의 동작을 지정하는 데 사용됩니다.</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> : 다단 레이아웃을 만들 때 열의 수를 지정하는 데 사용됩니다.</li>
<li data-name="column-fill"><strong>column-fill</strong> : CSS 다단 레이아웃에서 열이 다 찼을 때, 다음 열에 컨텐츠가 어떻게 배치될지를 지정하는 속성입니다.</li>
<li data-name="column-gap"><strong>column-gap</strong> : 다단 레이아웃에서 열 사이의 간격을 지정하는 속성입니다.</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> : 요소가 여러 열을 걸쳐서 표시되도록 할 때 사용하는 속성입니다. </li>
<li data-name="column-width"><strong>column-width</strong> : 다단 레이아웃에서 열의 폭을 지정하는 속성입니다.</li>
<li data-name="columns"><strong>columns</strong> : 다단 레이아웃에서 열의 수와 폭을 동시에 지정하는 속성입니다.</li>
<li data-name="content"><strong>content</strong> : 가상 요소에서 사용되는 속성으로, 요소의 콘텐츠를 생성하거나 대체하는 데 사용됩니다.</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> : 마우스 커서의 모양을 지정하는 속성으로, pointer, text, default 등의 값을 가질 수 있습니다.</li>
<li data-name="direction"><strong>direction</strong> : 텍스트의 쓰기 방향을 지정하는 속성입니다. </li>
<li data-name="display"><strong>display</strong> : 요소의 표시 방법을 지정하는 속성입니다.</li>
<li data-name="empty-cells"><strong>empty-cells</strong> : 빈 셀의 표시 여부를 지정하는 속성입니다.</li>
<li data-name="filter"><strong>filter</strong> : 이미지나 요소에 필터 효과를 적용하는 속성입니다.</li>
<li data-name="flex"><strong>flex</strong> : flex-grow, flex-shrink, flex-basis 속성을 각각 단축하여 사용하는 속성입니다.</li>
<li data-name="flex-basis"><strong>flex-basis</strong> : flex 아이템의 초기 크기를 지정하는 속성입니다.</li>
<li data-name="flex-direction"><strong>flex-direction</strong> : Flexbox 레이아웃에서 flex 컨테이너의 주 축(main axis) 방향을 지정하는 속성입니다.</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 아이템이 flex 컨테이너 내에서 차지하는 공간의 비율을 지정하는 속성입니다.</li>
<li data-name="flex-shrink"><strong>flex-shrink</strong> : flex 아이템이 flex 컨테이너 내에서 차지하는 공간이 줄어들 때, 감소하는 비율을 지정하는 속성입니다.</li>
<li data-name="flex-wrap"><strong>flex-wrap</strong> : Flexbox 레이아웃에서 flex 아이템이 flex 컨테이너 내에서 한 줄에 표시될 수 없을 때, 줄바꿈 여부를 지정하는 속성입니다.</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> : 폰트의 너비을 설정합니다.</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> : 이모지 글꼴 글리프를 설정합니다.</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 그리드 레이아웃을 생성하기 위한 속성입니다. </li>
<li data-name="grid-area"><strong>grid-area</strong> : 특정 셀 위치에 요소를 배치하기 위한 속성으로, 행과 열의 시작점과 끝점을 지정하여 요소를 배치할 수 있습니다.</li>
<li data-name="grid-auto-columns"><strong>grid-auto-columns</strong> : 그리드 레이아웃에서 자동으로 생성되는 열의 너비를 설정하는 속성입니다.</li>
<li data-name="grid-auto-flow"><strong>grid-auto-flow</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>text-decoration-style</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>요소의 위쪽 위치를 지정합니다.</li>
<li data-name ="transform"><strong>transform</strong>요소에 2D/3D 변환 효과를 추가합니다.</li>
<li data-name ="transform-origin"><strong>transform-origin</strong>요소의 변환 중심점을 지정합니다.</li>
<li data-name ="transform-style"><strong>transform-style</strong>3D 변환 요소의 자식 요소들에 대한 변환 효과 적용 여부를 지정합니다.</li>
<li data-name ="transition"><strong>transition</strong>요소의 상태 변화에 대한 애니메이션 효과를 지정합니다.</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>요소의 표시 여부를 지정합니다.</li>
<li data-name ="white-spacewhite-space"><strong>white-spacewhite-space</strong> 속성은 줄바꿈 및 공백을 설정합니다.</li>
<li data-name ="width"><strong>width</strong> 속성은 요소의 가로 크기를 설정합니다.</li>
<li data-name ="word-breakword-break"><strong>word-breakword-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>HTML/CSS에서 요소(element)들의 수직 위치를 결정하는 속성으로, 값이 높을수록 다른 요소들보다 위에 나타나게 됩니다.</li>
</ul>
</div>
</div>
</div>
</main>
<footer id="footer"></footer>🏁.POINT
01. data-name속성을 사용하여 검색하면 도출 될 데이터를 넣어줍니다!
🏳🌈. data-name속성
| data-name | data-name 속성을 사용하면 HTML 요소에 개발자가 정의한 이름을 할당할 수 있습니다. 이러한 속성은 자바스크립트와 함께 사용되어 웹 페이지의 동작 및 디자인을 조정하는 데 유용합니다. | |
| data-name 예시 | <div id="my-element" data-name="example"></div> |
|
| 위의 코드에서 data-name 속성을 사용하여 my-element라는 ID를 가진 div 요소에 example이라는 이름을 할당하였습니다. 이제 자바스크립트나 CSS에서 이 요소를 참조하고 조작할 수 있습니다. | ||
✈.CSS
#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;
font-size: 2vw;
font-family: "CookieRun";
}
.search__box input {
border: 2px solid #000;
box-shadow: 0.3vw 0.3vw 0 #000;
width: 80%;
padding: 1vw 2vw;
border-radius: 50px;
font-size: 2vw;
font-family: "CookieRun";
outline: none;
}
.search__info {
text-align: right;
padding: 0.3vw 2vw;
border-top: 0.3vw dashed #000;
border-bottom: 0.3vw dashed #000;
}
.search__list ul {
padding: 3vw;
}
.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;
}🏁.POINT
01. 자바스크립트로 추가해 줄 hide에 대한 css도 작성합니다.
✈.JAVASCRIPT
const searchBox = document.querySelector(".search__box input"); //검색
const searchList = document.querySelectorAll(".search__list li"); //목록리스트
const searchInfo = document.querySelector(".search__info span"); //검색가능한 데이터 개수
searchInfo.textContent = searchList.length;
//
searchBox.addEventListener("keyup", () => {
const userWord = searchBox.value; // 사용자가 입력한 키워드
searchList.forEach((el,index) => {
const cssName = el.dataset.name;
if(cssName.indexOf(userWord)){
// 데이터가 있을 때
el.classList.add("hide");
} else {
// 데이터가 없을 때
el.classList.remove("hide");
}
})
});🏁.POINT
| addEventListener() | target.addEventListener(type, listener [, options]); |
| target | 이벤트가 발생하는 대상 요소 |
| type | 이벤트의 종류(ex. keyup, mousemove, keydown, submit) |
| listener | 이벤트가 발생했을 때 실행할 함수 |
| options | 선택적으로 전달할 수 있는 객체로, 이벤트의 동작을 구체화하는 추가 옵션을 지정할 수 있습니다. |
이벤트 keyup : 키보드에서 키가 눌렸다가 떼어질 때 발생하는 이벤트
✈. searchInfo.textContent = searchList.length;
검색 가능한 전체 데이터의 개수를 숫자로 보여주기 위한 구문
✈. if(cssName.indexOf(userWord)){
el.classList.add("hide");
- indexOf() : 문자열을 검색하여, 주어진 값과 일치하는 첫번째 위치값(index)을 반환합니다.