인프런 커뮤니티 질문&답변
작성한 질문수
css position absolute설정 시 space-between이 실행되지 않습니다.
24.01.13 04:32 작성
·
456
·
수정됨
1
css
body {
height: 97vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f3f3f5;
}
.sedow {
box-shadow: 0 0px 20px 5px rgba(128, 128, 128, 0.1);
}
.insedow {
color: rgba(128, 128, 128, 0.7);
}
.white-color {
color: #ffffff;
}
.font-weight-lg {
font-weight: 600;
}
.screen-first {
height: 170mm;
width: 90mm;
background-color: #ffffff;
margin: 50px;
border-radius: 40px;
position: relative;
}
.screen-second {
height: 170mm;
width: 90mm;
background-color: wheat;
margin: 50px;
border-radius: 40px;
}
.screen-first-icon_box {
display: flex;
justify-content: space-between;
margin: 50px 25px 0;
}
.screen-first_profile_box {
display: flex;
justify-content: center;
margin-top: 30px;
}
.screen-first_profile {
height: 80px;
width: 80px;
background-color: orange;
border-radius: 50%;
box-shadow: 0 0px 15px 10px rgba(255, 180, 40, 0.3);
}
.screen-first_profile_name {
text-align: center;
font-size: x-large;
font-weight: 750;
margin-top: 40px;
}
.screen-first_profile_genre {
text-align: center;
font-weight: 600;
color: rgba(128, 128, 128, 0.7);
margin-top: 15px;
}
.screen-first_button-box {
margin-top: 35px;
display: flex;
justify-content: center;
}
.screen-first_button-box_button1 {
padding: 12px 32px;
border-radius: 30px;
background-color: black;
color: #ffffff;
margin-right: 5px;
}
.screen-first_button-box_button2 {
padding: 12px 20px;
border-radius: 30px;
background-color: #ffffff;
color: rgba(128, 128, 128, 0.7);
margin-left: 5px;
font-weight: 550;
}
.fa-heart {
color: black;
}
.screen-first_song-list {
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 20px;
margin-left: 15px;
margin-right: 15px;
}
.screen-first_song-list_profile {
display: flex;
align-items: center;
padding: 15px 25px;
position: relative;
border-radius: 20px;
}
.screen-first_song-list_profile_img {
display: flex;
align-items: center;
justify-content: center;
height: 45px;
width: 45px;
background-color: tomato;
border-radius: 10px;
}
.screen-first_song-list_profile_text {
margin-left: 15px;
}
.fa-ellipsis-vertical {
color: rgba(128, 128, 128, 0.7);
position: absolute;
right: 20px;
}
.screen-first_song-list_profile_text_title {
margin-bottom: 5px;
font-size: small;
}
.fa-chart-simple {
color: #ffffff;
}
.screen-first_music-player {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 5px;
}
.screen-first_music-player {
background-color: #222222;
padding: 15px 30px;
margin: 10px 15px;
border-radius: 50px;
}
.screen-first_music-player_text_singer {
margin-bottom: 7px;
}
.fa-pause {
margin: 0 20px;
}
추가로 reset.css 2.0도 적용하여 사용하고 있습니다.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<script
src="https://kit.fontawesome.com/3373615a5c.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="screen-first">
<div class="screen-first-icon_box">
<i class="fa-solid fa-arrow-left fa-lg"></i>
<i class="fa-solid fa-magnifying-glass fa-lg"></i>
</div>
<div class="screen-first_profile_box">
<div class="screen-first_profile"></div>
</div>
<h1 class="screen-first_profile_name">Tyler, The Creator</h1>
<h4 class="screen-first_profile_genre">Rap, Hip-Hop</h4>
<div class="screen-first_button-box">
<div class="screen-first_button-box_button1">Shuffle</div>
<div class="screen-first_button-box_button2 sedow">
<i class="fa-solid fa-heart fa-lg"></i> 212 971
</div>
</div>
<ul class="screen-first_song-list">
<li class="screen-first_song-list_profile">
<div class="screen-first_song-list_profile_img"></div>
<div class="screen-first_song-list_profile_text">
<h4
class="screen-first_song-list_profile_text_title insedow font-weight-lg"
>
Tyler, the Creator
</h4>
<h2
class="screen-first_song-list_profile_text_singer font-weight-lg"
>
EARFQUAKE
</h2>
</div>
<i class="fa-solid fa-ellipsis-vertical fa-xl"></i>
</li>
<li class="screen-first_song-list_profile sedow">
<div class="screen-first_song-list_profile_img">
<i class="fa-solid fa-chart-simple fa-xl"></i>
</div>
<div class="screen-first_song-list_profile_text">
<h4
class="screen-first_song-list_profile_text_title insedow font-weight-lg"
>
Tyler, the Creator
</h4>
<h2
class="screen-first_song-list_profile_text_singer font-weight-lg"
>
EARFQUAKE
</h2>
</div>
<i class="fa-solid fa-ellipsis-vertical fa-xl"></i>
</li>
<li class="screen-first_song-list_profile">
<div class="screen-first_song-list_profile_img"></div>
<div class="screen-first_song-list_profile_text">
<h4
class="screen-first_song-list_profile_text_title insedow font-weight-lg"
>
Tyler, the Creator
</h4>
<h2
class="screen-first_song-list_profile_text_singer font-weight-lg"
>
EARFQUAKE
</h2>
</div>
<i class="fa-solid fa-ellipsis-vertical fa-xl"></i>
</li>
<li class="screen-first_song-list_profile">
<div class="screen-first_song-list_profile_img"></div>
<div class="screen-first_song-list_profile_text">
<h4
class="screen-first_song-list_profile_text_title insedow font-weight-lg"
>
Tyler, the Creator
</h4>
<h2
class="screen-first_song-list_profile_text_singer font-weight-lg"
>
EARFQUAKE
</h2>
</div>
<i class="fa-solid fa-ellipsis-vertical fa-xl"></i>
</li>
</ul>
<div class="screen-first_music-player">
<div class="screen-first_music-player_text">
<div class="screen-first_music-player_text_singer insedow">
Tyler, The Creartor
</div>
<div
class="screen-first_music-player_text_title white-color font-weight-lg"
>
NOVEMBER
</div>
</div>
<div>
<i class="fa-solid fa-backward-step fa-lg white-color"></i>
<i class="fa-solid fa-pause fa-2xl white-color"></i>
<i class="fa-solid fa-forward-step fa-lg white-color"></i>
</div>
</div>
</div>
<!-- <div class="screen-second"></div> -->
</body>
</html>
이상하게 position absolute시에만 space-between이 작동하지 않습니다. 아무리 고민해보아도 원인을 파악할 수 없어 질문드립니다. ㅜㅜ
답변 1
0
2024. 01. 14. 04:36
안녕하세요, 인프런 AI 인턴입니다.
말씀해주신 내용을 통해 알 수 있는 것은 “.screen-first_music-player” 클래스에 “display: flex”와 “justify-content: space-between”이 적용되어 있으나, 예상한 대로 작동하지 않는다는 점입니다. 이 속성들은 flex 컨테이너 내의 자식 요소들 사이의 여백을 균등하게 분배할 때 사용합니다. 그런데 여기에서 중요한 것은 이러한 규칙은 flex 컨테이너의 직접적인 자식에 대해서만 적용된다는 점입니다.
.screen-first_music-player 요소가 flex 컨테이너로 지정되어 있다면, 해당 요소의 직접적인 자식들인 .screen-first_music-player_text와 그 뒤에 오는 <div> (플레이어 제어 버튼들을 감싼 <div>) 사이에 justify-content: space-between;의 효과가 적용됩니다.
그렇기 때문에 부모 컨테이너인 .screen-first_music-player가 position: absolute; 로 위치하더라도, justify-content: space-between; 자체는 자식 요소들에 대해서는 여전히 작동해야 합니다. 하지만 절대 위치를 지정한 요소가 다른 요소와의 관계에서 벗어나 개별적으로 움직일 때, space-between이 예상과 다르게 동작하는 경우가 있을 수 있습니다.
또한, .screen-first_music-player 클래스가 HTML 요소에 두 번 선언되어 있으며, 하나는 위치를 잡는 스타일을 가지고, 다른 하나는 배경색, 패딩, 마진 등 스타일을 가집니다. 이 부분 또한 혼돈을 줄 수 있으니, 두 부분을 하나로 합쳐 스타일을 재정립하는 것이 좋습니다.
아래와 같이 수정해 보세요:
.screen-first_music-player {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 5px;
background-color: #222222;
padding: 15px 30px;
margin: 10px 15px;
border-radius: 50px;
}
위의 CSS를 사용하여 .screen-first_music-player 요소의 스타일 정의를 하나로 합치고, 별도의 위치를 지정하지 않는 스타일 선언을 제거합니다. 이렇게 하면 .screen-first_music-player 요소 내에서 justify-content: space-between;이 정상적으로 작동하고, 자식 요소들 사이의 공간이 잘 분배되어야 합니다.
만약 이렇게 해도 문제가 해결되지 않는다면, 자식 요소들의 크기나 다른 부모 요소의 영향을 받아 제대로 작동하지 않을 수도 있습니다. 이 경우는 더 복잡한 CSS 상황이 발생할 수 있으니, 추가적인 검토가 필요하겠습니다.
도움이 되길 바랍니다. 이해가 되지 않거나 더 궁금한 점이 있으시면 언제든지 문의해주세요.