이 Entry는 G's ACADEMY TOKYO의 코치/코치의 투고 문장이다.
과정에 나타난 문제점, 의문점, 훈련사가 흥미를 느끼는 신기술 등은 조리 없이 묘사될 것이다.

"nth-child()"의 편리한 사용 방법

다들 처음이야!
페이스북에는'으아아아아아아아아아아아아아아아아아아아아아아아아아'라는 제목의 인물이 있습니다!
이번에는 CS3에서 가져온 위류에 대해 간략하게 소개합니다!
css를 하나하나 단독으로 써도 되지만, 이렇게 하면 효율이 떨어진다.
이럴 때'nth-child(')'를 쓰면 간단하게 헤어스타일을 바꿀 수 있어요.
이번 예제에서 사용된 태그(>)
test1.html

<h1>かくだてさんとゆかいな仲間たち</h1>
<ul class="sample">
 <li>栗林怪物</li>
 <li>しんたん</li>
 <li>あやなし</li>
 <li>マドンナともちゃん</li>
 <li>いけめん西元隊長</li>
</ul>

'nth-child()'의 특징은 다양한 세밀한 설정을 할 수 있다는 거죠 ♪
구체적으로 다음과 같이 사용할 수 있다.
• 짝수만 지정
※ 쉽게 이해할 수 있도록 "ul.sample"을 사용해도 됩니다!
test1.css

ul.sample li:nth-child(even) {
    color: #f00;
}

이런 상황에서
test1.html

<ul class="sample">
 <li>栗林怪物</li>
 <li>しんたん</li>　←偶数番目なのでここの文字色が「赤」に変わる♪
 <li>あやなし</li>
 <li>マドンナともちゃん</li>　←偶数番目なのでここの文字色が「赤」に変わる♪
 <li>いけめん西元隊長</li>
</ul>

test1.css

ul.sample li:nth-child(odd) {
    color: #f00;
}

test1.html

<ul class="sample">
 <li>栗林怪物</li> ←奇数番目なのでここの文字色が「赤」に変わる♪
 <li>しんたん</li>　
 <li>あやなし</li> ←奇数番目なのでここの文字色が「赤」に変わる♪
 <li>マドンナともちゃん</li>
 <li>いけめん西元隊長</li>　←奇数番目なのでここの文字色が「赤」に変わる♪
</ul>

그리고':nth-child(숫자)'를 넣어서 사용해도 개별적으로 지정할 수 있습니다.
구체적 예
test1.css

ul.sample li:nth-child(3) {
    color: #f00;
}

test1.html

<ul class="sample">
 <li>栗林怪物</li> 
 <li>しんたん</li>　
 <li>あやなし</li> ←３番目なのでここの文字色が「赤」に変わる♪
 <li>マドンナともちゃん</li>
 <li>いけめん西元隊長</li>　
</ul>

이외에도':nth-of-type(n)'이라는 편리한 의심반이 있다.
이것은 나타나는 요소를 지정할 수 있다.
test1.html

<div class="kuribayasi_box">
    <p>栗林</p>
    <p>栗林</p>
    <p>栗林</p>
    <p>栗林</p>
    <p>栗林</p>
</div>

test1.css

.kuribayasi_box p:nth-of-type(3){
    font-size:50px;
    color:#f00;
}

이렇게 하면...
test1.html

<div class="kuribayasi_box">
    <p>栗林</p>
    <p>栗林</p>
    <p>栗林</p>　←この部分がフォントサイズ50px＋文字色が「赤」になる
    <p>栗林</p>
    <p>栗林</p>
</div>

■ 요약
대충 소개하자면'nth-child(n)',':nth-of-type(n)'을 활용하면'● 두 번째 요소','시작부터 ●개','마지막부터 ●개','홀수','짝수','숫자의 배수 지정'을 지정해 표현폭이 커진다.
편리한 면은 class를 많이 쓰지 않았으면 좋겠어요. 그리고 전선을 더욱 원활하게 하는 장점도 있어요♪
그리고 처음에는'nth-child(n)',':nth-of-type(n)'이 헷갈릴 수 있으니 먼저 만져보세요.
주제 밖의 말을 하다.
[이벤트] ← 짝수
[od] ← 홀수
간단한 기억 방법은요.
짝수는 네 글자이기 때문에 짝수는
"oddd"는 세 글자이기 때문에 홀수이다
기억하고 실수하는 경우도 적을 것 같아서요.
지금까지 G's ACADEMY TOKYO 가이드'와아아아아아'가 진행한 CSS 3 아날로그 유형의 편리한 이야기(Trainer's Recipe)였습니다.