개발자 99% 커뮤니티에서 수다 떨어요!
안녕하세요, 이번 playlist 과제를 수행하던 도중 질문이 생겨 올립니다.
body 내에 컨텐츠 전체를 감싸는 div ( 제 코드에서 class="main-body")가 있는데,
높이만 500px로 지정하고 width를 따로 주지 않았는데도 알아서 화면 창에 맞는 폭을 가지더군요.
부모인 body를 flex로 지정한것이 아닌데도 말이죠!
더욱 더 이상한것은, 가끔씩 div와 같은 블럭들은 height나 width, 둘중 하나만 지정하면 출력이 되지 않던데 (당연히 폭이0이거나, 높이가0인 블럭은 화면에 안 뜨겠죠) 왜 저 main-body는 뜨는걸까요? 궁금합니다!
혹시 몰라 코드 전 부분을 첨부합니다. main-body 클래스를 갖는 div는 앞부분에 위치하고 있습니다. 감사합니다!
(CSS 코드)
@import "reset.css";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap");
body {
background-color: aquamarine;
font-family: "Open Sans", sans-serif;
}
.main-body {
margin: 10px;
padding: 30px;
height: 500px;
background-color: white;
flex-direction: column;
align-items: center;
}
.list-bar {
display: flex;
flex-direction: row;
}
.list-bar__row {
width: 33%;
}
.list-bar__row:first-child {
width: 33%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.list-bar__row:nth-child(2) {
display: flex;
justify-content: center;
align-items: flex-start;
font-size: 20px;
font-weight: 900;
}
.playing {
margin-top: 40px;
height: 100px;
display: flex;
justify-content: space-between;
}
.playing__picture {
width: 100px;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
background-color: orange;
border-radius: 10%;
border: black solid 2px;
}
.fa-image {
color: white;
}
.playing__title {
margin-left: 30px;
width: 50%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.playing__title p {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: 20px;
font-weight: bolder;
}
.playing__title span {
margin-top: 30px;
font-size: 12px;
}
.buttons {
margin-top: 40px;
height: 50px;
display: flex;
justify-content: space-between;
}
.buttons__play-button {
width: 150px;
border-radius: 10px;
border: 2px solid black;
border-bottom-width: 4px;
display: flex;
justify-content: center;
align-items: center;
}
.buttons__play-button i {
margin-right: 10px;
}
.buttons__play-button:hover {
color: green;
}
.buttons__play-button:hover span {
color: black;
font-weight: bold;
}
.buttons__like-button {
width: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
border-bottom-width: 4px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.buttons__like-button:hover {
color: orangered;
}
.buttons__plus-button {
width: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
border-bottom-width: 4px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.buttons__plus-button:hover .fa-plus {
color: orangered;
}
.buttons__plus-button:hover {
background-color: aqua;
}
div[class^="buttons"] :active {
transform: translateY(2px);
}
.playlist {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.playlist__column {
padding: 2px;
height: 40px;
width: 300px;
margin: 10px 0px 10px 0px;
display: flex;
justify-self: flex-end;
align-items: center;
}
.playlist__column:hover {
border-style: solid;
border-color: black;
border-width: 1.5px;
}
.playlist__column__color {
margin-right: 10px;
height: 30px;
width: 30px;
border: 2px solid black;
}
.playlist__column span:first-child {
font-size: 20px;
}
.playlist__column span:nth-child(3) {
font-size: 10px;
}
.playlist__column:first-child .playlist__column__color {
background-color: orangered;
}
.playlist__column:nth-child(2) .playlist__column__color {
background-color: pink;
}
.playlist__column:nth-child(3) .playlist__column__color {
background-color: blue;
}
.playlist__column:nth-child(4) .playlist__column__color {
background-color: aqua;
}
(html 코드)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>You Are Awesome!</title>
<link rel="stylesheet" href="assignment5.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/FortAwesome/[email protected]/css/all.min.css"
/>
<script
src="https://kit.fontawesome.com/fbb6dbb472.js"
crossorigin="anonymous"
></script>
</head>
<body>
<main class="main-body">
<header class="list-bar">
<div class="list-bar__row">
<i class="fas fa-times"></i>
</div>
<div class="list-bar__row">
<span>-playlist-</span>
</div>
</header>
<div class="playing">
<div class="playing__picture">
<i class="far fa-image fa-3x"></i>
</div>
<div class="playing__title">
<p>Random</p>
<br />
<p>Love</p>
<span>by Divay Kapoor</span>
</div>
</div>
<div class="buttons">
<div class="buttons__play-button">
<i class="fas fa-play fa-lg"></i>
<span>play</span>
</div>
<div class="buttons__like-button">
<i class="far fa-heart fa-lg"></i>
</div>
<div class="buttons__plus-button">
<i class="fas fa-plus fa-lg"></i>
</div>
</div>
<footer class="playlist">
<div class="playlist__column">
<div class="playlist__column__color"></div>
<div>
<span>Matargasti</span>
<br />
<span>Mohit Chauhan</span>
</div>
</div>
<div class="playlist__column">
<div class="playlist__column__color"></div>
<div>
<span>Attitude</span>
<br />
<span>Lewis OfMan - Attitude</span>
</div>
</div>
<div class="playlist__column">
<div class="playlist__column__color"></div>
<div>
<span> Try Everything </span>
<br />
<span>Shakira - Zootopia</span>
</div>
</div>
<div class="playlist__column">
<div class="playlist__column__color"></div>
<div>
<span>Sunflower</span>
<br />
<span>Joseph Vincent - Sunflower</span>
</div>
</div>
</footer>
</main>
</body>
</html>