35분 강의 내용중 :after 사용관련
구체적으로 :after 를 사용하는 이유는 이미 만들어놓은 item 바로 위에 딱 그 사이즈만큼 쉽게 덮기위해서 인걸까요?
:before 가 아닌 :after를 사용한 이유가 궁금합니다.
回答 2
0
안녕하세요! yh님!
사실 위 내용에서는 position으로 조정하고 있기 때문에, :before를 사용하셔도 상관은 없답니다!
하지만, 보통 우리가 그림을 겹칠때는 한장 한장 쌓아 올리게 되겠죠?!
따라서, 현실과 동일한 관점에서 배경을 주고, 그 위에 투명한 종이를 한장 올리는 느낌을 주기 위해서 :after가 사용되었어요!
:before로도 가능하겠지만, :after를 사용하는게 수업 내용을 기준으로 코드 가독성 측면, 유지보수 측면에서 더 좋을 것 같아요!^^
0
- 안녕하세요, 인프런 AI 인턴이에요.
- :after는 선택한 요소의 뒤에 내용을 생성하는 가상 요소입니다. :after는 요소의 내용의 끝에 내용을 추가합니다. 일반적으로 콘텐츠를 생성하는 데 사용되지만 다른 내용을 덮기 위해서도 사용될 수 있습니다.
:before와 :after 모두 사용할 수 있지만, 일반적으로 :before는 삽입하고자 하는 콘텐츠가 요소의 맨 앞에 위치할 때 사용하고, :after는 요소의 맨 뒤에 위치할 때 사용합니다.
따라서, 이미 만들어 놓은 요소를 덮기 위해서도 :after를 사용할 수 있습니다. :before 대신 :after를 사용한 이유는 item 요소의 맨 뒤에 콘텐츠를 생성해서 이미지 위에 덮기 용이하도록 하기 위해서일 수 있습니다.
간단히 말씀드리자면, :after는 기존에 있는 요소에 여백을 둘 때 사용하며, :before는 새로운 요소를 만들 때 사용합니다.
다른 궁금한 점이 있으시면 언제든지 댓글로 질문해주세요. 좋은 하루 되세요 :)
background vs background-color
0
28
1
노션 자료위치
0
85
2
강의 수강 후 실습
0
327
1
강의 내용과 같은 작업을 쉽게 도와주는 라이브러리 같은 것도 있나요?
1
311
1
강의학습시 작성한 코드를 블로그에 올려도 될까요?
0
394
2
안녕하세요 이미지 관련해서 질문이 있습니다,
0
365
1
codepen질문입니다.
0
304
2
transition질문있습니다~
0
349
1
섹션 5. position 강의 중 absolute와 relative의 사용법에 대한 질문 있습니다!
0
225
1
노션 학습 링크
0
374
1
반응형 실습
0
284
2
@media 미디어 쿼리 적용 안되는 이유
0
1262
1
코드캠프 로드맵 이후 질문사항
0
328
1
diary-date 부분 질문
0
314
1
transform 3번째 강의 질문
0
313
1
강의자료
0
470
1
학습자료 요청건
0
396
1
레이아웃 질문드려요~
0
384
1
vscode 새로운 폴더 불러오기
0
391
1
grid속성 6:36에 나오는 것.
0
318
1
left:calc(100% - 100px) 질문드립니다.
0
734
1
텍스트박스안에서 padding-bottom 이 이렇습니다
0
400
2
단위심화 강의 중 질문 있습니다.
0
345
1
영상 중간 생략
0
319
1