강희주 / Music_Recommendation_Website

Go to a project
Toggle navigation Toggle navigation pinning
진재영
8882d51e 1 parent 2785ce29

front file added

Inline Side-by-side
Showing 10 changed files with 500 additions and 0 deletions
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 + .register {width: 200%;}
17 +
18 + .login {width: 200%;}
19 +
20 + /* label 텍스트 스타일 */
21 + li label {
22 + width:120px;
23 + line-height: 36px;
24 + float:left;
25 + font-weight:bold;
26 + }
27 +
28 + /* 텍스트 필드 스타일 */
29 + input[type="text"], input[type="password"], input[type="email"] {
30 + width:300px;
31 + height:30px;
32 + }
33 +
34 + /* 버튼 스타일 */
35 + #buttons {
36 + width: 800px;
37 + margin:400px auto;
38 + text-align: center;
39 + }
40 + #buttons input {
41 + width: 500px;
42 + height:100px;
43 + font-size:20px;
44 + }
45 + #buttons input:hover {
46 + background-color:rgb(27, 134, 221);
47 + color:#fff;
48 + border-color:#fff;
49 + }
50 +
51 + /* 드롭다운 메뉴 스타일 */
52 + select {
53 + width:100px;
54 + height:30px;
55 + }
...\ No newline at end of file ...\ No newline at end of file
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="first.css">
14 + </head>
15 + <body>
16 + <div id="container">
17 + <h1>'프로그램명'을 방문해주셔서 감사합니다.</h1>
18 +
19 + <input type="button" value="register">
20 + <input type="button" value="login">
21 +
22 + <footer>
23 + <div>
24 + <p><b>developed by 강희주, 진재영, 김재욱</b></p>
25 + <address>Contact for more information. 010-2400-6771</address>
26 + <img style="width: 30%; height: 30%; float: right;" src="https://blog.kakaocdn.net/dn/bjsDsi/btqxXJM3JKe/WAK7xHbOm7kxyVqRIvoOaK/img.jpg" alt="경희대 마크">
27 + </div>
28 + </footer>
29 +
30 + </div>
31 + </body>
32 +</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 + .register {width: 200%;}
17 +
18 + .login {width: 200%;}
19 +
20 + /* label 텍스트 스타일 */
21 + li label {
22 + width:120px;
23 + line-height: 36px;
24 + float:left;
25 + font-weight:bold;
26 + }
27 +
28 + /* 텍스트 필드 스타일 */
29 + input[type="text"], input[type="password"], input[type="email"] {
30 + width:300px;
31 + height:30px;
32 + }
33 +
34 + /* 버튼 스타일 */
35 + #buttons {
36 + width: 800px;
37 + margin:400px auto;
38 + text-align: center;
39 + }
40 + #buttons input {
41 + width: 500px;
42 + height:100px;
43 + font-size:20px;
44 + }
45 + #buttons input:hover {
46 + background-color:rgb(27, 134, 221);
47 + color:#fff;
48 + border-color:#fff;
49 + }
50 +
51 + /* 드롭다운 메뉴 스타일 */
52 + select {
53 + width:100px;
54 + height:30px;
55 + }
...\ No newline at end of file ...\ No newline at end of file
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="first.css">
14 + </head>
15 + <body>
16 + <div id="container">
17 + <h1>'프로그램명'을 방문해주셔서 감사합니다.</h1>
18 +
19 + <input type="button" value="register">
20 + <input type="button" value="login">
21 +
22 + <footer>
23 + <div>
24 + <p><b>developed by 강희주, 진재영, 김재욱</b></p>
25 + <address>Contact for more information. 010-2400-6771</address>
26 + <img style="width: 30%; height: 30%; float: right;" src="https://blog.kakaocdn.net/dn/bjsDsi/btqxXJM3JKe/WAK7xHbOm7kxyVqRIvoOaK/img.jpg" alt="경희대 마크">
27 + </div>
28 + </footer>
29 +
30 + </div>
31 + </body>
32 +</html>
...\ No newline at end of file ...\ No newline at end of file
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 + <form>
19 + <fieldset>
20 + <legend>로그인</legend>
21 + <ul>
22 + <li>
23 + <label for="umail">아이디(이메일)</label>
24 + <input type="email" id="umail" required>
25 + </li>
26 + <li>
27 + <label for="pwd1">비밀번호</label>
28 + <input type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required>
29 + </li>
30 + </ul>
31 + </fieldset>
32 +
33 + <div id="buttons">
34 + <input type="submit" value="로그인">
35 + <input type="reset" value="취소">
36 + </div>
37 + </form>
38 + <br>
39 + <br>
40 + <br>
41 + <!-- 공간확보 -->
42 +
43 + <footer>
44 + <div>
45 + <p><b>developed by 강희주, 진재영, 김재욱</b></p>
46 + <address>Contact for more information. 010-2400-6771</address>
47 + <img style="width: 30%; height: 30%; float: right;" src="https://blog.kakaocdn.net/dn/bjsDsi/btqxXJM3JKe/WAK7xHbOm7kxyVqRIvoOaK/img.jpg" alt="경희대 마크">
48 + </div>
49 + </footer>
50 +
51 + </div>
52 + </body>
53 +</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
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
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
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="register2.css">
14 + </head>
15 + <body>
16 + <div id="container">
17 + <h1>'프로그램명'을 방문해주셔서 감사합니다.</h1>
18 + <form>
19 + <fieldset>
20 + <legend>사용자 정보</legend>
21 + <ul>
22 + <li>
23 + <label for="umail">아이디(이메일)</label>
24 + <input type="email" id="umail" required>
25 + </li>
26 + <li>
27 + <label for="pwd1">비밀번호</label>
28 + <input type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required>
29 + </li>
30 + <li>
31 + <label for="pw2">비밀번호 확인</label>
32 + <input type="password" id="pwd2" required>
33 + </li>
34 + </ul>
35 + </fieldset>
36 +
37 + <div id="buttons">
38 + <input type="submit" value="가입하기">
39 + <input type="reset" value="취소">
40 + </div>
41 + </form>
42 + <br>
43 + <br>
44 + <br>
45 + <!-- 공간확보 -->
46 +
47 + <footer>
48 + <div>
49 + <p><b>developed by 강희주, 진재영, 김재욱</b></p>
50 + <address>Contact for more information. 010-2400-6771</address>
51 + <img style="width: 30%; height: 30%; float: right;" src="https://blog.kakaocdn.net/dn/bjsDsi/btqxXJM3JKe/WAK7xHbOm7kxyVqRIvoOaK/img.jpg" alt="경희대 마크">
52 + </div>
53 + </footer>
54 +
55 + </div>
56 + </body>
57 +</html>
...\ No newline at end of file ...\ No newline at end of file