css position absolute설정 시 space-betw... - 인프런

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이 작동하지 않습니다. 아무리 고민해보아도 원인을 파악할 수 없어 질문드립니다. ㅜㅜ

안녕하세요, 인프런 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 상황이 발생할 수 있으니, 추가적인 검토가 필요하겠습니다.

도움이 되길 바랍니다. 이해가 되지 않거나 더 궁금한 점이 있으시면 언제든지 문의해주세요.

인프런 커뮤니티 질문&답변

css position absolute설정 시 space-between이 실행되지 않습니다.