css position absolute설정 시 space-between이 실행되지 않습니다.
cssbody {
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이 작동하지 않습니다. 아무리 고민해보아도 원인을 파악할 수 없어 질문드립니다. ㅜㅜ