inflearn logo
강의

Course
Instructor

Everything You Need to Know About CSS3 for Intermediate to Advanced Publishing

`:before`/:after Pseudo-Elements (Creating Shapes and Buttons, Using Position) 01

안녕하세요 가상클래스 포지션 활용 질문드립니다

386

ideuxist6889

4 asked

1

안녕하세요 강의를 듣다 의문이 생겨 질문을 드립니다.

 

before after 가상클래스(도형과 버튼 만들기 , 포지션 활용)01 강의중13분 경 가상클래스 포지션 활용을 설명해 주시면서 absolute가 relative가 우선 한다고 설명해주셨는데요

 

강의에서는 .btn:before에 적용되어있는데 .btn:after 로 적용하게 되면 text가 가려지게 되는데 relative가 우선하게 되면 before after에 관계없이 text가 보여야 될거 같은데 가려지게 됩니다 동작 원리에 대해 좀 더 설명을 해주시면 감사하겠습니다

HTML/CSS

Answer 2

0

codingworks

:after로 하셨군요.
:before가 아니라 :after 한 경우는 조금 다릅니다.

a의 자식요소는 순서상 a:before 다음에 span 다음에 a:after입니다.

그래서 :before인 경우 span에 relative가 되면서 span이 우선합니다.
하지만 a:after의 경우 순서상 span 보다 뒤에 있기 때문에 relative 만으로 되지 않습니다.
이유는 순서상 a:after가 뒤에 나오기 때문에 span이 relative라도 a:after가 우선합니다.

곧, 순서가 뒤에 오면 relative가 우선하고, 순서가 앞에 있으면 앞에 있는 것이 우선합니다.

1

ideuxist6889

늦은 시간 답변 감사드립니다 (__)

0

codingworks

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주어서 순서는 얼마든지 변경할 수 있습니다.

1

ideuxist6889

답변 고맙습니다 제가 반대로 적었네요 죄송합니다 제가 아직 이해를 못해서 다시 한번 질문드리겠습니다 질문의 요지는 :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가 보이지 않아서 동작원리에 대해서 잘 이해가 가지 않는다는 질문이었습니다. 혹시 제가 놓치고 있거나 잘못 생각한 부분이 있나요 고민해보고 내용을 찾아도 잘 나오지 않아 질문드립니다 감사합니

강의 내용 관련 문의드립니다 (animation)

1

55

2

Grid 수직정렬 제대로 안됩니다.

1

72

1

강의 화면이 안나옴

1

208

1

로그인 폼 CSS 디자인 코드 질문 있습니다.

1

235

1

inherit와 100%의 차이가 궁금합니다.

1

322

2

<br>태그 사용 빈도를 줄이게 될 경우의 질문입니다.

1

201

1

수업자료는 없나요?~

1

325

1

[공유] 부모 요소가 position: absolute 인 경우에 대한 설명

1

663

1

float: right 요소가 아래에 배치되는 이유 쉽게 설명

1

863

1

hover 가상클래스 ( hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠) 강의중

3

460

2

nav 태그

1

1129

1

css 선택자의 모든-선택자 우선순위가 중요한 이유 강의 내용중에서

1

545

1

강의자료는 어디서 받을 수 있나요?

1

348

1

before after 가상클래스(도형과 버튼 만들기, 포지션 활용) 01 강의 중 이미지 안 뜨는 문제요ㅠ.ㅠ

1

673

2

유튜브 영상 파일

1

300

1

모바일 css 작업(단위)

1

295

1

유튜브의 초급,중급 이론과는 어떤차이가 있나요?

1

260

1

선생님 질문이 있습니다. (float 속성)

1

262

1

파일다운로드와 관련하여

1

256

1

포지션(position) 속성(z-index와 포지션 속성 우선순위) 강의 질문있습니다.

1

401

1

오타(contaner)

1

241

1

float 속성을 설정했을 때 display: inline-block이 되는 것에 관련하여 질문이 있습니다.

1

2281

2

margin: auto;

1

354

1

label 태그의 사용법이 궁금합니다

1

352

2