다른 명언
728x90
반응형
"Search Effect"는 인터넷 검색 엔진에서 검색어를 입력할 때 나타나는 결과와 관련된 용어로 사용됩니다.
<body class="pink">
<header id="header">
<ul>
<li class="active"><a href="mouseEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li><a href="mouseEffect03.html">3</a></li>
<li><a href="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
<li><a href="mouseEffect06.html">6</a></li>
</ul>
</header>
<!-- header -->
<main id="main">
<div class="search__wrap">
<div class="search__header">
<h2 class="title">❤자바스크립트</h2>
</div>
<div class="search__conts">
<hgroup>
<h3>CSS 속성 검색하기</h3>
<h4>indexOf() / search()</h4>
</hgroup>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" name="search" id="search" placeholder="CSS 속성을 입력해 주세요">
</div>
<div class="search__info">
<div>
CSS 속성 갯수 : <span>0</span>개
</div>
</div>
<div class="search__list">
<ul>
<!-- a -->
<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>
<!-- a -->
<!-- b -->
<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>
<!-- b -->
<!-- c -->
<li data-name="caption-side"><strong>caption-side</strong> : 속성은 표(table) 요소에서 캡션(caption) 요소의 위치를 지정하는 데 사용됩니다.</li>
<li data-name="caret-color"><strong>caret-color</strong> : 텍스트 입력 시 표시되는 캐럿(caret, 입력 포인터)의 색상을 지정하는 속성입니다.</li>
<li data-name="clear"><strong>clear</strong> : 속성은 부모 요소와 자식 요소 간의 레이아웃 배치 관계를 설정하는 CSS 속성 중 하나입니다.</li>
<li data-name="clip"><strong>clip</strong> : 속성은 요소의 표시 영역을 지정하는 데 사용됩니다.</li>
<li data-name="color"><strong>color</strong> : 속성은 텍스트의 색상을 지정하는 속성입니다.</li>
<li data-name="column-count"><strong>column-count</strong> : 속성은 다단(column) 레이아웃 속성 중 하나로, 요소를 여러 개의 열(column)로 나누는 역할을 합니다.</li>
<li data-name="column-fill"><strong>column-fill</strong> : 속성은 다단(column) 레이아웃 속성 중 하나로, 다단 요소의 열(column)을 어떻게 채울지 결정하는 역할을 합니다.</li>
<li data-name="column-gap"><strong>column-gap</strong> : 속성은 다단(column) 레이아웃 속성 중 하나로, 다단 요소의 열(column) 사이의 간격을 지정하는 역할을 합니다.</li>
<li data-name="column-rule"><strong>column-rule</strong> : 속성은 다단 레이아웃(column layout)을 만들 때, 각각의 컬럼(column) 사이에 선을 추가하는 데 사용됩니다.</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> : 속성은 한 열(column)에 들어갈 요소의 크기와 수를 조절하여 여러 개의 열로 레이아웃을 만듭니다.</li>
<li data-name="content"><strong>content</strong> : 속성은 가상 요소(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> : 속성은 마우스 커서의 모양을 지정할 수 있습니다.</li>
<!-- c -->
<!-- d -->
<li data-name="direction"><strong>direction</strong> : 속성은 텍스트의 쓰기 방향을 지정하는 데 사용됩니다.</li>
<li data-name="display"><strong>display</strong> : 속성은 요소의 표시 방법을 지정하는 데 사용됩니다.</li>
<!-- d -->
<!-- e -->
<li data-name="empty-cells"><strong>empty-cells</strong> : 속성은 빈 셀의 표시 여부를 지정하는 데 사용됩니다.</li>
<!-- e -->
<!-- f -->
<li data-name="flex"><strong>flex</strong> : 속성은 요소의 유연한 박스 모델(flexible box model)을 지정하는 데 사용됩니다.</li>
<li data-name="flex-basis"><strong>flex-basis</strong> : 속성은 플렉스 항목(flex item)의 초기 크기를 설정합니다. 기본값은 'auto'입니다. </li>
<li data-name="flex-direction"><strong>flex-direction</strong> : 속성은 플렉스 컨테이너(flex container) 내에서 플렉스 항목(flex 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> : 속성은 플렉스 아이템의 증가 가능한 크기를 지정하는 데 사용됩니다.</li>
<li data-name="flex-shrink"><strong>flex-shrink</strong> : 속성은 flex 요소의 크기를 줄일 수 있는 정도를 지정합니다.</li>
<li data-name="flex-wrap"><strong>flex-wrap</strong> : 속성은 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>
<!-- f -->
<!-- g -->
<li data-name="grid"><strong>grid</strong> : 요소들을 그리드 형태로 배치할 수 있게 해주는 속성입니다.</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="grid-auto-rows"><strong>grid-auto-rows</strong> : 자동 배치되는 그리드 아이템들의 행 크기를 지정하는 속성입니다.</li>
<li data-name="grid-column"><strong>grid-column</strong> : 그리드 아이템이 차지하는 열(column)의 범위를 지정하는 속성입니다.</li>
<li data-name="grid-column-end"><strong>grid-column-end</strong> : 그리드 아이템이 끝나는 열(column)의 위치를 지정하는 속성입니다.</li>
<li data-name="grid-column-gap"><strong>grid-column-gap</strong> : 그리드 컨테이너에서 열(column) 사이의 간격을 지정하는 속성입니다.</li>
<li data-name="grid-column-start"><strong>grid-column-start</strong> : 그리드 아이템이 시작하는 열(column)의 위치를 지정하는 속성입니다.</li>
<li data-name="grid-gap"><strong>grid-gap</strong> : 그리드 컨테이너에서 행(row)과 열(column) 간격을 한 번에 지정하는 단축 속성입니다.</li>
<li data-name="grid-row"><strong>grid-row</strong> : 그리드 아이템이 차지하는 행(row)의 범위를 지정하는 속성입니다.</li>
<li data-name="grid-row-end"><strong>grid-row-end</strong> : 그리드 아이템이 끝나는 행(row)의 위치를 지정하는 속성입니다.</li>
<li data-name="grid-row-gap"><strong>grid-row-gap</strong> : 그리드 컨테이너에서 행(row) 사이의 간격을 지정하는 속성입니다.</li>
<li data-name="grid-row-start"><strong>grid-row-start</strong> : 그리드 아이템이 시작하는 행(row)의 위치를 지정하는 속성입니다.</li>
<li data-name="grid-template"><strong>grid-template</strong> : 그리드 컨테이너에서 그리드의 행(row)과 열(column)의 개수, 크기, 위치 등을 정의하는 속성입니다.</li>
<li data-name="grid-template-areas"><strong>grid-template-areas</strong> : 그리드 컨테이너에서 그리드 영역의 배치를 지정하는 속성입니다. </li>
<li data-name="grid-template-columns"><strong>grid-template-columns</strong> : 그리드 컨테이너에서 열(column)의 크기와 개수를 지정하는 속성입니다.</li>
<li data-name="grid-template-rows"><strong>grid-template-rows</strong> : 그리드 컨테이너에서 행(row)의 크기와 개수를 지정하는 속성입니다. </li>
<!-- g -->
<!-- h -->
<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>
<!-- h -->
<!-- i -->
<li data-name="isolation"><strong>isolation</strong> : 요소의 콘텐츠가 다른 요소와 격리되어야 하는지 여부를 지정하는 속성입니다.</li>
<!-- i -->
<!-- j -->
<li data-name="justify-content"><strong>justify-content</strong> : flex 컨테이너 내의 flex 아이템들을 수평 방향으로 정렬하는 방법을 지정하는 속성입니다.</li>
<!-- j -->
<!-- l -->
<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> : 리스트 마커(marker)의 스타일을 지정하는 속성입니다.</li>
<li data-name="list-style-image"><strong>list-style-image</strong> : 리스트 마커(marker)로 이미지를 사용하도록 지정하는 속성입니다.</li>
<li data-name="list-style-position"><strong>list-style-position</strong> :리스트 마커(marker)의 위치를 지정하는 속성입니다. </li>
<li data-name="list-style-type"><strong>list-style-type</strong> : </li>
<!-- l -->
<!-- m -->
<li data-name="margin"><strong>margin</strong> : 요소 주변의 간격을 지정하는 속성입니다.</li>
<li data-name="margin-bottom"><strong>margin-bottom</strong> : 요소의 아래쪽(margin-bottom)에 대한 간격을 지정하는 속성입니다.</li>
<li data-name="margin-left"><strong>margin-left</strong> : 요소의 왼쪽(margin-left)에 대한 간격을 지정하는 속성입니다.</li>
<li data-name="margin-right"><strong>margin-right</strong> : 요소의 오른쪽(margin-right)에 대한 간격을 지정하는 속성입니다.</li>
<li data-name="margin-top"><strong>margin-top</strong> : 요소의 위쪽(margin-top)에 대한 간격을 지정하는 속성입니다.</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>
<!-- m -->
<!-- o -->
<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>
<!-- o-->
<!-- p -->
<li data-name="padding"><strong>padding</strong> : 문자열(String)을 특정한 길이로 맞추기 위해 사용됩니다.</li>
<li data-name="padding-bottom"><strong>padding-bottom</strong> : 요소의 아래쪽 내부 여백(padding)을 설정하는 속성입니다.</li>
<li data-name="padding-left"><strong>padding-left</strong> : 요소의 왼쪽 내부 여백(padding)을 설정하는 속성입니다.</li>
<li data-name="padding-right"><strong>padding-right</strong> : 요소의 오른쪽 내부 여백(padding)을 설정하는 속성입니다.</li>
<li data-name="padding-top"><strong>padding-top</strong> : 요소의 위쪽 내부 여백(padding)을 설정하는 속성입니다.</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> : 3차원 공간에서 요소의 원근감(perspective)을 설정하는 속성입니다.</li>
<li data-name="perspective-origin"><strong>perspective-origin</strong> : 3차원 공간에서 perspective 속성이 적용된 요소의 원근감(perspective)을 설정하는 중심점(origin)을 지정하는 속성입니다.</li>
<li data-name="pointer-events"><strong>pointer-events</strong> : 요소에 마우스 포인터 이벤트(mouse events)가 적용되는 방식을 지정하는 속성입니다.</li>
<li data-name="position"><strong>position</strong> : 요소의 위치를 지정하는 속성입니다.</li>
<!-- p -->
<!-- q -->
<li data-name="quotes"><strong>quotes</strong> : 문자열을 정의할 때 사용하는 기호를 말합니다.</li>
<!-- q -->
<!-- r -->
<li data-name="resize"><strong>resize</strong> : JavaScript에서 사용되는 이벤트 중 하나입니다. 이 이벤트는 브라우저 창의 크기가 변경될 때 발생합니다.</li>
<li data-name="right"><strong>right</strong> : 요소(element)의 오른쪽 경계(edge)가 뷰포트(viewport)의 오른쪽 가장자리에서 얼마나 떨어져 있는지를 설정합니다.</li>
<!-- r -->
<!-- t -->
<li data-name="tab-size"><strong>tab-size</strong> : 탭 문자(tab character)가 표시될 때의 간격을 지정합니다. 기본값은 8이며, length 값을 통해 설정할 수 있습니다.</li>
<li data-name="table-layout"><strong>table-layout</strong> : 'table' 요소의 레이아웃 방식을 지정합니다.</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> : 텍스트에 적용되는 선(line)의 스타일을 지정합니다.</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> : 요소(element)를 수직 방향(top-down)으로 위치시킬 때 사용됩니다.</li>
<li data-name="transform"><strong>transform</strong> : 요소(element)의 변형(transform)을 지정하는 데 사용됩니다.</li>
<li data-name="transform-origin"><strong>transform-origin</strong> : transform 속성을 사용하여 요소를 변형할 때 변형의 기준점(origin)을 지정하는 데 사용됩니다.</li>
<li data-name="transform-style"><strong>transform-style</strong> : 3D 변환(transform)이 적용된 자식 요소들의 변환 방법을 지정합니다.</li>
<li data-name="transition"><strong>transition</strong> : HTML 요소의 스타일을 변경할 때 애니메이션 효과를 부드럽게 적용하기 위한 방법 중 하나입니다.</li>
<li data-name="transition-delay"><strong>transition-delay</strong> : transition에서 사용되는 속성 중 하나로, 전환 효과가 시작되기 전에 대기하는 시간을 나타냅니다.</li>
<li data-name="transition-duration"><strong>transition-duration</strong> : CSS transition에서 사용되는 속성 중 하나로, 전환 효과가 일어나는 시간을 나타냅니다.</li>
<li data-name="transition-property"><strong>transition-property</strong> : CSS transition에서 사용되는 속성 중 하나로, 전환 효과를 적용할 CSS 속성을 지정합니다.</li>
<li data-name="transition-timing-function"><strong>transition-timing-function</strong> : CSS transition에서 사용되는 속성 중 하나로, 전환 효과의 속도 곡선을 지정합니다.</li>
<!-- t -->
<!-- u -->
<li data-name="unicode-bidi"><strong>unicode-bidi</strong> : 언어의 흐름 방향을 지정하는 데 사용됩니다.</li>
<li data-name="user-select"><strong>user-select</strong> : 요소의 텍스트 선택을 가능하게 하거나 막는 데 사용됩니다.</li>
<!-- u -->
<!-- v -->
<li data-name="vertical-align"><strong>vertical-align</strong> : 인라인 요소의 수직 정렬을 설정하는 데 사용됩니다.</li>
<li data-name="visibility"><strong>visibility</strong> : 요소를 화면에 표시할지 여부를 설정하는 데 사용됩니다.</li>
<!-- v -->
<!-- w -->
<li data-name="white-space"><strong>white-space</strong> : 줄바꿈 및 공백을 설정합니다.</li>
<li data-name="width"><strong>width</strong> : 요소의 가로 크기를 설정합니다.</li>
<li data-name="word-break"><strong>word-break</strong> : 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다.</li>
<li data-name="word-spacing"><strong>word-spacing</strong> : 요소 내부의 단어 간 간격을 조절하는 데 사용됩니다.</li>
<li data-name="word-wrap"><strong>word-wrap</strong> : 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정합니다.</li>
<!-- w -->
<!-- z -->
<li data-name="z-index"><strong>z-index</strong> : 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다.</li>
<!-- z -->
</ul>
</div>
</div>
</div>
</main>
<footer id="footer">
<a href="mailto:ebmdols@naver.com">ebmdols@naver.com</a>
</footer>
</body>
</html>placeholder는 HTML 폼 요소의 힌트나 예시 값을 제공하는 속성입니다. 폼 요소의 값이 비어있는 경우 placeholder에 지정된 텍스트가 표시되며, 사용자가 값을 입력하면 placeholder는 자동으로 사라집니다.
label 은 주로 값을 입력받는 곳에 이름을 적는 태그이며 for 를 통해 for 뒤에 나오는 값 과 id 이름 이 같은것을 찾아 연결시키는 역할을 합니다.
search__info 의 CSS 속성 갯수 : <span>0</span>개 에서 span태그를 이용해 css스타일을 적용하기 위해 넣어 주었습니다.
placeholder는 사용자를 위해, 입력폼에 들어가야 할 값을 미리 알려주는 “(단어나 짧은 문장의)힌트” 역할 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
"data-name"은 HTML 요소에서 사용할 수 있는 사용자 정의 데이터 속성입니다. 이 속성은 "data-"로 시작하며, 이후에는 사용자가 지정한 이름을 붙일 수 있습니다.
클래스 search__list 박스 안에 li태그를 넣고 각 속성과 설명을 썻습니다.
search.css 입니다.
/* header */
#header {
padding: 1.4vw 1.4vw 2vw 1.4vw;
text-align: center;
}
#header ul {
}
#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: 4px solid #fff;
transition: background-color 0.3s;
}
#header li:nth-child(3n+1) a {
background-color: #e7d80d;
color: #000;
}
#header li:nth-child(3n+1) a:hover {
background-color: #585850;
}
#header li:nth-child(3n+2) a {
background-color: #38f57a;
color: #032610;
}
#header li:nth-child(3n+2) a:hover {
background-color: #515c54;
}
#header li:nth-child(3n+3) a {
background-color: #ed476b;
}
#header li:nth-child(3n+3) a:hover {
background-color: #4a3b3f;
}
#header li {}
/* main */
#main {}
/* search__wrap */
.search__wrap {
width: 90%;
margin: 0 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 .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.1vw;
position: relative;
z-index: 10;
border-left: 0.3vw solid #000;
box-sizing: content-box;
text-align: center;
font-size: 2vw;
cursor: pointer;
}
.search__header .btn span:nth-child(3n+1){
background-color: #AF6EE3;
}
.search__header .btn span:nth-child(3n+2){
background-color: #FFEF4A;
}
.search__header .btn span:nth-child(3n+3){
background-color: #F76ECE;
}
.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.15vw rgb(0, 0, 0);
}
.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__box {
text-align: center;
padding: 3vw 2vw;
}
.search__box label {
padding: 1vw;
font-size: 2vw;
font-family: 'CookieRun';
}
.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-size: 2vw;
font-family: 'CookieRun';
outline: none;
}
.search__info {
text-align: right;
padding: 0.6vw 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;
}#header li:nth-child(3n+1) a {
background-color: #e7d80d;
color: #000;
} 페이지 윗부분에 들어가는 목차 상자의 순서별로 3n+1, 3n+2, 3n+3을 입력하여 배경색을 다르게 지정하여 주었습니다.
nth-child는 CSS 선택자의 하나로, 해당 요소의 부모 요소의 자식 요소 중에서 순서상으로 n번째에 해당하는 요소를 선택하는데 사용됩니다.
reset.css 입니다.
@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;
}기본 폰트와 배경을 설정하여 주었습니다.
font-display: swap 옵션은 우선 폴백 폰트로 글자를 렌더링하고, 웹 폰트 로딩이 완료되면 웹 폰트를 적용합니다. 웹 폰트 로딩 여부와 관계없이 항상 텍스트가 보입니다.
스크립트 코드입니다.
<script>
// 선택자
const searchBox = document.querySelector(".search__box input"); //검색
const searchList = document.querySelectorAll(".search__list li") //목록 리스트
// 검색
searchBox.addEventListener("keyup", () => {
const userWord = searchBox.value; //사용자 입력한 키워드
searchList.forEach((el,index) => {
// const cssName = el.getAttribute("data-name")
const cssName = el.dataset.name;
index.querySelectorAll("data-name")
if(cssName.indexOf(userWord)){
//데이터가 있을 때
el.classList.add("hide")
} else {
//데이터가 없을 떄
el.classList.remove("hide")
}
})
});
document.querySelector(".search__info span").textContent = searchList.length;
</script>상수 searchBox에 선택자 .search__box input을 지정하였습니다. 이는 검색 박스를 의미합니다.
상수 searchListdp 선택자 .search__list li 를 지정하였습니다. 이는 목록 리스트를 의미합니다.
위 예제에서 keyup 이벤트가 발생하면, 입력 필드(myInput)에 입력된 내용을 가져와서, 출력 영역(output)에 출력합니다. 이렇게 하면 사용자가 입력 필드에 입력하는 내용을 실시간으로 확인할 수 있습니다.
dataset는 HTML 요소에 사용자 정의 데이터 속성을 설정하고, JavaScript에서 해당 속성에 액세스하는 방법입니다.
getAttribute는 HTML 요소의 속성 값을 가져올 때 사용됩니다. 해당 속성에 엑세스 하는 방법입니다.
addEventListener는 JavaScript의 메서드 중 하나로, HTML 요소에 이벤트 리스너를 등록하는 데 사용됩니다.
이벤트 리스너란, 사용자가 특정 동작을 수행할 때(마우스 클릭, 키보드 입력 등) 해당 요소에서 실행되는 함수입니다.
검색 했을때, hide가 적용되고 삭제 됨에 따라 사용자가 입력한 정보에 맞게 나올 수 있게 됩니다.
728x90