2017-1-WebServiceProgramming / Practice-Materials

Go to a project
Toggle navigation Toggle navigation pinning
신수용
1a0748a4 1 parent 6abcb290

수정

Inline Side-by-side
Showing 4 changed files with 46 additions and 32 deletions
...@@ -52,6 +52,7 @@ a.more { ...@@ -52,6 +52,7 @@ a.more {
52 color: white; 52 color: white;
53 margin-bottom: 1px; 53 margin-bottom: 1px;
54 border-right: 1px solid white; 54 border-right: 1px solid white;
55 + width: 33%;
55 } 56 }
56 57
57 .member ul > li:hover { 58 .member ul > li:hover {
...@@ -60,32 +61,39 @@ a.more { ...@@ -60,32 +61,39 @@ a.more {
60 61
61 @media only screen and (min-device-width : 768px) { 62 @media only screen and (min-device-width : 768px) {
62 div.img { 63 div.img {
63 - width: 33%; 64 + width: 50%;
64 display: inline-block; 65 display: inline-block;
65 vertical-align: top; 66 vertical-align: top;
66 } 67 }
67 - div.description { 68 + div.member {
68 - width: 66%; 69 + width: 49%;
69 display: inline-block; 70 display: inline-block;
70 vertical-align: top; 71 vertical-align: top;
71 padding-left: 1em; 72 padding-left: 1em;
72 box-sizing: border-box; 73 box-sizing: border-box;
73 } 74 }
75 + div.description {
76 + vertical-align: top;
77 + padding-left: 1em;
78 + box-sizing: border-box;
79 + }
74 div.description p { 80 div.description p {
75 margin-top: 0; 81 margin-top: 0;
76 } 82 }
77 .member ul > li { 83 .member ul > li {
78 - width: 25%; 84 + width: 100%;
79 } 85 }
80 } 86 }
81 87
82 @media only screen and (min-device-width : 1025px) { 88 @media only screen and (min-device-width : 1025px) {
83 div.img { 89 div.img {
84 width: 30%; 90 width: 30%;
91 + display: inline-block;
85 } 92 }
86 div.description { 93 div.description {
87 width: 50%; 94 width: 50%;
88 padding-right: 1em; 95 padding-right: 1em;
96 + display: inline-block;
89 } 97 }
90 div.member { 98 div.member {
91 width: 19%; 99 width: 19%;
......
...@@ -2,42 +2,48 @@ ...@@ -2,42 +2,48 @@
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta charset='utf-8'> 4 <meta charset='utf-8'>
5 - <title>실습 3-4</title> 5 + <title>실습 Responsie Web Design 01</title>
6 - <link href="./css/ex01.css" rel="stylesheet" type="text/css"> 6 + <link rel="stylesheet" type="text/css" href="css/ex01.css" />
7 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 7 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
8 </head> 8 </head>
9 <body> 9 <body>
10 - <h1>소녀시대</h1> 10 + <h1>
11 + <a href="http://twice.jype.com/"> 트와이스 </a>
12 + </h1>
11 <div class="img"> 13 <div class="img">
12 - <img src="./images/gg.jpg" class="main"> 14 + <img src="images/Twice.jpg" class="main">
13 - </div>
14 - <div class="description">
15 - <p>
16 - 소녀시대(少女時代, 영어: Girls' Generation 걸스 제너레이션[*])는 SM 엔터테인먼트
17 - 소속의 대한민국 8인조 걸 그룹이다. 태연, 써니, 티파니, 효연, 유리, 수영, 윤아, 서현 8명으로 이루어져 있다.
18 - 소녀시대라는 이름은 소녀들이 평정할 시대가 왔다는 의미를 갖고 있다.
19 - 소녀시대는 2007년 8월 2일 데뷔 싱글 〈다시 만난 세계〉를 발매하고 8월 5일 SBS
20 - 《인기가요》를 통해 정식 데뷔했다. 같은 해 11월 1일 한국 첫 정규 앨범 《소녀시대》를 발매했으며,
21 - 〈Kissing You〉와 〈Baby Baby〉 등으로 활동하며 1위에 올랐다. 이후 2009년 1월 7일 첫 미니 앨범
22 - 《Gee》를 발매했다. 그해 6월 29일, 두 번째 미니 앨범 《소원을 말해봐》를 발매해 10만 장을 넘게 팔았다.
23 - 2009년 12월 29일부터는 Into the New World라는 첫 아시아 투어도 개최했다.
24 - 2010년 1월 28일에는 두 번째 정규 앨범 《Oh!》를 발매해 20만 장을 판매하며 4연속 앨범 판매량
25 - 10만 장을 돌파했다.
26 - </p>
27 - <a href="https://ko.wikipedia.org/wiki/%EC%86%8C%EB%85%80%EC%8B%9C%EB%8C%80" class="more">더보기</a>
28 </div> 15 </div>
29 <div class="member"> 16 <div class="member">
30 - <h3>멤버구성</h3> 17 + <h3>구성원</h3>
31 <ul> 18 <ul>
32 - <li>태연</li> 19 + <li> 지효 </li>
33 - <li>써니</li> 20 + <li> 나연 </li>
34 - <li>티파니</li> 21 + <li> 정연 </li>
35 - <li>유리</li> 22 + <li> 모모 </li>
36 - <li>효연</li> 23 + <li> 사나 </li>
37 - <li>수영</li> 24 + <li> 미나 </li>
38 - <li>윤아</li> 25 + <li> 다현 </li>
39 - <li>서현</li> 26 + <li> 채영 </li>
27 + <li> 쯔위 </li>
40 </ul> 28 </ul>
41 </div> 29 </div>
30 + <div class="description">
31 + <p>
32 + 트와이스(2015년 10월 20일 ~ 현재)는 대한민국의 9인조 걸 그룹으로, JYP 엔터테인먼트 소속이다.
33 + 2015년 5월 5일부터 두 달동안 진행된 서바이벌 프로그램 Mnet 《SIXTEEN》을 통해 9명의 최종 멤버들이 선발되었으며,
34 + 2015년 10월 19일 타이틀곡 "OOH-AHH하게" 뮤직비디오와 음원을 공개하고, 20일 첫 번째 EP 앨범 《THE STORY BEGINS》 발매와 동시에 데뷔 쇼케이스로 데뷔하였다. 2016년 4월 25일 두 번째 EP 앨범 《PAGE TWO》를 발매하였고, 데뷔 1주년인 2016년 10월 24일 세 번째 EP 앨범 《TWICEcoaster : LANE 1》을 발매하였다.
35 + </p>
36 + <h3>소속사:
37 + <a href="http://www.jype.com/" class = "more" target="blank">
38 + JYP 엔터테인먼트
39 + </a>
40 + </h3>
41 + <h3> 앨범</h3>
42 + <ol>
43 + <li><a href="https://ko.wikipedia.org/wiki/THE_STORY_BEGINS">THE STORY BEGINS</a></li>
44 + <li><a href="https://ko.wikipedia.org/wiki/PAGE_TWO">PAGE TWO</a></li>
45 + <li><a href="https://ko.wikipedia.org/wiki/TWICEcoaster_:_LANE_1">TWICEcoaster : LANE 1</a></li>
46 + </ol>
47 + </div>
42 </body> 48 </body>
43 </html> 49 </html>
......