-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
a:after 가상 클래스 active 활성화/off 방법 중
22.01.16 20:40 작성 조회수 1.01k
1
안녕하세요, 선생님! 강의 잘 듣고 있습니다. a:after 가상 클래스 태그에서 active시킬 수 있는 방법을 두 가지로 알려주셨는데,
1. opacity와 pointer-events로 조정
2. visibility: visible/hidden 으로 조정
1번의 경우로 했을 시, 앵커 포인트까지 넣었을 때, a:after 가상 클래스가 오버레이와 맞춰서 나타나고 사라지는데, 2번의 경우로 했을 땐, 가상 클래스가 더 늦게 나타나고 사라집니다. 혹시 이 경우에는 어떻게 해야 맞춰서 active되고 remove되는지 알려주시면 감사하겠습니다!
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>풀스크린 네비게이션 반응형 포트폴리오</title>
<link rel="stylesheet" href="풀스크린_네비게이션_반응형_포트폴리오.css">
<script src="/script/jquery-3.4.1.min.js"></script>
</head>
<!--
1. HTML 구조만들기(Welcome, Section, Toggle Trigger)
2. CSS 크기조정, 배치하기, 상세 디자인
3. HTML 구조만들기(All Section & Section Content)
4. CSS 크기조정, 배치하기, 상세 디자인
5. 앵커(Anchor) 만들기
6. 네비게이션 클릭 후 슬라이딩되면서 active 클래스 추가(gnb, toggle, body)
-->
<body>
<div class="toggle">
<i class="xi-plus-thin"></i>
</div>
<div class="overlay"></div>
<!-- <a></a>태그로 쓸 경우는 Home이나 Web portfolio의 a태그의 박스 크기 만큼 가버려서 안 예쁨. 글씨의 크기만큼만 가도록 효과를 주기 위한거니까 li같이 간단하게 묶어주면 됨-->
<ul class="gnb">
<li><a href="#feature1">Home</a></li>
<li><a href="#feature2">About</a></li>
<li><a href="#feature3">Graphic Portfolio</a></li>
<li><a href="#feature4">Web Portfolio</a></li>
<li><a href="#feature5">Contact</a></li>
<li><a href="#feature6">Epilogue</a></li>
</ul>
<div class="container">
<section class="welcome" id="feature1">
<img src="/images/bg-welcome.jpg" alt="">
</section>
<div>
CSS
/* 구글 웹폰트 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
/* Web Fonts : Playfair Display */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');
/* font-family: 'Playfair Display', serif; */
/* XEICON */
@import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
color: #222;
line-height: 1.6em;
font-weight: 300;
}
a {
color: #222;
text-decoration: none;
}
/* Toggle Trigger */
.toggle {
position: fixed;
top: 20px;
left: 20px;
cursor: pointer;
z-index: 10;
}
.toggle i {
width: 40px;
height: 40px;
font-size: 30px;
color: #fff;
background-color: #000;
text-align: center;
line-height: 40px;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: .5s;
}
.toggle.active i {
background-color: yellowgreen;
transform: rotate(315deg);
}
/* Overlay */
.overlay {
position: fixed;
background-color: #000;
width: 40px;
height: 40px;
border-radius: 50%;
top: 20px;
left: 20px;
transition: .5s;
opacity: 0;
z-index: 5;
}
.overlay.active {
transform: scale(130);
opacity: 1;
}
.gnb {
position: fixed;
list-style: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* pointer-events: none; */
/* opacity: 0; */
visibility: hidden;
z-index: 7;
transition: .5s
}
.gnb.active {
/* opacity: 1; */
/* pointer-events: all; */
visibility: visible;
}
.gnb a {
color: #fff;
font-family: 'Playfair Display', sans-serif;
font-size: 3.5em;
line-height: 1.5em;
position: relative;
padding-right: 10px;
margin: 0;
padding: 0;
}
.gnb a:after {
content: '';
position: absolute;
height: 20px;
width: 0;
background-color: yellowgreen;
left: 0;
bottom: 7px;
z-index: -1;
transition: .5s;
}
.gnb a:hover:after {
width: 100%;
}
/* Section : Welcome */
section.welcome {
/* border: 5px solid red; */
/* basic width:100%라더라도 object-fit: cover;하려면 width: 100%; 명시해줘야 함 */
width: 100%;
height: 100vh;
}
jQuery
<script>
$('.toggle').click(function () {
$('.toggle, .overlay, .gnb').toggleClass('active')
})
$('.gnb a').click(function () {
$('.toggle, .overlay, .gnb').removeClass('active')
})
</script>
답변을 작성해보세요.
0
0
답변 2