Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
:after 는 어느 상황일 때 쓰는 지 궁금합니다
Viết
·
327
0
저는 :after를 글자 앞,뒤에 추가 정보를 넣는 방법으로만 알고 있었습니다.
선생님께서 코드 중간 중간에 :after를 사용하셨는데
이해가 되지 않아 인터넷을 찾아봐도 헷갈리네요 ㅠㅠㅠ
그래서 :after를 사용 안하고 작성해봤는데 제대로 작동이 안되는 부분들이 있어서요.
:after 가상 클래스는 선생님 코드에서 어떻게 쓰이는 지 궁금합니다
Câu trả lời 2
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