가상클래스 여백생김 문제
478
投稿した質問数 6
■ 질문 남기실 때 꼭! 참고해주세요.
안녕하세요!
가상클래스로 텍스트 컬러 채워지는 부분에서
컬러 텍스트 주위에 원래 텍스트 흰색이 테두리처럼
보이는데, 해결할 방법이 없을까요? 크기를 변경해도 같습니다 ㅠ
혹시나해서 다른 폰트로 바꿔봤는데
같은 css인 top:0, left:0 이어도 아래처럼 간격이 보이더라구요ㅠ 자세히 보면 가상클래스로 만든 텍스트가 크기 자체가 살짝 작은데요, 그래서 테두리가 보이는 것 같습니다. 가상클래스의 특성일까요?
回答 2
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>마우스 올리면 배경이미지 변경하기</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="style-background.css" />
</head>
<body>
<div class="container">
<ul class="navi">
<li data-img="./images/portrait-01.jpg">
<a href="#none" data-txt="ABOUT">ABOUT</a>
</li>
<li data-img="./images/portrait-02.jpg">
<a href="#none" data-txt="INSTRUCTOR">INSTRUCTOR</a>
</li>
<li data-img="./images/portrait-03.jpg">
<a href="#none" data-txt="CLASS">CLASS</a>
</li>
<li data-img="./images/portrait-04.jpg">
<a href="#none" data-txt="LOCATION">LOCATION</a>
</li>
</ul>
<div class="photo"></div>
</div>
<script>
$(".navi li").mouseenter(function () {
var dataImg = $(this).attr("data-img");
$(".photo").css({ "background-image": "url(" + dataImg + ")" });
});
$(".navi li").mouseleave(function () {
$(".photo").css({ "background-image": ''});
});
</script>
</body>
</html>
안녕하세요~
html과 css 파일 코드 올립니다.
감사합니다~
@charset 'utf-8';
/* Fontawesome 4.7 */
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css2?family=Monoton&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");
body {
margin: 0;
font-family: 'Raleway', sans-serif;
/* background-color: #000; */
}
ul{list-style: none; padding: 0; margin: 0;}
.navi{}
.navi {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}
.navi li{}
.navi li a{
font-size: 4em;
/* font-weight: bold; */
text-decoration: none;
color: #fff;
position: relative;
}
.navi li a::after{
content: attr(data-txt);
position: absolute;
color: blueviolet;
top: 0;
left: 0;
width: 0;
overflow: hidden;
transition: 0.5s;
z-index: 10;
}
.navi li a:hover:after{
width: 100%;
}
.photo{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url(./images/portrait-initial.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
transition: 0.5s;
}0
올려주신 코드로 확인해봤는데 저는 정상적으로 나오는데요.
링크하신 웹폰트 다른 것들로 해도 괜찮더라구요.
이런 경우 혹시 폰트 종류에 따른 줄 간격 때문일 수 있어요.
그래서 .navi li a 여기에 line-height: 0 줘보세요.
class 값 한 번에 부여하는법
2
80
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
69
1
div#css-checker-widget의 해결방
1
60
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
79
2
강의듣는법
1
74
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
68
2
input checked 질문합니다.
0
77
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
140
2
Part 1 영상 안나옵니다
1
90
1
제이쿼리 작동이 안됩니다
1
199
3
강의 내용 질문있습니다.
1
120
2
일정 부분만 주석하는 방법
1
211
2
폰트어썸
1
134
2
인접선택자에 대한 질문드립니다!
1
129
2
delay 적용 안됨
1
135
1
rotateY(360deg)가 적용이 안됩니다!
1
186
2
세로이동할때 height값
1
139
2
폰트어썸이 안되요..
1
487
2
화면 정중앙에 오게끔 할수있나요?
1
169
1
어코디언 네비게이션 중
1
127
1
라이브서버 문제
1
230
2
넷플릭스 어코디언 예제 질문
1
105
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
158
1
active 관련 질문
1
147
2