강희주 / Music_Recommendation_Website

Go to a project
Toggle navigation Toggle navigation pinning
Jaewook
675cace6 1 parent 6207a82f

add main_css, main_html files

Inline Side-by-side
Showing 2 changed files with 114 additions and 0 deletions
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 + <head>
4 + <script src="main.js"> </script>
5 + <meta charset="UTF-8">
6 + <title>날씨에 따른 음악 추천 사이트</title>
7 + <style>
8 + #container {
9 + width:600px;
10 + margin:10px auto;
11 + }
12 + </style>
13 + <link rel="stylesheet" href="register.css">
14 + </head>
15 + <body>
16 + <div id="container">
17 + <h1>'프로그램명'을 방문해주셔서 감사합니다.</h1>
18 +
19 + <fieldset>
20 + <legend>현재 시각 정보</legend>
21 + <div><input type="button" value="현재 시간 새로고침"></div><br>
22 + </fieldset>
23 +
24 + <fieldset>
25 + <legend>현재 내 위치 정보</legend>
26 + <div><input type="button" value="현재 내 위치 검색"></div><br><!-- 검색 버튼 누르면 팝업으로 위치 서비스 동의 버튼 뜨게 하기 -->
27 + </fieldset>
28 +
29 + <fieldset>
30 + <legend>추천 음악 정보</legend>
31 + <div><input type="button" value="음악 추천 받기"></div><br>
32 +
33 + <h4>첫 번째 음악 재생</h4>
34 + <div>playlist</div>
35 + <iframe width="942" height="530" src="https://www.youtube.com/embed/vnS_jn2uibs" title="YouTube video player" frameborder="0"
36 + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
37 + <!-- 위에는 예시 영상임(데이식스-한 페이지가 될 수 있게). 나중에 자동으로 영상 키를 받아올 수 있도록 구현해야 할 듯.
38 + 참고로 영상 키는 위 링크 중 embed 다음에 오는 "vnS_jn2uibs"에 해당. -->
39 + </fieldset>
40 +
41 +
42 + <br>
43 + <br>
44 + <br>
45 + <br>
46 + <br>
47 + <br>
48 + <br>
49 + <br>
50 + <br>
51 + <!-- 공간확보 -->
52 +
53 + <footer>
54 + <div>
55 + <p><b>developed by 강희주, 진재영, 김재욱</b></p>
56 + <address>Contact for more information. 010-2400-6771</address>
57 + <img style="width: 30%; height: 30%; float: right;" src="https://blog.kakaocdn.net/dn/bjsDsi/btqxXJM3JKe/WAK7xHbOm7kxyVqRIvoOaK/img.jpg" alt="경희대 마크">
58 + </div>
59 + </footer>
60 +
61 + </div>
62 + </body>
63 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +#container {
2 + width:600px;
3 + margin:10px auto;
4 + }
5 + fieldset {
6 + margin-bottom: 20px;
7 + }
8 + ul {
9 + list-style: none;
10 + padding-left: 0;
11 + }
12 + ul li {
13 + margin:10px;
14 + }
15 +
16 + /* label 텍스트 스타일 */
17 + li label {
18 + width:120px;
19 + line-height: 36px;
20 + float:left;
21 + font-weight:bold;
22 + }
23 +
24 + /* 텍스트 필드 스타일 */
25 + input[type="text"], input[type="password"], input[type="email"] {
26 + width:300px;
27 + height:30px;
28 + }
29 +
30 + /* 버튼 스타일 */
31 + #buttons {
32 + width:400px;
33 + margin:20px auto;
34 + text-align: center;
35 + }
36 + #buttons input {
37 + width:150px;
38 + height:50px;
39 + font-size:20px;
40 + }
41 + #buttons input:hover {
42 + background-color:rgb(27, 134, 221);
43 + color:#fff;
44 + border-color:#fff;
45 + }
46 +
47 + /* 드롭다운 메뉴 스타일 */
48 + select {
49 + width:100px;
50 + height:30px;
51 + }
...\ No newline at end of file ...\ No newline at end of file