#Nesting
코드를 좀 더 정확하게 해준다
정확하게는 타겟하는 element를 더 정확하게 해준다
ex)
<body>
<h1>Title</h1>
<div class="box">
<h1>Another title<h1>
</div>
</body>위를 예시로 class box 안에 있는 h1의 color를 변경하고싶은데
css에서 변경할려면
.box h1{
color:red;
}처럼 작성해야할 것이다.
하지만 Nesting을 이용하면 조금 더 쉽게 작성하면서 비슷한 수준의 정확도를 보여준다
Nesting은
.box{
color:blue;
h1{
color:red;
}
}위와 같은 방식으로 작성하는 것을 뜻한다
Nesting 말 그대로 중첩하여 작성하는 것이다.
위 코드는 바꿀 요소가 하나밖에 없어서 굳이 이렇게 적어야하나 싶은 생각이 들었지만
사용하다보니 여러요소중에 특정 요소만 변경하고 싶을때 아주 쉽고 유용하고 빠르게 작성할 수 있었기에 무조건 사용하는게 좋다고 본다.
그리고 hover 이벤트를 사용할려면 보통 .box:hover 이렇게 작성하게되는데
Nesting을 이용하면 .box 안에 & 기호를 사용하여 선언할 수 있다.
(& 기호는 현재 요소를 뜻하는것 같다)
.box{
color : blue;
h1{
color: red;
}
&:hover{
background-color:green;
}
}=> Nesting을 조금 더 이용하여 아래와 같이 여러개를 중첩하여 작성할 수 있다.
.box{
color : blue;
h1{
color: red;
&:hover{
color:blue;
}
}
&:hover{
background-color:green;
}
}위와같이 Nesting은 클래스 하나를 선언하고 그안에서 모든것을 끝낼 수 있게 만들어졌다.
그리고 Nesting 안에 Nesting을 사용할 수 있다.
