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
html{
color:#000;
background:#fff;
padding: 0.5em;
font-size: 14px;
}
h1 {
font-size: 2em;
line-height: 150%;
margin-bottom: 0.5em;
border-bottom: 2px solid #ccc;
font-weight: bold;
text-align: center;
}
h3 {
font-size: 1.5em;
font-weight: bold;
margin: 1em 0 0.5em 0;
}
div {
margin: 0.5em 0;
}
p {
line-height: 160%;
margin: 1em 0;
}
img.main {
width: 100%;
}
a.more {
background-color: pink;
color: white;
text-decoration: none;
padding: 0.5em 1em;
margin: 1em 0;
border-radius: 0.5em;
}
.member ul > li {
display: inline-block;
float: left;
width: 50%;
padding: 0.5em 1em;
background-color: skyblue;
box-sizing: border-box;
color: white;
margin-bottom: 1px;
border-right: 1px solid white;
}
.member ul > li:hover {
background-color: royalblue;
}
@media only screen and (min-device-width : 768px) {
div.img {
width: 33%;
display: inline-block;
vertical-align: top;
}
div.description {
width: 66%;
display: inline-block;
vertical-align: top;
padding-left: 1em;
box-sizing: border-box;
}
div.description p {
margin-top: 0;
}
.member ul > li {
width: 25%;
}
}
@media only screen and (min-device-width : 1025px) {
div.img {
width: 30%;
}
div.description {
width: 50%;
padding-right: 1em;
}
div.member {
width: 19%;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.member ul > li {
width: 100%;
}
h3 {
margin-top: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>실습 3-4</title>
<link href="./css/ex01.css" rel="stylesheet" type="text/css">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
</head>
<body>
<h1>소녀시대</h1>
<div class="img">
<img src="./images/gg.jpg" class="main">
</div>
<div class="description">
<p>
소녀시대(少女時代, 영어: Girls' Generation 걸스 제너레이션[*])는 SM 엔터테인먼트
소속의 대한민국 8인조 걸 그룹이다. 태연, 써니, 티파니, 효연, 유리, 수영, 윤아, 서현 8명으로 이루어져 있다.
소녀시대라는 이름은 소녀들이 평정할 시대가 왔다는 의미를 갖고 있다.
소녀시대는 2007년 8월 2일 데뷔 싱글 〈다시 만난 세계〉를 발매하고 8월 5일 SBS
《인기가요》를 통해 정식 데뷔했다. 같은 해 11월 1일 한국 첫 정규 앨범 《소녀시대》를 발매했으며,
〈Kissing You〉와 〈Baby Baby〉 등으로 활동하며 1위에 올랐다. 이후 2009년 1월 7일 첫 미니 앨범
《Gee》를 발매했다. 그해 6월 29일, 두 번째 미니 앨범 《소원을 말해봐》를 발매해 10만 장을 넘게 팔았다.
2009년 12월 29일부터는 Into the New World라는 첫 아시아 투어도 개최했다.
2010년 1월 28일에는 두 번째 정규 앨범 《Oh!》를 발매해 20만 장을 판매하며 4연속 앨범 판매량
10만 장을 돌파했다.
</p>
<a href="https://ko.wikipedia.org/wiki/%EC%86%8C%EB%85%80%EC%8B%9C%EB%8C%80" class="more">더보기</a>
</div>
<div class="member">
<h3>멤버구성</h3>
<ul>
<li>태연</li>
<li>써니</li>
<li>티파니</li>
<li>유리</li>
<li>효연</li>
<li>수영</li>
<li>윤아</li>
<li>서현</li>
</ul>
</div>
</body>
</html>