[SASS] 로고와 메뉴바 위치 지정하기 (display:flex)

양 사이드로 각각 배치하기.

---

scss

.banner-header {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  justify-content: space-between;
  padding: 27px;

  .hamburger_menu {
    width: 80px;

    // span 태그에 스타일 적용
    span {
      display: block;
      height: 10px;
      background-color: $main_color;
      margin: 15px 0;
      transition: all 0.3s ease;
      border-radius: 10px;

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

  a {
    img {
      width: 175px;
      height: 84px;
    }
  }
}

Containter 에서 아이템 배치하기.

justify-between 사용.

양사이드로 띄워주고 싶어서 Content에 padding 부여. 

( 27px 위 아래 양 사이들 띄워야 하기에 )

---

space-between 과 space-around 의 차이

space-between:

요소들 사이에 동일한 간격을 주고, 첫 번째 요소와 마지막 요소는 컨테이너의 양쪽 끝에 정렬됩니다.
즉, 요소들 사이에는 균일한 간격이 적용되며, 
첫 번째 요소와 마지막 요소는 컨테이너의 양 끝에 딱 붙어 있습니다.

--------------------------------------------------------------------------

space-around:

요소들 주위에 동일한 간격을 주되, 
첫 번째 요소와 마지막 요소 역시 컨테이너의 양쪽 끝에서 절반 간격만큼 떨어집니다.
즉, 요소들 사이와 첫 번째, 마지막 요소가 컨테이너의 양 끝에서 동일한 간격을 가지며 배치됩니다.

간단한 비유로 설명하자면:

space-between: 사람들이 빈자리에 앉을 때, 
사람 사이에 동일한 간격을 두고 앉게 됩니다. 가장 처음 사람과 가장 마지막 사람은 벽에 붙어 앉습니다.

space-around: 사람들이 동일한 간격으로 앉으면서, 
가장 처음 사람과 가장 마지막 사람은 벽에서 절반 간격만큼 떨어져 앉습니다.

이 비유를 통해 space-between은 요소들 사이의 간격을 균등하게 유지하며 양 끝에는 간격이 없고, 
space-around은 요소들 사이와 양 끝 모두 동일한 간격을 유지한다는 것을 이해할 수 있습니다