2017-1-WebServiceProgramming / Practice-Materials

Go to a project
Toggle navigation Toggle navigation pinning
신수용
415a3647 1 parent fd30887f

06 responsive design

Inline Side-by-side
Showing 3 changed files with 145 additions and 0 deletions
1 +html{
2 + color:#000;
3 + background:#fff;
4 + padding: 0.5em;
5 + font-size: 14px;
6 +}
7 +
8 +h1 {
9 + font-size: 2em;
10 + line-height: 150%;
11 + margin-bottom: 0.5em;
12 + border-bottom: 2px solid #ccc;
13 + font-weight: bold;
14 + text-align: center;
15 +}
16 +
17 +h3 {
18 + font-size: 1.5em;
19 + font-weight: bold;
20 + margin: 1em 0 0.5em 0;
21 +}
22 +
23 +div {
24 + margin: 0.5em 0;
25 +}
26 +
27 +p {
28 + line-height: 160%;
29 + margin: 1em 0;
30 +}
31 +
32 +img.main {
33 + width: 100%;
34 +}
35 +
36 +a.more {
37 + background-color: pink;
38 + color: white;
39 + text-decoration: none;
40 + padding: 0.5em 1em;
41 + margin: 1em 0;
42 + border-radius: 0.5em;
43 +}
44 +
45 +.member ul > li {
46 + display: inline-block;
47 + float: left;
48 + width: 50%;
49 + padding: 0.5em 1em;
50 + background-color: skyblue;
51 + box-sizing: border-box;
52 + color: white;
53 + margin-bottom: 1px;
54 + border-right: 1px solid white;
55 +}
56 +
57 +.member ul > li:hover {
58 + background-color: royalblue;
59 +}
60 +
61 +@media only screen and (min-device-width : 768px) {
62 + div.img {
63 + width: 33%;
64 + display: inline-block;
65 + vertical-align: top;
66 + }
67 + div.description {
68 + width: 66%;
69 + display: inline-block;
70 + vertical-align: top;
71 + padding-left: 1em;
72 + box-sizing: border-box;
73 + }
74 + div.description p {
75 + margin-top: 0;
76 + }
77 + .member ul > li {
78 + width: 25%;
79 + }
80 +}
81 +
82 +@media only screen and (min-device-width : 1025px) {
83 + div.img {
84 + width: 30%;
85 + }
86 + div.description {
87 + width: 50%;
88 + padding-right: 1em;
89 + }
90 + div.member {
91 + width: 19%;
92 + box-sizing: border-box;
93 + display: inline-block;
94 + vertical-align: top;
95 + }
96 + .member ul > li {
97 + width: 100%;
98 + }
99 + h3 {
100 + margin-top: 0;
101 + }
102 +}
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset='utf-8'>
5 + <title>실습 3-4</title>
6 + <link href="./css/ex01.css" rel="stylesheet" type="text/css">
7 + <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
8 +</head>
9 +<body>
10 + <h1>소녀시대</h1>
11 + <div class="img">
12 + <img src="./images/gg.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>
29 + <div class="member">
30 + <h3>멤버구성</h3>
31 + <ul>
32 + <li>태연</li>
33 + <li>써니</li>
34 + <li>티파니</li>
35 + <li>유리</li>
36 + <li>효연</li>
37 + <li>수영</li>
38 + <li>윤아</li>
39 + <li>서현</li>
40 + </ul>
41 + </div>
42 +</body>
43 +</html>