728x90
양 사이드로 각각 배치하기.
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은 요소들 사이와 양 끝 모두 동일한 간격을 유지한다는 것을 이해할 수 있습니다
728x90
'> 포트폴리오 > wiggle wiggle' 카테고리의 다른 글
[SCSS] 검색창 만들기 ( search ) (0) | 2024.07.01 |
---|---|
[SASS] aside 메뉴 만들기 ( position 사용 ) (0) | 2024.06.23 |
[SASS] 상단 메뉴바 생성과 position 이해 ( X버튼 추가 ) (0) | 2024.06.19 |
[SASS] 상단 바 만들기 (0) | 2024.06.18 |
[CSS] 메뉴 바 만들기 (1) - 이미지 사이즈와 맞추기, 이미지 여백 없애기 (0) | 2024.04.16 |