오늘은 이번주에 학습하며 제일 헷갈렸던 내용인 SCSS의 선택자와 CSS의 가상 요소, 가상 클래스에 대해서 정리해 볼 예정이다.
✅ 선택자
다중 Class 선택 - '&'
class="apple blue"인 div 태그와 class="apple green" 인 div 태그가 있고, 두 태그에 폰트 사이즈는 12px로 같게, 폰트 색은 다르게 해야할 때 어떻게 할 수 있을까?
.apple {
font-size: 12px;
&.blue {
color: blue;
}
&.green {
color: green;
}scss는 네스팅이 가능하기 때문에 &을 사용해서 간단하게 표현할 수 있다. 여기서 &는 위의 선택자를 대신한다고 생각하면 된다.
특정 선택자의 바로 뒤에 따라오는 선택자 - '+'
+를 이용하면 어떤 선택자의 바로 뒤에 있는 선택자를 선택 가능하다.
말이 어려운데 예를 들면 쉽다.
.box-img {
position: flex;
& + .box-img {
margin-left: 3px;
}
}box-img라는 div태그가 여러개 있다고 생각해보자. 여기서 box-img가 여러번 반복될 때, box-img 태그 뒤에 또 바로 box-img 태그가 오는 경우 왼쪽으로 마진을 3px 주고 싶다, 이럴 때 + 를 사용하면 간편하게 표현 가능하다.
여기서도 &는 위에서와 마찬가지로 상위 클래스를 대신하는 역할을 한다.
(여기서 만약 box-img 태그 뒤에 오는 box-img 태그가 없다면, 스타일은 적용되지 않는다.)
+와 비슷한 기능을 하는 - '~'
+와 비슷한 기능을 하는 ~ 가 있다.
~도 뒤에 오는 다른 클래스를 선택할 수 있는데 둘의 큰 차이점이라면+의 경우는 바로 뒤따르는 클래스를 선택할 수 있는 반면 ~는 바로 뒤가 아니더라도 나오기만 하면 선택해준다.
속성 선택자 - '[]'
html 태그의 속성을 선택할 수 있는 선택자이다.
예를 들자면, title 속성을 가진 a 태그가 있을 때
<a title="apple" ......
a[title] 로 타이틀을 가진 모든 a 태그를 선택해서 속성을 입힐 수 있다.
✅ 가상 요소와 가상 선택자
가상 클래스
실제로 존재하는 요소에 어떤 상황(이벤트)에 따라 속성이 변화하도록 클래스를 주는 것이다.
위에서 정리한 선택자들과 함께 사용해보자.
.btn {
color: white;
&:hover {
color:red;
}btn이라는 클래스를 가진 태그에 색깔은 white이고 마우스가 호버(위에 올려진 상황)되었을 때, 색이 red로 바뀌게 하는 css이다.
기본적으로 선택자 뒤에 :를 붙여 사용한다.
공부하면서 많이 사용하는 가상 클래스는 아래 4개 정도가 있다.
first-child : 가장 첫번째 태그를 선택
last-child: 가장 마지막 태그를 선택
not(selector): selector이 아닌 태그를 선택
hover: 마우스를 요소에 올렸을 때
not의 경우 가상 클래스를 selector 자리에 사용도 가능하다.
예를 들자면,
.img-list {
&:not(:first-child) {
border-top: 1px solid black;
}
}위 css는 img-list 태그들 중에서 첫번째 태그가 아니라면 border-top 속성을 주라는 의미이다. (태그들 사이에 줄이 생길 것.)
가상 요소
존재하지 않는 요소를 가상으로 만들어 속성을 주는 것을 의미한다.
개인적으로 처음에 잘 이해가 가지 않았던 부분 중 하나다.
제일 많이 쓰는 가상 요소로는 before과 after이 있다.
.box::before {
content: '';
border: 1px solid black;
}가상 요소는 가상 클래스와 다르게 ::으로 선택자와 구분을 해준다.
기본적으로 before와 after는 요소의 앞과 뒤에 특정 스타일을 주는 방식인데, position 속성을 이용하면 요소의 위쪽에도 특정 도형이나 스타일을 입힐 수도 있다.
before, after를 사용하고자하는 요소의 positon을 relative로 잡아주고 before,after의 positon을 absolute로 만들면 도형이나 그라데이션 등의 다양한 디자인을 추가할 수 있는 유용한 기능이다.
✅ 마치며
강의를 들으며 이론 공부할 때는 안다고 생각했던 것들을 실제로는 모르고 있다는 것을 많이 깨닳았다. 그 중 하나가 오늘 포스팅한 가상클래스,가상요소와 선택자들이었다. 정신없이 코드를 따라 치면서 갑자기 문득 왜 이렇게 치는거지? 하는 의문이 들었고 이대로 넘어간다면 계속 이 코드들을 이해할 수 없을거라는 생각에 구글을 뒤적이며 정확하게 어떤 개념인지 찾아보았다.
결론적으로 모르는게 있으면 그 자리에서 바로 찾아보는게 중요하다는 걸 다시 깨닳았다. 다른 사람들이 정리해둔 많은 자료를 보며 내가 내 나름대로 이해했었던 과거의 기억들을 조합해 다시 내 지식으로 만드는 과정을 거치며 진짜 내 지식으로 습득되는 경험이었다. 또 공부한 내용을 바탕으로 이렇게 포스팅을 하면서 복습도 되고, 정리도 된다고 생각한다. 정리 전엔 귀찮아도 정리하고 나면 역시 정리하길 잘했다, 생각이 든다.
