반응형
기본 코딩
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
background-color: aquamarine;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
결과
여기서 두번째, 네번째 span의 배경색을 다른 색으로 바꿔보자!
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
background-color: aquamarine;
}
span:nth-child(2),
span:nth-child(4) {
background-color: yellow;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
결과
even(짝수 2,4,6,8,10...)를 사용해서 span 색깔을 번갈아 가면서 적용시키기
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
background-color: aquamarine;
}
span:nth-child(even) {
background-color: yellow;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
결과
홀수는 odd를 넣어주면 된다.
nth-child(3n+1)
을 넣어주면 3의 배수 순서에 적용된다
결과
반응형
'2. CSS' 카테고리의 다른 글
| CSS 부모 > 자식 (direct children) (0) | 2024.11.29 |
|---|---|
| CSS 특정 영역을 지정해서 변경하기 (0) | 2024.11.29 |
| CSS pseudo selectors / first-child & last-child (0) | 2024.11.27 |
| CSS position absolute 사용해서 div 박스 옮기기 이동 (0) | 2024.11.26 |
| CSS position relative 사용해서 div 박스 옮기기 (0) | 2024.11.26 |