해결된 질문
작성
·
685
0
html
<!DOCTYPE html>
<html lang="kr">
<head>
<title>Document</title>
<link rel="stylesheet" href="../cyworld/styles/jukebox.css">
</head>
<body>
<div class="Bigframe">
<div class="pic">
<div class="pic_title">
<duv class="main_title">추억의 BGM</div>
<div class="sub_title">TODAY CHOICE</div>
</div>
<div class="Line"></div>
<div class="pics">
<div class="pic1">
<img src="./images/y사진.png" class="album_pic">
<div class="song_title">Y(Please Tell Me Why)</div>
<div class="artist">프리스타일</div>
</div>
<div class="pic1">
<img src="./images/snow.png" class="album_pic">
<div class="song_title">눈의 꽃</div>
<div class="artist">박효신</div>
</div>
<div class="pic1">
<img src="./images/love.png" class="album_pic">
<div class="song_title">사랑했나봐</div>
<div class="artist">윤도현</div>
</div>
</div>
</div>
<div class="list">
<div class="pic_title">
<duv class="main_title">추억의 BGM</div>
<div class="sub_title">TODAY CHOICE</div>
</div>
<table class="music_list">
<tr>
<th class="checkbox"><input type="checkbox"></th>
<th class="number">번호</th>
<th class="song">곡명</th>
<th class="artist">아티스트</th>
</tr>
<tr>
<td class="checkbox1"><input type="checkbox"></td>
<td class="number1">1</td>
<td class="song1">눈의 꽃</td>
<td class="artist1">박효신</td>
</tr>
<tr>
<td class="checkbox1"><input type="checkbox"></td>
<td class="number1">2</td>
<td class="song1">사랑스러워</td>
<td class="artist1">김종국</td>
</tr>
<tr>
<td class="checkbox1"><input type="checkbox"></td>
<td class="number1">3</td>
<td class="song1">내사람:Partner For Life</td>
<td class="artist1">SG워너비</td>
</tr>
<tr>
<td class="checkbox1"><input type="checkbox"></td>
<td class="number1">4</td>
<td class="song1">Love Love Love</td>
<td class="artist1">에픽하이</td>
</tr>
<tr>
<td class="checkbox1"><input type="checkbox"></td>
<td class="number1">5</td>
<td class="song1">애인...있어요</td>
<td class="artist1">이은미</td>
</tr>
</table>
</div>
</div>
</body>
</html>
css
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body,html{
width:100%;
height: 100%;
}
.Bigframe{
display: flex;
flex-direction: column;
width: 100%;
padding: 20px 30px;
justify-content: space-between;
align-items: center;
}
.pic{
width: 100%;
}
.pic_title{
width: 100%;
display: flex;
flex-direction: row;
}
.main_title{
color: #55B2E4;
font-size: 13px;
font-weight: 700;
}
.sub_title{
font-size: 8px;
padding-left: 5px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.Line{
width: 100%;
border-top: 1px solid gray;
}
.pics{
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 12px;
}
.album_pic{
width: 120px;
height: 120px;
padding: 5px;
}
.song_title{
font-family: 'Malgun Gothic';
font-weight: bold;
font-size: 11px;
color: #0F465E;
display: flex;
flex-direction: row;
justify-content: center;
}
.artist{
font-family: 'Malgun Gothic';
font-weight: 700;
font-size: 10px;
display: flex;
flex-direction: row;
font-weight: bold;
justify-content: center;
}
.list{
width: 100%;
}
.music_list{
width: 100%;
padding-top: 8px;
border-spacing: 0px;
}
.music_list th{
height: 20px;
font-size: 10px;
font-weight: bold;
color: gray;
background-color: #eeeeee;
border-top: 1px solid gray;
border-bottom: 1px dashed gray;
}
.music_list td{
height: 20px;
font-size: 10px;
color: #0f465e;
border-bottom: 1px dashed gray;
}
.checkbox1{
width:5%;
text-align: center;
}
.number1{
width:10%;
text-align: center;
}
.song1{
width:45%;
text-align: left;
}
.artist1{
width:30%;
text-align: center;
}
실행 시
Bigframe(wrapper)안에 두 상자가 다 안담아져요
어디가 문제 일까요..?ㅠㅠ
답변 1
0
안녕하세요 성모님
class="pic_title"을 담고 있는 태그의 이름에 유의하시기 바랍니다.
duv -> div로 수정해보세요.
항상 개발하실 때 오타에 유의하시면 에러를 줄이실 수 있으실겁니다 :)