μλ°μ€ν¬λ¦½νΈ : κ²μ ν¨κ³Ό : charAt()
μλ°μ€ν¬λ¦½νΈμ λ€μν ν¨κ³Όλ€ μ€, ν΄λΉνλ λ¬Έμμ΄μ μ°Ύμ μ μλ κ²μ ν¨κ³Όμ λλ€. μ΄λ²μλ charAt() λ©μλλ₯Ό μ΄μ©νμ¬ CSSμ λ€μν μμ±μ κ²μν μ μλ μΉμ¬μ΄νΈλ₯Ό μμ ν΄ λ³΄λλ‘ νκ² μ΅λλ€.
HTML μμ€
HTMLλ‘ λΌλλ₯Ό λ¨Όμ μ‘μμ£Όμμ΅λλ€. ν€λ μμμλ λ΄λΉκ²μ΄μ λ©λ΄λ₯Ό, λ©μΈ μμμλ μνλ²³ μ νμ°½, νμ λͺ©λ‘λ€μ μμ±ν΄ μ£Όμμ΅λλ€. κ° μνλ²³μ΄ μ°μΈ λ²νΌμ ν΄λ¦νλ©΄, ν΄λΉνλ μνλ²³μΌλ‘ μμνλ μμ±λ€μ΄ λͺ©λ‘μ λνλ©λλ€. μλ μμ€λ λ©μΈ μμμ HTML μμ€λ‘, λλ¨Έμ§ μμμ μμ€λ νλ¨μ 'μλ³Έ μμ€ λ³΄κΈ°' λ²νΌμ ν΄λ¦νλ©΄ νμΈν μ μμ΅λλ€.
<div class="search__wrap">
<span>charAt()λ₯Ό μ΄μ©νμ¬ κ²μνκΈ°</span>
<h1>CSS μμ± μ²«κΈμ κ²μνκΈ°</h1>
<div class="search__info">
<div class="keyword">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
<span>f</span>
<span>g</span>
<span>h</span>
<span>i</span>
<span>j</span>
<span>k</span>
<span>l</span>
<span>m</span>
<span>n</span>
<span>o</span>
<span>p</span>
<span>q</span>
<span>r</span>
<span>s</span>
<span>t</span>
<span>u</span>
<span>v</span>
<span>w</span>
<span>x</span>
<span>y</span>
<span>z</span>
</div>
<div>μ 체 μμ± κ°―μ : <span class="num">0</span></div>
</div>
<div class="search__list">
<div class="css">
<ul>
<li><strong>accent-color</strong> : νΉμ μμμ μμμ μ§μ ν λ μ¬μ©λ©λλ€.</li>
<li><strong>align-content</strong> : μ½ν
μΈ μμ΄ν
μ μνκ΄κ³ μ λ ¬ μνλ₯Ό μ€μ ν©λλ€.</li>
<li><strong>align-items</strong> : μ½ν
μΈ μμ΄ν
μ λ΄λΆ μνκ΄κ³ μ λ ¬ μνλ₯Ό μ€μ ν©λλ€.</li>
<li><strong>align-self</strong> : κ°λ³μ μΈ μ½ν
μΈ μμ΄ν
μ μ λ ¬ μνλ₯Ό μ€μ ν©λλ€.</li>
<li><strong>all</strong> : μμμ μμ±μ μ΄κΈ°ν λλ μμμ μ€μ ν©λλ€.</li>
<li><strong>animation</strong> : μ λλ©μ΄μ
κ³Ό κ΄λ ¨λ μμ±μ μΌκ΄μ μΌλ‘ μ€μ ν©λλ€.</li>
<li><strong>animation-delay</strong> : μ λλ©μ΄μ
μ§μ° μκ°μ μ€μ ν©λλ€.</li>
<li><strong>animation-direction</strong> : μ λλ©μ΄μ
μμ§μ λ°©ν₯μ μ€μ ν©λλ€.</li>
<li><strong>animation-duration</strong> : μ λλ©μ΄μ
μμ§μ μκ°μ μ€μ ν©λλ€.</li>
<li><strong>animation-fill-mode</strong> : μ λλ©μ΄μ
μ΄ λλ νμ μνλ₯Ό μ€μ ν©λλ€.</li>
<li><strong>animation-iteration-count</strong> : μ λλ©μ΄μ
μ λ°λ³΅ νμλ₯Ό μ€μ ν©λλ€.</li>
<li><strong>animation-name</strong> : μ λλ©μ΄μ
keyframe μ΄λ¦μ μ€μ ν©λλ€.</li>
<li><strong>animation-play-state</strong> : μ λλ©μ΄μ
μ§νμνλ₯Ό μ€μ ν©λλ€.</li>
<li><strong>animation-timeline</strong> : x</li>
<li><strong>animation-timing-function</strong> : μ λλ©μ΄μ
μμ§μμ μλλ₯Ό μ€μ ν©λλ€.</li>
<li><strong>appearance</strong> : μ΄μ체μ λ° λΈλΌμ°μ μ κΈ°λ³Έμ μΌλ‘ μ€μ λμ΄ μλ ν
λ§λ₯Ό κΈ°λ°μΌλ‘ μμλ₯Ό ννν©λλ€.</li>
<li><strong>aspect-ratio</strong> : μμμ ν¬κΈ°λ₯Ό λΉμ¨λλ‘ μ‘°μ ν μ μκ² ν©λλ€.</li>
<li><strong>backdrop-filter</strong> : μμ λ€ μμμ νλ¦Όμ΄λ μμ μννΈ λ± κ·Έλν½ ν¨κ³Όλ₯Ό μ μ©ν μ μλ μμ±μ
λλ€.</li>
<li><strong>backface-visibility</strong> : μ
체μ μΈ λͺ¨μ΅μ λ·λ©΄μ κ°μμ±μ κ²°μ νλ μμ±μ΄λ€.</li>
<li><strong>background</strong> : λ°±κ·ΈλΌμ΄λ μμ±μ μΌκ΄μ μΌλ‘ μ€μ ν©λλ€.</li>
<li><strong>background-attachment</strong> : λ°°κ²½ μ΄λ―Έμ§μ κ³ μ μ¬λΆλ₯Ό μ€μ ν©λλ€.</li>
<li><strong>background-blend-mode</strong> : λ°°κ²½μ νΌν©νμ λ κ·Έλν½ ν¨κ³Όλ₯Ό μ€μ ν©λλ€.</li>
<li><strong>background-clip</strong> : λ°±κ·ΈλΌμ΄λ μ΄λ―Έμ§μ μμΉ κΈ°μ€μ μ μ€μ ν©λλ€.</li>
<li><strong>background-color</strong> : λ°±κ·ΈλΌμ΄λ μμ μ€μ ν©λλ€.</li>
// μ΄νμλ΅...
</ul>
</div>
</div>
</div>
CSS μμ€
CSSλ‘ μ€νμΌ μμ±μ μΆκ°ν΄ μ£Όμμ΅λλ€. ν°νΈλ ν°λͺ¬, μμ€μ½μ΄ λλ¦Όμ μ¬μ©νμ΅λλ€. λ§μ°¬κ°μ§λ‘, λ©μΈ μμμ CSS μμ€μ λλ€.
#main {
margin: 50px 10px;
}
.search__wrap {
max-width: 1400px;
margin: 0 auto;
border: 3px solid var(--htmlColor);
border-radius: 20px;
background-color: #f1f3f6;
padding: 30px;
text-align: center;
}
.search__wrap>span {
font-size: 20px;
margin-bottom: 20px;
display: inline-block;
}
.search__wrap>h1 {
font-family: 'Tmon';
color: var(--htmlColor);
font-size: 6vw;
margin-bottom: 10px;
}
.search__box {
margin-bottom: 20px;
}
.search__box label {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.search__box input {
border: 2px solid var(--htmlColor);
padding: 15px 40px;
width: 70%;
border-radius: 50px;
font-size: 20px;
}
.search__list li {
text-align: left;
line-height: 1.7;
}
.search__list li.hide {
display: none;
}
.search__list li.show {
display: block;
}
.search__info {
text-align: right;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px dashed var(--htmlColor);
}
.search__info .type {
text-align: center;
margin-bottom: 10px;
}
.search__info .keyword {
text-align: center;
margin-bottom: 10px;
}
.search__info .keyword span {
border-bottom: 2px solid var(--htmlColor);
border-radius: 5px;
padding: 10px;
display: inline-block;
margin-bottom: 4px;
font-weight: 500;
}
.search__info .keyword span:hover {
background-color: var(--htmlColor);
color: #fff;
cursor: pointer;
}
JAVASCRIPT μμ€
λλ§μ JAVASCIPRT μμ€μ λλ€. κ°κ°μ μνλ²³λ€, μμ± λͺ©λ‘ 리μ€νΈμ μ νμλ₯Ό λ¨Όμ λ§λ€μ΄ μ£Όμμ΅λλ€. μ¬μ©μκ° ν΄λ¦ν μνλ²³μ κ°(searchWord)κ³Ό μμ±μ μ΄λ¦(cssName)μ λΉκ΅νμ¬, μμ± μ΄λ¦μ 첫 κΈμμ μνλ²³μ κ°μ΄ κ°μΌλ©΄ hide ν΄λμ€λ₯Ό μ¨κΈ°κ³ , λ€λ₯΄λ©΄ hide ν΄λμ€λ₯Ό μΆκ°μν€λ λ°©λ²μΌλ‘ μμ νμμ΅λλ€.
// μ νμ
const searchKeyword = document.querySelectorAll(".search__info .keyword span") // μνλ²³
const searchList = document.querySelectorAll(".search__list ul li") // λͺ©λ‘ 리μ€νΈ
const searchInfo = document.querySelector(".search__info .num")
// μμ± κ°―μ ꡬνκΈ°
searchInfo.textContent = searchList.length;
searchKeyword.forEach( el => {
el.addEventListener("click", () => {
const searchWord = el.innerText; // μ¬μ©μκ° ν΄λ¦ν μνλ²³
// console.log(searchWord);
searchList.forEach(el => {
const cssName = el.querySelector("strong").innerText; // CSS μμ±μ ν
μ€νΈ
// console.log(cssName)
// μνλ²³ 첫κΈμ == CSS μμ±μ 첫κΈμ
if(searchWord.charAt(0) === cssName.charAt(0)){
el.classList.remove("hide");
} else {
el.classList.add("hide");
}
});
})
});
λκΈ