전준호 / ex

Go to a project
Toggle navigation Toggle navigation pinning
전준호
0e830db6 1 parent 986d0b8b

responsive design example

Inline Side-by-side
Showing 1 changed file with 143 additions and 0 deletions
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0" name="viewport"/>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<style>
p.title {
background-color: #F0F;
color: #FFF;
width: 100%;
margin: 10px;
height: 50px;
font-size: 30px;
border-radius: 10px;
text-align: center;
}
img {
width: 50%;
margin-left: 10px;
}
ul#member {
width: 50%;
margin-top:0;
}
ul#member li {
background-color: #a0a0a0;
width: 10%;
margin: 5px;
border-radius: 30px;
}
div#greater_content {
width: 50%
}
div#content {
border-left: 20px #8dc68d solid;
outline: 1px #a0a0a0 solid;
padding: 2px;
width: 40%;
}
a.album {
text-decoration: none;
}
li.albumlist {
list-style: none;
float: left;
width: 30%;
height: auto;
margin: 10px;
background-color: #a0a0a0;
text-align: center;
}
@media screen and (min-width: 1024px) {
img {
width: 20%;
float: left;
}
ul#member {
width: 30%;
display: inline-block;
float: left;
}
div#greater_content {
width: 30%;
display: inline-block;
float: left;
overflow: auto;
}
}
</style>
</head>
<body>
<p class="title">
트와이스
</p>
<img src = "http://cfile30.uf.tistory.com/image/217F5C4B571DEB641CCE7B"/>
<ul id="member">구성원
<li>지효</li>
<li>나연</li>
<li>정연</li>
<li>모모</li>
<li>사나</li>
<li>미나</li>
<li>다현</li>
<li>채영</li>
<li>쯔위</li>
</ul>
<div id=greater_content>
<div id="content">
트와이스(2015년 10월 20일 ~ 현재)는 대한민국의 9인조 걸 그룹이다. 팀명의 의미는 눈으로 한 번, 귀로 한 번 감동을 준다는 뜻이다.
Mnet의 서바이벌 프로그램 SIXTEEN을 통해 멤버를 뽑았으며, 나연, 정연, 모모, 사나, 지효, 미나, 다현, 채영, 쯔위가 선발되어 지금의 트와이스 멤버로 활동하고 있다.
데뷔년도인 2015년부터 2016년에 걸쳐 엄청난 기록과 폭발적인 성장세를 보이며 대한민국 최고의 아이돌 그룹 중 하나로 자리매김하고 있다.
</div>
</br>
소속사:
<a href = "http://www.jype.com/common/ArtistMain.aspx?LDiv=">
JYP 엔터테인먼트
</a>
</br>
앨범
<ul>
<li class="albumlist">
<a class="album" href = "https://ko.wikipedia.org/wiki/THE_STORY_BEGINS">
THE STORY BEGINS
</a>
</li>
<li class="albumlist">
<a class="album" href = "https://ko.wikipedia.org/wiki/PAGE_TWO">
PAGE TWO
</a>
</li>
<li class="albumlist">
<a class="album" href = "https://ko.wikipedia.org/wiki/TWICEcoaster_:_LANE_2">
TWICEcoaster : LANE 1
</a>
</li>
</ul>
</div>
</body>
</html>