개발나라 스용공주

[HTML/CSS] 순서를 만드는 가상클래스 nth-child(), nth-of-type() 본문

WEB/HTML & CSS

[HTML/CSS] 순서를 만드는 가상클래스 nth-child(), nth-of-type()

스용공주 2024. 10. 26. 04:31
728x90
728x90

이번 글은 클래스명을 따로 부여하지 않고 반복되는 태그를 구분할 수 있는가상클래스 nth-child()와 nth-of-type()에 대해 알아보고 이 둘의 차이점에 대한 글이다.

 

 

[ nth-child() ]

nth-child()란 동일한 태그가 연속될 경우 클래스 부여 없이 각각의 태그들을 구별해 줄 수 있는 수단이다.

 

[ nth-child() 예제 ]

Before
After

[ html ]

box <div> 아래에 클래스가 지정되지 않은 <div>태그가 4개 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>가상클래스 nth-child</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

 

[ css ]

클래스 box 아래에 있는 div는 nth-child()를 통해 ()안에 숫자를 넣어 div의 첫번째부터 네번째까지 구별해줄 수 있다.

.box div:nth-child(1)

=> 클래스 box 아래 있는 div 중 1번째

.box {
    width : 500px;
    border : 2px solid black;
    padding : 5px;
    text-align: center;
}

.box div {
    border : 2px solid black;
    width : 100px;
    height: 100px;
    display: inline-block;
}

.box div:nth-child(1) {
    background-color: darkred;
}

.box div:nth-child(2) {
    background-color: darkgoldenrod;
}

.box div:nth-child(3) {
    background-color: darkgreen;
}

.box div:nth-child(4) {
    background-color: darkblue;
}

 

 

 

[ nth-child()의 단점 ]

아래 코드와 같이 클래스 box 안에 '네모네모'라는 제목을 달아주게되면 태그 간 순서가 꼬여서 코드가 기존과 다르게 실행된다.

 

 

[ nth-of-type() ]

위에서 nth-child()의 단점이라고 표현한 부분을 nth-of-type()으로 수정해주면 아래 사진과 같이 기존 순서 가상클래스의 코드는 유지되면서 새로운 변경 사항이 적용되는 것을 확인할 수 있다.

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>가상클래스 nth-child</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <h1>네모네모</h1>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

 

[ css ]

.box {
    width : 500px;
    border : 2px solid black;
    padding : 5px;
    text-align: center;
}

.box div {
    border : 2px solid black;
    width : 100px;
    height: 100px;
    display: inline-block;
}

.box div:nth-of-type(1) {
    background-color: darkred;
}

.box div:nth-of-type(2) {
    background-color: darkgoldenrod;
}

.box div:nth-of-type(3) {
    background-color: darkgreen;
}

.box div:nth-of-type(4) {
    background-color: darkblue;
}

 

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[HTML/CSS] position 특징  (0) 2024.11.01
[HTML/CSS] position 속성 사용 시 요소 중앙정렬하기 - transform과 translate  (0) 2024.11.01
[HTML/CSS] 애니메이션이 들어간 버튼 만들기 - 가상클래스 hover와 transition  (0) 2024.10.26
[HTML/CSS] float 속성의 이론 상세 설명 - inline, block, overflow, clear  (0) 2024.10.23
[HTML/CSS] 글씨 그림자 레이어 만들기 / css로 글씨 꾸미기  (0) 2024.10.22
'WEB/HTML & CSS' Related Articles more
Comments