Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
div의 폭 자동 지정에 관한 고찰
#html_css
3년 전
1,003
2

안녕하세요, 이번 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>
 

2 comments