• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    해결됨

div 상자 안에 div가 안들어가져요

22.12.30 02:00 작성 조회수 453

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)안에 두 상자가 다 안담아져요
어디가 문제 일까요..?ㅠㅠ

course-thumbnail

[코드캠프] 시작은 프리캠프

싸이월드 만들기 5탄

강의실 바로가기

답변 1

답변을 작성해보세요.

0

Camp_멘토님의 프로필

Camp_멘토

2022.12.30

안녕하세요 성모님

class="pic_title"을 담고 있는 태그의 이름에 유의하시기 바랍니다.
duv -> div로 수정해보세요.

항상 개발하실 때 오타에 유의하시면 에러를 줄이실 수 있으실겁니다 :)

이 글과 비슷한 Q&A