[SCSS] aside 꾸미기

HTML

        <aside class="sidebar">
          <ul class="category">
            <li><a href="#">SEARCH</a></li>
            <li class="dropdown">
              <a href="#">SHOP</a>
              <ul class="dropdown-content">
                <li><a href="#">for hair</a></li>
                <li><a href="#">for neck</a></li>
                <li><a href="#">for fingers</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#">BOARD</a>
              <ul class="dropdown-content">
                <li><a href="#">notice</a></li>
                <li><a href="#">q / a</a></li>
              </ul>
            </li>
          </ul>
        </aside>

SCSS

// 사이드 바
.sidebar {
  text-align: center;
  font-size: 1.3vw;
  font-weight: bold;
  .category li {
    margin-bottom: 1.1875rem;
  }
  .dropdown a {
    display: block;
    margin-bottom: 1.1875rem;
  }
  .dropdown-content li {
    margin-bottom: 1.1875rem;
  }
}

최종 - 간추려서 수정

// 사이드 바
.sidebar {
  text-align: center;
  font-size: 1.3vw;
  font-weight: bold;
  .dropdown a {
    display: block;
    margin-bottom: 1.1875rem;
  }
  li {
    margin-bottom: 1.1875rem;
  }
}

---

헷갈렸던 부분

SHOP 하고 for hair 사이에 간격을 주고 싶고

BOARD 하고 notice 사이에 간격을 주고 싶은데 잘 되지 않음.

내가 짰던 css

.sidebar {
  text-align: center;
  li {
    margin-bottom: 19px;
  }
  .dropdown {
    margin-bottom: 19px;
  }
}

a요소는 inline요소
- 이 부분을 간과하고 있었음.

display: block;을 추가하여 a 요소가 블록 레벨 요소가 되도록 만들기.

= 이를 통해 margin-bottom이 정상적으로 적용

블록 레벨 요소여야지 마진이 적용.

---

블록 레벨 요소와 인라인 요소

• 블록 레벨 요소: div, p, h1 등. 화면 상에서 새로운 줄을 차지하며, 너비와 높이를 가질 수 있습니다.
• 위아래로 마진(margin-top, margin-bottom)을 정상적으로 적용받습니다.
• 인라인 요소: a, span, img 등. 텍스트의 일부분으로 취급되어 새로운 줄을 차지하지 않으며,
• 기본적으로 너비와 높이를 지정할 수 없습니다.
• 주로 좌우 마진(margin-left, margin-right)을 정상적으로 적용받지만,
• 위아래 마진(margin-top, margin-bottom)은 제대로 적용되지 않습니다.

li 요소는 기본적으로 블록 레벨 요소