인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요 가상클래스 포지션 활용 질문드립니다
작성
·
311
1
안녕하세요 강의를 듣다 의문이 생겨 질문을 드립니다.
before after 가상클래스(도형과 버튼 만들기 , 포지션 활용)01 강의중13분 경 가상클래스 포지션 활용을 설명해 주시면서 absolute가 relative가 우선 한다고 설명해주셨는데요
강의에서는 .btn:before에 적용되어있는데 .btn:after 로 적용하게 되면 text가 가려지게 되는데 relative가 우선하게 되면 before after에 관계없이 text가 보여야 될거 같은데 가려지게 됩니다 동작 원리에 대해 좀 더 설명을 해주시면 감사하겠습니다
답변 2
0
:after로 하셨군요.
:before가 아니라 :after 한 경우는 조금 다릅니다.
a의 자식요소는 순서상 a:before 다음에 span 다음에 a:after입니다.
그래서 :before인 경우 span에 relative가 되면서 span이 우선합니다.
하지만 a:after의 경우 순서상 span 보다 뒤에 있기 때문에 relative 만으로 되지 않습니다.
이유는 순서상 a:after가 뒤에 나오기 때문에 span이 relative라도 a:after가 우선합니다.
곧, 순서가 뒤에 오면 relative가 우선하고, 순서가 앞에 있으면 앞에 있는 것이 우선합니다.
0
z-index가 같다는 기준하에 relative가 absolute 보다 우선합니다.
반대로 적으셨는데 제가 말씀드린게 맞습니다.
<a href="#" class="btn">
<span>Text Content</span>
</a>
위의 구조에서 설명드리면 a의 자식요소는 span과 :before :after 3개입니다.
그럼 3개가 z-index가 같다는 기준하에 :before에 absolute가 있으면 3개 중에서 :before가 우선합니다.
하지만 강의에도 있듯이 span에 relative를 주면 span이 :before보다 우선합니다.
곧, z-index가 같다는 기준하에 relative가 absolute 보다 우선하는 경우입니다.
물론 z-index주어서 순서는 얼마든지 변경할 수 있습니다.
답변 고맙습니다 제가 반대로 적었네요 죄송합니다 제가 아직 이해를 못해서 다시 한번 질문드리겠습니다 질문의 요지는 :before 를 적용했을때와 같이 :after적용 했을때도 text가 노출되어야 될거 같은데 :after의 경우는 다르게 동작되어서 질문드리게됐습니
z-index가 같다는 기준하에 relative가 absolute 보다 우선한다면
<a href="#none" class="btn">
<span>View the CodingWorks Class</span>
</a>
.btn:after {
content: '';
background-color: crimson;
width: 100%;
height: 0;
position: absolute;
top: 0;
left: 0;
transition:0.35s;
}
.btn span {
position: relative;
}
.btn:hover:after {
height: 100%;
}
span에 relative를 주면 :after 보다 우선되서 view the codingworks clss 이 text가 보여야 될거 같은데 before의 경우와 달리 text가 보이지 않아서 동작원리에 대해서 잘 이해가 가지 않는다는 질문이었습니다. 혹시 제가 놓치고 있거나 잘못 생각한 부분이 있나요 고민해보고 내용을 찾아도 잘 나오지 않아 질문드립니다 감사합니
늦은 시간 답변 감사드립니다 (__)