가상클래스
- 여러 태그 중 원하는 태그를 선택하기위해 사용하는 선택자
- 예로들면 :hover :active 같은 클래스가 있습니다
section .button:hover{
background-color: #0074e9;
color: white;
cursor: pointer;
}:hover 클래스를 사용하면 버튼에 마우스를 갖다댔을 때 배경색과 기본 색상을 바꿀 수 있고 커서에 효과를 주는 등 다양한 상호작용 효과를 줄 수 있습니다.
가상요소
- 내용의 일부만 선택해 스타일을 적용할 때 사용함
- 가상클래스와 구분하기 위해 콜론 두개::를 붙여서 사용함
- 대표적으로 ::before ::after가 있음
<body>
<h1>아이폰</h1>이렇게 h1 태그로 마크업 되어있는 아이폰 앞,뒤에 기호를 넣어보겠습니다.
h1::before{
content: "*";
}
```css
h1::after{
content: "-"
}이런식으로 ::before와 ::after를 활용하여 원하는 부분에 기호 혹은 이미지를 넣을 수 있습니다. 그리고 css를 활용해서 기호를 넣으면 나중에 특수기호를 따로 제거해줘야하는 번거로움을 줄일 수 있어 좋습니다.
마무리
첫 다짐 피드 이후 처음으로 css 지식에 관해 다루어보았는데요, 제가 아직 많이 부족하고 알아가는 중이지만 더욱 노력해서 양질의 정보를 전달할 수 있도록 하겠습니다. 😊 다음 피드에는 더욱 다양하고 재밌는 css 주제를 가져와서 다뤄보도록 하겠습니다. 읽어주셔서 감사합니다. 🤗
이유 없는 개발은 없다
가상클래스, 가상요소, 과제하면서 많이 다뤘지만 여전히 헷갈리는 것들이에요ㅠ