μλ°μ€ν¬λ¦½νΈ : κ²μ ν¨κ³Ό : indexOf()
μλ°μ€ν¬λ¦½νΈμ λ€μν ν¨κ³Όλ€ μ€, ν΄λΉνλ λ¬Έμμ΄μ μ°Ύμ μ μλ κ²μ ν¨κ³Όμ λλ€. indexOf() λ©μλλ₯Ό μ΄μ©νμ¬ CSSμ λ€μν μμ±μ κ²μν μ μλ μΉμ¬μ΄νΈλ₯Ό μμ ν΄ λ³΄λλ‘ νκ² μ΅λλ€.
HTML μμ€
HTMLλ‘ λΌλλ₯Ό λ¨Όμ μ‘μμ£Όμμ΅λλ€. ν€λ μμμλ λ΄λΉκ²μ΄μ λ©λ΄λ₯Ό, λ©μΈ μμμλ κ²μμ°½, νμ λͺ©λ‘λ€μ μμ±ν΄ μ£Όμμ΅λλ€. μλ μμ€λ λ©μΈ μμμ HTML μμ€λ‘, λλ¨Έμ§ μμμ μμ€λ νλ¨μ 'μλ³Έ μμ€ λ³΄κΈ°' λ²νΌμ ν΄λ¦νλ©΄ νμΈν μ μμ΅λλ€.
<main id="main">
<div class="search__wrap">
<span>indexOf()λ₯Ό μ΄μ©νμ¬ κ²μνκΈ°</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>μ 체 μμ± κ°―μ : <span class="num"> </span></div>
</div>
<div class="search__list">
<div class="css">
<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="background"><strong>background</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-position-x"><strong>background-position-x</strong> : λ°±κ·ΈλΌμ΄λ μ΄λ―Έμ§μ xμΆ μμΉ μμμ μ€μ ν©λλ€.</li>
<li data-name="background-porsition-y"><strong>background-porsition-y</strong> : λ°±κ·ΈλΌμ΄λ μ΄λ―Έμ§μ yμΆ μμΉ μμμ μ€μ ν©λλ€.</li>
<li data-name="background-repeat"><strong>background-repeat</strong> : λ°±κ·ΈλΌμ΄λ μ΄λ―Έμ§μ λ°λ³΅ μ¬λΆλ₯Ό μ€μ ν©λλ€.</li>
<li data-name="background-size"><strong>background-size</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-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>
</ul>
</div>
</div>
</div>
</main>
CSS μμ€
CSSλ‘ μ€νμΌ μμ±μ μΆκ°ν΄ μ£Όμμ΅λλ€. ν°νΈλ ν°λͺ¬, μμ€μ½μ΄ λλ¦Όμ μ¬μ©νμ΅λλ€. λ§μ°¬κ°μ§λ‘, λ©μΈ μμμ CSS μμ€μ λλ€.
:root {
--htmlColor: #223547;
--cssColor: #472222;
--javascriptColor: #224736;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'SCoreDream';
color: var(--htmlColor);
}
*,
*:before,
*:after {
box-sizing: border-box;
}
a {
text-decoration: none;
color: var(--htmlColor);
}
li {
list-style: none;
}
/* 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;
}
@media (max-width: 600px) {
.search__wrap {
padding: 20px;
}
.search__wrap>h1 {
font-size: 44px;
}
.search__wrap>span {
font-size: 16px;
margin-bottom: 10px;
}
.search__box input {
font-size: 16px;
padding: 12px 30px;
}
}
JAVASCRIPT μμ€
λλ§μ JAVASCIPRT μμ€μ λλ€. κ²μ μμκ³Ό λͺ©λ‘ 리μ€νΈ μ νμλ₯Ό λ¨Όμ λ§λ€μ΄ μ€ λ€, addEventListenerλ‘ κ²μ μμμ keyup μ΄λ²€νΈλ₯Ό μΆκ°ν΄ μ£Όμμ΅λλ€. μ¬μ©μκ° μ λ ₯ν ν€μλμ νμ λͺ©λ‘λ€μ κ°μ λΉκ΅νμ¬, indexOfμ κ°μ΄ 0μ΄λ©΄ 리μ€νΈλ₯Ό 보μ¬μ£Όκ³ , κ°μ΄ λ€λ₯΄λ©΄ 리μ€νΈλ₯Ό μ¨κΈ°λ λ°©μμΌλ‘ μμ ν΄ μ£Όμμ΅λλ€.
// μ νμ
const searchBox = document.querySelector(".search__box input") // κ²μ μμ
const searchList = document.querySelectorAll(".search__list ul li") // λͺ©λ‘ 리μ€νΈ
searchBox.addEventListener("keyup", () => { // ν κΈμλ§ μ
λ ₯ν΄λ κ²μ κ°λ₯
const searchWord = searchBox.value; // μ¬μ©μκ° μ
λ ₯ν ν€μλ
searchList.forEach((el)=>{
const cssName = el.dataset.name;
if(cssName.indexOf(searchWord)){
el.classList.add("hide");
} else {
//"abbr".indexOf("abbr")
el.classList.remove("hide"); // indexOfμ κ°μ΄ 0μ΄ λλ κ°λ§ hide ν΄λμ€ μμ
}
});
});
κ²°κ³Ό
'Javascript Effect' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
μλ°μ€ν¬λ¦½νΈ κ²μ ν¨κ³Ό : charAt() (9) | 2022.08.22 |
---|---|
μλ°μ€ν¬λ¦½νΈ κ²μ ν¨κ³Ό : includes() (4) | 2022.08.17 |
μλ°μ€ν¬λ¦½νΈ ν΄μ¦ ν¨κ³Ό : κ°κ΄μ μ ν (13) | 2022.08.08 |
μλ°μ€ν¬λ¦½νΈ ν΄μ¦ ν¨κ³Ό : μ£Όκ΄μ(μ¬λ¬ λ¬Έμ ) μ ν (11) | 2022.08.06 |
μλ°μ€ν¬λ¦½νΈ ν΄μ¦ ν¨κ³Ό : μ£Όκ΄μ μ ν (9) | 2022.08.04 |
λκΈ