임호준 / 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
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta charset="utf-8">
5 + <title>1</title>
6 + <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
7 + <style media="screen">
8 +
9 +
10 +
11 + @media (max-width: 1800px) {
12 + div.div1{
13 + background-color: black;
14 + }
15 + }
16 + @media (max-width: 768px) {
17 + div.div1{
18 + background-color: green;
19 + }
20 + }
21 + @media (min-width:1801px) {
22 + div.div1{
23 + background-color: gray;
24 + }
25 + }
26 + </style>
27 + </head>
28 + <body>
29 + <div class="div1">
30 + border:1px solid gray;
31 + </div>
32 +
33 + </body>
34 +</html>
1 +html{
2 +color:#000;
3 +background:#fff;
4 +padding: 0.5em;
5 +font-size: 14px;
6 +}
7 +h1.h1_1{
8 + background-color: pink;
9 + text-align: center;
10 + color: white;
11 + border-radius: 10px;
12 + font-size: 50px;
13 + font-family: serif;
14 +}
15 +
16 +ol{
17 + list-style-type: none;
18 +}
19 +li.li_1{
20 +/*float:left*/
21 + display:inline-block;
22 + text-align: center;
23 + width: 300px;
24 + background-color: gray;
25 + margin-left: 10px;
26 + padding: 20px;
27 +
28 +}
29 +
30 +
31 +li.li_1:hover{
32 + background-color: black;
33 +}
34 +
35 +@media screen and (min-device-width: 768px) and (max-device-width:1026px){
36 + img.img1{
37 + width: 100%;
38 + box-sizing: border-box;
39 + vertical-align: top;
40 + }
41 + div.list1{
42 + box-sizing: border-box;
43 + vertical-align: top;
44 + background-color: gray;
45 + float:left;
46 + width: 50%;
47 +
48 + }
49 + #description{
50 + box-sizing: border-box;
51 + vertical-align: top;
52 + float:left;
53 + width: 50%;
54 + }
55 + div.list2{
56 + clear: both;
57 + box-sizing: border-box;
58 + vertical-align: top;
59 + }
60 + li.li_1{
61 + box-sizing: border-box;
62 + display: inline-block;
63 + width: 100%;
64 + height: 20px;
65 + }
66 +
67 +}
68 +@media screen and (max-device-width:768px) {
69 +
70 + img.img1{
71 + box-sizing: border-box;
72 + width: 100%;
73 + vertical-align: top;
74 + }
75 + div.list1{
76 + box-sizing: border-box;
77 + float:left;
78 + vertical-align: top;
79 + width: 100%;
80 +background-color: green;
81 + }
82 + #description{
83 + box-sizing: border-box;
84 + float:left;
85 + width: 100%;
86 + vertical-align: top;
87 +}
88 + div.list2{
89 + box-sizing: border-box;
90 + margin-left: 0px;
91 + vertical-align: top;
92 + width: 100%;
93 + }
94 + li.li_1{
95 + box-sizing: border-box;
96 + margin-left: 0px;
97 + vertical-align: top;
98 + width: 100%;
99 + }
100 +}
101 +
102 +@media screen and (min-device-width: 1026px){
103 + img.img1{
104 + width: 50%;
105 + display: inline-block;
106 + float:left;
107 + box-sizing: border-box;
108 +
109 + }
110 + div.list1{
111 + box-sizing: border-box;
112 + margin-left: 30px;
113 + width:30%;
114 + height: 150%;
115 + float:left;
116 + background-color: blue;
117 + display: inline-block;
118 + }
119 + #description{
120 + margin-left: 30px;
121 + width:30%;
122 + float:left;
123 + display: inline-block;
124 + box-sizing: border-box;
125 + }
126 + div.list2{
127 + margin-left: 30px;
128 + width:40%;
129 + float:left;
130 + display: inline-block;
131 + box-sizing: border-box;
132 + }
133 +
134 +}
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +
4 +<head>
5 + <link rel="stylesheet" href="css/ex08.css" type="text/css">
6 + <meta charset="utf-8">
7 + <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
8 + <title>1</title>
9 +
10 +</head>
11 +
12 +<body>
13 + <h1 class="h1_1">트와이스</h1>
14 + <p>
15 + <img src="twice.png" class="img1">
16 + <div class="list1">
17 +
18 + <ul>
19 + <li>구성원</li>
20 + <ul>
21 + <li> 지효 </li>
22 + <li> 나연 </li>
23 + <li> 정연 </li>
24 + <li> 모모 </li>
25 + <li> 사나 </li>
26 + <li> 미나 </li>
27 + <li> 다현 </li>
28 + <li> 채영 </li>
29 + <li> 쯔위 </li>
30 + </ul>
31 + </ul>
32 + </div>
33 + <div id="description">
34 + <ul>
35 + <li>설명</li>
36 + 트와이스는 대한민국의 9인조 걸 그룹으로, JYP 엔터테인먼트 소속이다.2015년 5월 5일부터 두 달동안 진행된 서바이벌 프로그램 Mnet 《SIXTEEN》을 통해9명의 최종 멤버들이 선발되었으며, 2015년 10월 19일 타이틀곡 "OOH-AHH하게" 뮤직비디오와 음원을 공개하고,20일 첫 번째 EP 앨범 《THE STORY BEGINS》 발매와 동시에 데뷔 쇼케이스로 데뷔하였다.
37 + </ul>
38 + </div>
39 + <div class="list2">
40 + <ul>
41 + <li>소속사 <a href="http://www.jype.com/" target="_blank"> jyp 엔터테이먼트 </a> </li>
42 + <li>앨범</li>
43 + <ol> <br>
44 + <li class="li_1"> <a href=""> THE STORY BEGINS </a></li>
45 + <li class="li_1"><a href="http://www.jype.com/ "> PAGE TWO </a></li>
46 + <li class="li_1"><a href="http://www.jype.com/ "> TWICEcoaster:LANE 1</a></li>
47 + </ol>
48 + </ul>
49 + </div>
50 + </p>
51 +
52 +</body>
53 +
54 +</html>