웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
LESS에서 pre-processor는 요즘 많이 사용됩니다. CSS를 사용하는데 매우 편리한 기능들을 제공하며 뛰어난 언어처럼 다양한 기능을 제공하죠.
아래는 LESS 사용시 가상클래스(pseudo-class) 선택자인 ::before, ::after, ::hover 등을 적용하는 방법에 대하여 알아봅니다. LESS에서 가상선택자 클래스를 적용할 경우 어떻게 할까요?
매우쉽죠? 이처럼 LESS에서 & 기호를 사용하여 가상클래스 선택자를 손쉽게 선택하는 것이 가능합니다.
아래는 LESS 사용시 가상클래스(pseudo-class) 선택자인 ::before, ::after, ::hover 등을 적용하는 방법에 대하여 알아봅니다. LESS에서 가상선택자 클래스를 적용할 경우 어떻게 할까요?
# LESS에서 가상클래스 선택자 적용하기
아래는 div 태그 내에 위치한 span 태그에 대하여 가상클래스 선택자를 적용한 예제코드입니다. 보시는 것처럼 앞에 & 기호를 사용하면 간단하게 적용할 수 있습니다. 만약 div 태그 다음에 ::before, ::after를 선언하면 아래처럼 사용합니다.div {
width: 100px;
height: 100px;
border 1px solid;
&:before {
content: "before";
}
&:after {
content: 'after';
}
}
위 코드의 결과 div 태그에서 가상클래스 ::before, ::after가 선언됩니다.width: 100px;
height: 100px;
border 1px solid;
&:before {
content: "before";
}
&:after {
content: 'after';
}
}
div {
&:hover {
color: #f00;
}
}
::hover시 색을 변경할 수 있죠.&:hover {
color: #f00;
}
}
매우쉽죠? 이처럼 LESS에서 & 기호를 사용하여 가상클래스 선택자를 손쉽게 선택하는 것이 가능합니다.
아래의 글도 찾고 계시지 않나요?
