작성한 질문수 3

0

감사합니다 ㅎㅎㅎ

0

안녕하세요! 자취방님 :) 가상 선택자의 용도는 다양하지만 제가 자주 사용하는 2가지 패턴을 알려드릴게요 :)

after 가상선택자의 경우 실무에서 주로 사용되는 패턴은

1. :after {clear:both; display:block; content:'';}  float요소를 해제할때 사용됩니다. :D

2. 예를들어 모션이나 어떤 디자인 적인 요소를 구현할때 쓸때없이 텅 비어있는 엘리먼트를 추가 해야하는 경우가 있습니다.

예를들어 아래 그림과 같은 햄버거 버튼을 만든다고 했을때 span 3개가 필요 하겠죠? 그럼

<span></span>

<span></span>

<span></span>

다음과 같은 구조가 될겁니다. 

이럴때 after,before 선택자를 사용한다면 span한개로 구현 가능해 지겠죠?

<span></span>

<style>

.span {...}

.span:after {...}

.span:before {...}

</style>

다음과 같이 구현될 수 있는겁니다! 

그리고 자취방님처럼 글자 앞뒤에 블릿이나 어떤 정보를 나타내기 위해 사용될 수 있겠죠 :)

궁금증이 풀리셨나요? 궁금증이 해결되지 않았다면 해당부분 코드를 올려보시길 바라겠습니다.

그럼 또다른 궁금증이 생길때 언제든 문의주세요 :D