inflearn logo
강의

Course
Instructor

HTML+CSS+JS Portfolio Practical Publishing (Season 1)

[Part 02] Shopping Mall Item UI Hover Effect - Detailed HTML Creation and Detailed CSS Design

span 태그에 여백이 들어간 것 같은데 왜 그런건가요?

53

phj25787037

1 asked

1

화면 캡처 2026-08-11 182521.jpg화면 캡처 2026-08-11 182555.jpg

선생님 안녕하세요~ 강의 잘 듣고 있습니다!

강의 23~24분 쯤에 .color span 부분에 display: inline-block; 을 하면 선생님 화면처럼 사각형 박스들이 붙지 않고 약간의 여백을 가지는데 왜 그러는 건가요??

위에서 .size span 작업할때는 여백을 안 가졌는데 여기 부분만 여백을 가지는게 이상해서 여쭤봅니다..!

HTML/CSS

Answer 5

0

phj25787037

헉 그렇네요..!! 수정하니까 잘 작동하네요~~!! 감사합니다....!!ㅎㅎ

0

phj25787037 

<!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

codingworks

image.png

.color span.active {....}

선택자 문제입니다.

0

phj25787037

화면 캡처 2026-08-11 191559.jpg화면 캡처 2026-08-11 191754.jpg

스크립트까지 다 적었는데도 .color span 부분 스크립트 적용도 안되네요...ㅠㅠ

나머지 css들은 잘 들어갔는데 margin이랑 스크립트 부분은 어디서 잘못 입력했는지 잘 모르겠어요....ㅠㅠ

0

codingworks

html, css, js 전체 코드를 복사해서 올려주세요. 캡쳐로 올리면 확인이 어렵습니다.

꼭 텍스트로 올려주세요.

0

codingworks

inline-block은 말 그대로 inline 성질이 있기 때문에 폰트라고 인식합니다. 그래서 오른쪽이나 아래에 1~2픽셀 정도의 여백이 생깁니다. 그래서 완벽하게 해야 하는 경우 inline-block을 쓰지 않고 block으로 하고 가로배치는 float 또는 flex를 사용합니다.

아래 인프런 AI가 말한 방법에서 음수마지 곧 네거티브 마진을 쓰는 방법도 있고 font-size: 0 이렇게 주는 방법도 있습니다.

하지만 정교하게 만들어야 할 때 또는 반응형을 위해 모바일에서 세로배치가 필요할 때 등 이런 경우를 대비해서 inline-block 보다는 block으로 만들어서 가로배치하세요.

물론 요소가 1픽셀 단위로 정교하게 만들어야 하는 것이 아니라면 편하게 inline-block을 사용하셔도 됩니다. 그래서 지금 예제에서는 inline-block을 사용했을 겁니다.

0

communityai8509

안녕하세요, 박효정님. 인프런 AI 인턴입니다.

HTML/CSS에서 display: inline-block;를 사용하였을 때, 요소 간에는 종종 여백이 발생할 수 있습니다. 이는 HTML 코드에서 태그 사이에 공백(스페이스, 탭, 엔터 등)이 있을 때 생기는 현상입니다. inline-block 요소들은 기본적으로 ‘인라인’ 요소로 취급되어, 태그 사이에 존재하는 공백이 브라우저에서 해석될 수 있습니다.

이를 해결하기 위한 몇 가지 방법이 있습니다:

  1. 태그 간의 공백 제거: HTML 코드에서 span 태그 사이의 공백(스페이스, 뉴라인 등)을 제거하여 공백을 없앨 수 있습니다.

  2. 음수 마진 사용: CSS에서 margin 속성을 음수로 설정하여 여백을 조정할 수 있습니다. 그러나 이 방법은 권장되지는 않습니다.

  3. CSS 플렉스박스나 그리드 사용: 이러한 레이아웃 방법들은 공백 문제를 일으키지 않기 때문에, 향후 컨테이너에 적용해보는 것도 좋습니다.

  4. 댓글 구문 사용: HTML에서 <!-- -->로 공백을 감싸 공백을 제거할 수도 있습니다.

기존 강의에서 비슷한 질문과 관련된 해결 방법이 담긴 게시물을 참고하시면 도움될 것 같습니다:

혹시 여전히 문제가 해결되지 않으신 경우, 추가적인 스크린샷이나 코드 예제를 남겨주시면 더 자세한 도움을 드릴 수 있을 것 같습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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