임호준 / WebPractice

Go to a project
Toggle navigation Toggle navigation pinning
임호준
8b74baed 1 parent 91bcad3f

web design practice

Inline Side-by-side
Showing 3 changed files with 222 additions and 0 deletions
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<style media="screen">
@media (max-width: 1800px) {
div.div1{
background-color: black;
}
}
@media (max-width: 768px) {
div.div1{
background-color: green;
}
}
@media (min-width:1801px) {
div.div1{
background-color: gray;
}
}
</style>
</head>
<body>
<div class="div1">
border:1px solid gray;
</div>
</body>
</html>
html{
color:#000;
background:#fff;
padding: 0.5em;
font-size: 14px;
}
h1.h1_1{
background-color: pink;
text-align: center;
color: white;
border-radius: 10px;
font-size: 50px;
font-family: serif;
}
ol{
list-style-type: none;
}
li.li_1{
/*float:left*/
display:inline-block;
text-align: center;
width: 300px;
background-color: gray;
margin-left: 10px;
padding: 20px;
}
li.li_1:hover{
background-color: black;
}
@media screen and (min-device-width: 768px) and (max-device-width:1026px){
img.img1{
width: 100%;
box-sizing: border-box;
vertical-align: top;
}
div.list1{
box-sizing: border-box;
vertical-align: top;
background-color: gray;
float:left;
width: 50%;
}
#description{
box-sizing: border-box;
vertical-align: top;
float:left;
width: 50%;
}
div.list2{
clear: both;
box-sizing: border-box;
vertical-align: top;
}
li.li_1{
box-sizing: border-box;
display: inline-block;
width: 100%;
height: 20px;
}
}
@media screen and (max-device-width:768px) {
img.img1{
box-sizing: border-box;
width: 100%;
vertical-align: top;
}
div.list1{
box-sizing: border-box;
float:left;
vertical-align: top;
width: 100%;
background-color: green;
}
#description{
box-sizing: border-box;
float:left;
width: 100%;
vertical-align: top;
}
div.list2{
box-sizing: border-box;
margin-left: 0px;
vertical-align: top;
width: 100%;
}
li.li_1{
box-sizing: border-box;
margin-left: 0px;
vertical-align: top;
width: 100%;
}
}
@media screen and (min-device-width: 1026px){
img.img1{
width: 50%;
display: inline-block;
float:left;
box-sizing: border-box;
}
div.list1{
box-sizing: border-box;
margin-left: 30px;
width:30%;
height: 150%;
float:left;
background-color: blue;
display: inline-block;
}
#description{
margin-left: 30px;
width:30%;
float:left;
display: inline-block;
box-sizing: border-box;
}
div.list2{
margin-left: 30px;
width:40%;
float:left;
display: inline-block;
box-sizing: border-box;
}
}
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="css/ex08.css" type="text/css">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<title>1</title>
</head>
<body>
<h1 class="h1_1">트와이스</h1>
<p>
<img src="twice.png" class="img1">
<div class="list1">
<ul>
<li>구성원</li>
<ul>
<li> 지효 </li>
<li> 나연 </li>
<li> 정연 </li>
<li> 모모 </li>
<li> 사나 </li>
<li> 미나 </li>
<li> 다현 </li>
<li> 채영 </li>
<li> 쯔위 </li>
</ul>
</ul>
</div>
<div id="description">
<ul>
<li>설명</li>
트와이스는 대한민국의 9인조 걸 그룹으로, JYP 엔터테인먼트 소속이다.2015년 5월 5일부터 두 달동안 진행된 서바이벌 프로그램 Mnet 《SIXTEEN》을 통해9명의 최종 멤버들이 선발되었으며, 2015년 10월 19일 타이틀곡 "OOH-AHH하게" 뮤직비디오와 음원을 공개하고,20일 첫 번째 EP 앨범 《THE STORY BEGINS》 발매와 동시에 데뷔 쇼케이스로 데뷔하였다.
</ul>
</div>
<div class="list2">
<ul>
<li>소속사 <a href="http://www.jype.com/" target="_blank"> jyp 엔터테이먼트 </a> </li>
<li>앨범</li>
<ol> <br>
<li class="li_1"> <a href=""> THE STORY BEGINS </a></li>
<li class="li_1"><a href="http://www.jype.com/ "> PAGE TWO </a></li>
<li class="li_1"><a href="http://www.jype.com/ "> TWICEcoaster:LANE 1</a></li>
</ol>
</ul>
</div>
</p>
</body>
</html>