span 태그에 여백이 들어간 것 같은데 왜 그런건가요?
53
작성한 질문수 1
선생님 안녕하세요~ 강의 잘 듣고 있습니다!
강의 23~24분 쯤에 .color span 부분에 display: inline-block; 을 하면 선생님 화면처럼 사각형 박스들이 붙지 않고 약간의 여백을 가지는데 왜 그러는 건가요??
위에서 .size span 작업할때는 여백을 안 가졌는데 여기 부분만 여백을 가지는게 이상해서 여쭤봅니다..!
답변 5
0
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>쇼핑몰 UI hover 이펙트 (width JQUERY)</title>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="65-쇼핑몰 UI hover 이펙트 (width JQUERY).css">
</head>
<body>
<div class="item">
<img src="images/model-female.png" alt="">
<div class="detail">
<div class="title">
<h2><em>Nightgown</em>Women's Designer Wear</h2>
<!-- 아래 span 태그가 있어서 Nightgown은 em 태그로 사용한것. -->
<!-- html에서 br은 최대한 사용하지 않는게 좋음. -->
<span>$55.99</span>
</div>
<div class="info">
<div class="size">
<label>Size</label>
<!-- label은 폼요소에만 쓰지 않아도 된다고 함... -->
<span>XS</span>
<span>S</span>
<span>M</span>
<span>L</span>
<span>XL</span>
</div>
<div class="color">
<label>Colors</label>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span class="like"></span>
</div>
<button class="add-cart">Add to Cart</button>
</div>
</div>
<script>
$('.size span, .color span').click(function(){
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
$('.like').click(function(){
$(this).toggleClass('active');
})
</script>
</body>
</html>html과 script 코드고요
/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');
/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body {
font-family: 'Montserrat', sans-serif;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
a {
text-decoration: none;
color: #222;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
/* item */
.item {
border-radius: 5px;
overflow: hidden;
/* border-radius: 5px; 때문에 준 것이기도 하지만 .detail의 넘치는 부분을 가리기 위함도 있음. */
position: relative;
box-shadow: 0 0 20px #0000003a;
}
.item img {
transition: 0.5s;
}
.detail {
background-color: #f8f8f8;
position: absolute;
/* 속성이 inline-block으로 바뀌기 때문에 width 값이 없으면 반영 안됨 */
width: 100%;
bottom: -177px;
left: 0;
height: 250px;
transition: 0.5s;
padding: 5px 20px;
box-sizing: border-box;
}
.item:hover .detail {
bottom: 0;
}
.item:hover img {
filter: blur(2px);
}
/* title */
.title {
overflow: hidden;
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
}
.title h2 {
font-size: 16px;
color: #888;
line-height: 1.2em;
float: left;
}
.title h2 em {
font-style: normal;
display: block;
color: #000;
margin-bottom: 5px;
}
.title span {
float: right;
margin-top: 15px;
font-size: 18px;
color: crimson;
}
.info {
position: relative;
}
/* Size */
.size {
margin-bottom: 10px;
}
.size label,
.color label {
display: block; /* label은 inline 요소 */
margin-bottom: 5px;
}
.size span,
.color span {
transition: 0.5s;
}
.size span {
font-size: 12px;
margin-right: 5px;
width: 15px;
height: 15px;
display: inline-block;
/* span은 inline 요소 */
text-align: center;
line-height: 15px;
padding: 3px;
border-radius: 3px;
cursor: pointer;
}
.size span.active,
.size span:hover {
background-color: #000;
color: #fff;
}
.color span {
/* border: 1px solid #000; */
width: 17px;
height: 17px;
display: inline-block;
/* span은 inline 요소 */
/* 이상한 margin이 생기는건 음수마지 곧 네거티브 마진을 쓰는 방법도 있고 font-size: 0 이렇게 주는 방법도 있음. 정교하게 만들거나 반응형을 위해 모바일에서 세로배치가 필요할 때는 display: block;으로 가로 정렬 해주기. */
margin-right: 5px;
cursor: pointer;
}
.color span:active,
.color span:hover {
border-radius: 50%;
}
.color span:nth-of-type(1) {
background-color: #808000;
}
.color span:nth-of-type(2) {
background-color: #ff0000;
}
.color span:nth-of-type(3) {
background-color: #ffc0cb;
}
.color span:nth-of-type(4) {
background-color: #00ffff;
}
.color span:nth-of-type(5) {
background-color: #0000ff;
}
.add-cart {
border: 1px solid #ddd;
width: 100%;
padding: 7px;
background-color: #fff;
cursor: pointer;
margin-top: 10px;
/* input이랑 button은 inline-block 요소 */
}
.add-cart:hover {
background-color: #000;
color: #fff;
}
/* Like */
.like {
cursor: pointer;
}
.like:before {
content: '\f08a';
font-family: fontawesome;
color: #ccc;
position: absolute;
right: 0;
top: 0;
}
.like.active:before {
content: '\f004';
color: crimson;
}css 코드입니다!!ㅠㅠㅠㅠ 빠르게 답변해주셔서 정말 감사합니다...!!ㅠㅠㅠㅠ
0
스크립트까지 다 적었는데도 .color span 부분 스크립트 적용도 안되네요...ㅠㅠ
나머지 css들은 잘 들어갔는데 margin이랑 스크립트 부분은 어디서 잘못 입력했는지 잘 모르겠어요....ㅠㅠ
0
inline-block은 말 그대로 inline 성질이 있기 때문에 폰트라고 인식합니다. 그래서 오른쪽이나 아래에 1~2픽셀 정도의 여백이 생깁니다. 그래서 완벽하게 해야 하는 경우 inline-block을 쓰지 않고 block으로 하고 가로배치는 float 또는 flex를 사용합니다.
아래 인프런 AI가 말한 방법에서 음수마지 곧 네거티브 마진을 쓰는 방법도 있고 font-size: 0 이렇게 주는 방법도 있습니다.
하지만 정교하게 만들어야 할 때 또는 반응형을 위해 모바일에서 세로배치가 필요할 때 등 이런 경우를 대비해서 inline-block 보다는 block으로 만들어서 가로배치하세요.
물론 요소가 1픽셀 단위로 정교하게 만들어야 하는 것이 아니라면 편하게 inline-block을 사용하셔도 됩니다. 그래서 지금 예제에서는 inline-block을 사용했을 겁니다.
0
안녕하세요, 박효정님. 인프런 AI 인턴입니다.
HTML/CSS에서 display: inline-block;를 사용하였을 때, 요소 간에는 종종 여백이 발생할 수 있습니다. 이는 HTML 코드에서 태그 사이에 공백(스페이스, 탭, 엔터 등)이 있을 때 생기는 현상입니다. inline-block 요소들은 기본적으로 ‘인라인’ 요소로 취급되어, 태그 사이에 존재하는 공백이 브라우저에서 해석될 수 있습니다.
이를 해결하기 위한 몇 가지 방법이 있습니다:
태그 간의 공백 제거: HTML 코드에서
span태그 사이의 공백(스페이스, 뉴라인 등)을 제거하여 공백을 없앨 수 있습니다.음수 마진 사용: CSS에서
margin속성을 음수로 설정하여 여백을 조정할 수 있습니다. 그러나 이 방법은 권장되지는 않습니다.CSS 플렉스박스나 그리드 사용: 이러한 레이아웃 방법들은 공백 문제를 일으키지 않기 때문에, 향후 컨테이너에 적용해보는 것도 좋습니다.
댓글 구문 사용: HTML에서
<!-- -->로 공백을 감싸 공백을 제거할 수도 있습니다.
기존 강의에서 비슷한 질문과 관련된 해결 방법이 담긴 게시물을 참고하시면 도움될 것 같습니다:
- ”.square span의 width와 height값”: span 태그에
display: inline-block;을 적용하면 블록처럼 크기를 조정할 수 있다는 내용이 있습니다.
혹시 여전히 문제가 해결되지 않으신 경우, 추가적인 스크린샷이나 코드 예제를 남겨주시면 더 자세한 도움을 드릴 수 있을 것 같습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
class 값 한 번에 부여하는법
2
115
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
94
1
div#css-checker-widget의 해결방
1
94
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
114
2
강의듣는법
1
108
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
89
2
input checked 질문합니다.
0
93
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
185
2
Part 1 영상 안나옵니다
1
114
1
제이쿼리 작동이 안됩니다
1
233
3
강의 내용 질문있습니다.
1
163
2
일정 부분만 주석하는 방법
1
271
2
폰트어썸
1
171
2
인접선택자에 대한 질문드립니다!
1
151
2
delay 적용 안됨
1
149
1
rotateY(360deg)가 적용이 안됩니다!
1
217
2
세로이동할때 height값
1
164
2
폰트어썸이 안되요..
1
541
2
화면 정중앙에 오게끔 할수있나요?
1
192
1
어코디언 네비게이션 중
1
145
1
라이브서버 문제
1
269
2
넷플릭스 어코디언 예제 질문
1
122
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
179
1
active 관련 질문
1
175
2