[SCSS] span 태그로 햄버거 메뉴 만들기

---

HTML

<div class="banner-header">
          <a href="#"><img src="img/logo.png" alt="로고" /></a>
          <div class="hamburger_menu">
            <span></span><span></span><span></span>
          </div>
        </div>

span 으로 햄버거 모양 만들기

SCSS

.banner-header {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;

  .hamburger_menu {
    width: 80px;
// span태그에 magin을 줘서 높이 맞춰줘서 height를 굳이 쓰지 않음.
// width를 부여해서 메뉴 바의 가로 길이 지정

    // span 태그에 스타일 적용
    span {
      display: block; //display: block을 사용하면 블록 요소로 변환되어, 각각의 span이 새로운 줄에서 시작
      height: 10px; //span의 높이를 10px로 설정 (햄버거 두께 설정)
      background-color: $main_color;
      margin: 15px 0; //span의 상하 여백 지정
      border-radius: 10px;

      &:first-child {
        margin-top: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

span에 display:block을 준 이유

 

1) span 태그 일렬 정렬

2) 기본적으로 span은 인라인(inline) 요소

: 인라인 요소는 width, height, margin-top, margin-bottom 등의 속성을 제대로 적용할 수 없다.

 

따라서, span에 display: block을 지정하지 않으면 이러한 스타일이 적용되지 않고,

시각적으로 사라지는 것처럼 보일 수 있다.

display: block과 display: inline-block 차이

display: block:

블록 요소로 변환되며, 항상 새로운 줄에서 시작합니다.
너비와 높이를 지정할 수 있으며, 상하좌우 여백을 모두 적용할 수 있습니다.
블록 요소로서 전체 부모의 너비를 차지합니다.

--------------------------------------------------------------------
display: inline-block:

인라인 요소처럼 한 줄에 다른 인라인 요소들과 함께 배치될 수 있지만, 
블록 요소처럼 너비와 높이를 지정할 수 있습니다.
상하좌우 여백을 모두 적용할 수 있습니다.
인라인 블록 요소는 필요한 만큼의 너비만 차지합니다