<!DOCTYPE html>
<html lang="ko">
<!-- div의 좌우배치를 위해 style 태그를 선언하였습니다 -->
<!-- left-box에 float 속성이 들어가 있으므로
right-box에 overflow 속성을 넣어주면 공간이 분리되는 것 같습니다. 곡 페이지 코드에도 해당 속성을 추가해 두겠습니다. -->
<style>
.left-box {
float: left;
}
.right-box {
overflow: auto;
}
.center-box {
margin:0 auto;
}
</style>
<body>
<!-- 임시적으로 텍스트로 표현하였습니다 -->
<h3 style="text-align:left;"> 플레이리스트 </h3>
<!-- 메인 화면으로 돌아가는 버튼과 곡 추가 버튼의 배치가 애매해 이번 주차에는 일단 그대로 두겠습니다. -->
<!-- 왼쪽의 플리와 관련된 공간입니다 -->
<div class="left-box" margin=3px>
<img src="image.png" width="200" height="200"></img>
<p style="text-align:left;">플레이리스트 이름</p>
<p>노래 nn개</p>
<p>사용자 아이디</p>
<p style="text-align:right">수정 삭제</p>
<!-- 추후 수정과 삭제는 a태그로 교체합니다 -->
<hr width=90%, color="black" size=1px class="left-box"></hr><br>
<p style="text-align:left;">플리 설명</p>
</div>
<!-- 오른쪽의 플레이리스트 구역입니다. 플레이리스트별 테이블을 만들면 반복문을 통해 테이블 안의 곡명들이 일제히 표시되도록 합니다. -->
<div class="right-box" style="border:1px solid; padding:10px; margin:3px;">
<p><img src="play.png"></img>
example - song1</p>
<hr width=90%, color="black" size=1px class="left-box"></hr><br>
<p><img src="play.png"></img>
example - song2</p>
<hr width=90%, color="black" size=1px class="left-box"></hr><br>
<p><img src="play.png"></img>
example - song3</p>
<hr width=90%, color="black" size=1px class="left-box"></hr><br>
<p><img src="play.png"></img>
example - song4</p>
<hr width=90%, color="black" size=1px class="left-box"></hr><br>
</div>
</body>
</html>
3. 노래 가사 페이지
(플레이리스트에서 노래 링크를 클릭하면 이동)
<!DOCTYPE html>
<html lang="ko">
<!-- div의 좌우배치를 위해 style 태그를 선언하였습니다 -->
<style>
.left-box {
float: left;
}
.right-box {
overflow: auto;
}
.center-box {
margin:0 auto;
}
</style>
<body>
<!-- 임시적으로 텍스트로 표현하였습니다 -->
<h3 style="text-align:left;"> 플레이리스트 </h3>
<!-- 왼쪽의 노래와 관련된 공간입니다 -->
<div class="left-box" margin=3px>
<iframe src="https://www.youtube.com/watch?v=sWMk8dwljFU" width="300" height="300"></iframe>
<p style="text-align:left;">노래 제목</p>
<hr width=90%, color="black" size=1px class="left-gox"></hr>
<p style="text-align:left;">노래 설명</p>
</div>
<!-- 오른쪽의 가사와 관련된 공간입니다. 임시적으로 shaek it off의 가사를 넣어놓았으며 iframe과 공간 구분을 추가로 구현해야 합니다 -->
<div style="border:1px solid; padding:10px; margin:3px;">
I stay out too late, got nothing in my brain
That's what people say, that's what people say
I go on too many dates, but I can't make them stay
At least that's what people say, that's what people say
But I keep cruising
Can't stop, won't stop moving
It's like I got this music in my mind
Saying it's gonna be alright
I never miss a beat, I'm lightning on my feet
And that's what they don't see, that's what they don't see
Players gonna play, play, play, play, play
And the haters gonna hate, hate, hate, hate, hate (haters gonna hate)
Baby, I'm just gonna shake, shake, shake, shake, shake
I shake it off, I shake it off
Heartbreakers gonna break
Fakers gonna fake
I'm just gonna shake
I shake it off, I shake it off
I shake it off, I shake it off
I, I, I shake it off, I shake it off
I, I, I shake it off, shake it off
I, I, I shake it off, I shake it off
I, I, I shake it off, I shake it off
I, I, I shake it off, I shake it off
I, I, I, shake it off, I shake it off
I, I, I, shake it off, I shake it off
</div>
</body>
</html>
시작화면 - (>) 버튼 추가하고 클릭하면 tab1.html로 넘어갈 수 있게 a태그 사용
탭1 - input 박스에 미리보기 텍스트 삽입 (placeholder 속성 사용)
탭1 - Lv 선택을 콤보박스(셀렉트박스) 형태로 변경
탭1 - (+) 버튼 추가
js 문서 추가
코드
0. 시작화면 (html 코드)
<!DOCTYPE html>
<html>
<head>
<script src="check.js">
</script>
<title></title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<div class="div1">
<h1 class="start">대체 이걸 언제 다 하죠?</h1>
<p class="start">과제1은 다음 주까지, 과제2는 이틀 내로, 과제3은 오늘 밤까지... 공부할 것도 있고 집안일도 쌓였는데!<br>
정신없고 막막한 마음 이해해요. 하지만 못 할 것도 없죠. 우선은 적는 것부터 시작해 볼까요?</p>
<p class="start">할일과 중요도, 마감 기한을 <strong>리스트</strong>로 적어놓으면 무엇을 먼저 처리해야 할지 알 수 있어요. 시간 배분도 쉬워지죠.<br>
적고, 해내고, 체크하기만 하세요! 몇 개를 해냈는지 세어서 알려드릴게요.<br>
게임에서 퀘스트를 하나씩 해결해 나가듯, 이 많은 걸 내가 다 해냈다는 보람에 취해 보세요.</p>
</div>
<div class="div2">
<h2 class="start">LOGIN</h2>
<p class="start">아이디를 입력해 주세요.</p>
<input id = "username" type="text" class="text_input" placeholder="ID 입력" onchange = 'getName()'><br>
<a href="tab1.html">
<input class="go" type="button" name="redirect" value="">
</a>
</div>
</body>
</html>
각각의 부분에 클래스를 부여하여 관리 (전체는 playlist, 아이콘+노래제목+재생시간 표시는 한 묶음으로 하여 music, 아이콘은 player, 이름은 music_name, 재생시간은 playtime)
하이퍼링크에 기본으로 들어가는 밑줄을 없애기 위해 text-decoration을 none으로 지정
border-bottom에 dotted 스타일의 경계선을 넣어 음악 개체끼리 구분
<div class="title">
<h1>오늘의 퀘스트</h1>
오래 볼수록 하기 싫습니다. 자세히 보면 더 하기 싫습니다.<br>
흐린 눈으로 해치우고 나면 그제서야 아름다워집니다.
</div>
<div class="menu">
<span class="tab" id="current_tab"> QUEST </span>
<span class="tab"> MYPAGE </span>
<a href="tab3.html" class="tab"> BGM </a>
</div>
<body>
<div class="div1">
<h1 class="start">대체 이걸 언제 다 하죠?</h1>
<p class="start">과제1은 다음 주까지, 과제2는 이틀 내로, 과제3은 오늘 밤까지... 공부할 것도 있고 집안일도 쌓였는데!<br>
정신없고 막막한 마음 이해해요. 하지만 못 할 것도 없죠. 우선은 적는 것부터 시작해 볼까요?</p>
<p class="start">할일과 중요도, 마감 기한을 <strong>리스트</strong>로 적어놓으면 무엇을 먼저 처리해야 할지 알 수 있어요. 시간 배분도 쉬워지죠.<br>
적고, 해내고, 체크하기만 하세요! 몇 개를 해냈는지 세어서 알려드릴게요.<br>
게임에서 퀘스트를 하나씩 해결해 나가듯, 이 많은 걸 내가 다 해냈다는 보람에 취해 보세요.</p>
</div>
<div class="div2">
<h2 class="start">LOGIN</h2>
<p class="start">아이디를 입력해 주세요.</p>
<input type="text" class="text_input" ><br>
<input type="button" class="button">
</div>
</body>
</html>
