배경화면을 검은색으로 만드는 효과관련

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

5-1 인터렉션에 적용할 마크업과 css구현하기(핵심알아보기)

작성

776

section 5의 step1의 index.html입니다.

after라는게 main_visual의 '뒤'에 태그를 추가해주는 것이라고 알고 있습니다. 그렇다면 기존의 화면 태그의 space와는 중첩이 되지 않아야하는게 아닌가요? 아래의 코드는 빈태그에 background를 주어서 화면 전체가 검정색 화면이 되는 것이 이해가 되지 않아 질문 남깁니다.

.sec_mainvis.active .main_visual:after {background:rgba(0,0,0,1); transition-delay: 0s;}

HTML/CSS javascript 인터랙티브 웹 jquery

답변 3

깡코딩

지식공유자

도움이 되셨다니 다행이네요 다른 궁금증이 생길때 문의 주세요 :D

Seung Min Liang

질문자

.sec_mainvis .main_visual:after {position: absolute; left: 0; top: 0; z-index: 10; display: block; width:100%; height:100%; content:''; background:rgba(0,0,0,0); transition:background .5s .1s;}
.sec_mainvis.active .main_visual:after {background:rgba(0,0,0,1); transition-delay: 0s;}

.sec_mainvis .main_visual:after의 속성이 .sec_mainvis.active .main_visual:after 로 상속되는걸 이해를 못해서 질문을 드렸네요. 감사합니다.

깡코딩

지식공유자

안녕하세요 승민님 :)

기존 화면 태그의 space가 어떤걸 말씀하시는 건가요??

배경을 검은색으로 만드는 css 원리는

.sec_mainvis .main_visual:after {position: absolute; left: 0; top: 0; z-index: 10; display: block; width:100%; height:100%; content:''; background:rgba(0,0,0,0); transition:background .5s .1s;}

위 코드를 보면 가상 선택자 after를 absolute로 띄우고 넓이 100%,높이100% 그리고 백그라운드에 rgba 속성을 사용해 배경색을 검은색으로 하고 투명도를 0으로 만들어 두었고 트랜지션을 걸어두었습니다.

그다음

.sec_mainvis.active .main_visual:after {background:rgba(0,0,0,1); transition-delay: 0s;}

.sec_mainvis에 액티브라는 클래스가 추가되었을때 after 가상 선택자의 백그라운드 rgba 속성에 투명도를 1로 바꿔주어 배경색이 나타나도록 만든겁니다. :)

즉 rgba 속성을 사용해 색상과 투명도를 같이 적용한거죠

0,0,0은 검은색을 나타내고 0,0,0,0 의 맨 마지막 0은 투명도를 나타내는 겁니다 :)

도움이 되셨나요?

또다른 궁금증이 생길때 문의 주세요 ^^

인프런 커뮤니티 질문&답변

배경화면을 검은색으로 만드는 효과관련