Compare commits
5 Commits
91c25a321f
...
eec1d76798
| Author | SHA1 | Date |
|---|---|---|
 Peace
|
eec1d76798 | 10 months ago |
|
Peace
|
ca4796d945 | 10 months ago |
|
Peace
|
e5389d20ef | 10 months ago |
|
Peace
|
5516d141d2 | 10 months ago |
|
Peace
|
4a2277c6b2 | 10 months ago |
@ -0,0 +1,49 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<meta name="viewport" content="width=device-width"/> |
||||
<style> |
||||
div { |
||||
border: 3px solid #73ad21; |
||||
max-width: 300px; |
||||
margin: auto; |
||||
height: 100px; |
||||
background-color: white; |
||||
} |
||||
.box1 { |
||||
position: static; |
||||
} |
||||
.box2 { |
||||
position: relative; |
||||
left: 30px; |
||||
top: -30px; |
||||
} |
||||
.box3 { |
||||
position: relative; |
||||
left: 60px; |
||||
top: -60px; |
||||
} |
||||
.box4 { |
||||
position: absolute; |
||||
left: 75px; |
||||
top: 75px; |
||||
} |
||||
.box5 { |
||||
position: fixed; |
||||
bottom: 10px; |
||||
right: 10px; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<he>Box position</he> |
||||
<hr> |
||||
<div class="box1">Box-1: static</div> |
||||
<div class="box2">Box-2: relative</div> |
||||
<div class="box3">Box-3: relative</div> |
||||
<hr> |
||||
<div class="box4">Box-4: absolute</div> |
||||
<div class="box5">Box-5: fixed</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,41 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<meta name="viewport" content="width=device-width"/> |
||||
<style> |
||||
p { |
||||
text-align: justify; |
||||
width: 90%; |
||||
padding: 20px; |
||||
} |
||||
|
||||
img { |
||||
float: left; |
||||
padding: 20px; |
||||
} |
||||
|
||||
.box { |
||||
border: 1px solid; |
||||
width: 100px; |
||||
height: 100px; |
||||
float: left; |
||||
margin: 5px; |
||||
} |
||||
|
||||
p.box { |
||||
clear: left; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<img src="https://images.unsplash.com/photo-1718795903419-2bc5bba08d2f?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8fA%3D%3D"> |
||||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro quae voluptate tempora molestiae, laboriosam ipsum veniam rerum quibusdam ullam. Et perspiciatis deleniti dolor praesentium tempora modi tenetur voluptate nobis accusamus soluta facilis |
||||
quae veritatis sunt repudiandae aliquid consequuntur officia assumenda voluptates, eaque quo excepturi. Officiis quidem quia placeat ad voluptatem.</p> |
||||
|
||||
<div class="box">box1</div> |
||||
<div class="box">box2</div> |
||||
<div class="box">box3</div> |
||||
<p class="box">box4</p> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,24 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<meta name="viewport" content="width=device-width"/> |
||||
<style> |
||||
h1 { |
||||
display: inline; |
||||
} |
||||
p { |
||||
display: inline-block; |
||||
} |
||||
a { |
||||
display: block; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<h1>h has block property. But go to inline.</h1> |
||||
<p>p has block property. But go to inline-block</p> |
||||
<a href="#">a has inline propery. But go to block.</a> |
||||
<span>span has inline property</span> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,56 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<meta name="viewport" content="width=device-width"/> |
||||
<style> |
||||
div, |
||||
span { |
||||
border: 2px solid lightgray; |
||||
margin: 3px 0; |
||||
padding: 5px; |
||||
} |
||||
|
||||
.none { |
||||
display: none; |
||||
} |
||||
|
||||
.block1 { |
||||
display: block; |
||||
} |
||||
|
||||
.block2 { |
||||
display: block; |
||||
width: 250px; |
||||
height: 50px; |
||||
} |
||||
|
||||
.inline { |
||||
/* inline의 width, height 무시됨 */ |
||||
display: inline; |
||||
width: 200px; |
||||
height: 50px; |
||||
} |
||||
|
||||
.inline-block { |
||||
display: inline-block; |
||||
width: 200px; |
||||
height: 50px; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<div> |
||||
<div class="block1">block1 box</div> |
||||
<div class="block2">block2 box</div> |
||||
<span class="inline">inline box</span> |
||||
<span class="inline-block">inline-block box</span> |
||||
</div> |
||||
<div class="none"> |
||||
<h2>Hello</h2> |
||||
</div> |
||||
<div> |
||||
<h2>World</h2> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue