HTML, CSS
css기초이론 - 레이아웃 스타일(block/inline element)
일등하이
2021. 1. 14. 22:40
반응형
www.w3schools.com/html/html_blocks.asp
HTML Block and Inline Elements
HTML Block and Inline Elements Every HTML element has a default display value, depending on what type of element it is. There are two display values: block and inline. Block-level Elements A block-level element always starts on a new line and takes up the
www.w3schools.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
a,
b {
border: 1px solid crimson;
width: 50%;
height: 50%;
font-weight: normal;
font-size: 1em;
}
img {
width: 30%;
height: 30%;
margin: 10px;
}
</style>
</head>
<body>
<a href="">Lorem, ipsum dolor.</a>
<b
>피고 더운지라 사라지지 있는 생명을 못하다 열매를 따뜻한 철환하였는가?
보내는 장식하는 우리 인생에 시들어 용기가 넣는 있으며, 얼마나 부패뿐이다.
생명을 우리 이상 가슴이 인생에 청춘의 피에 있는 그들의 끓는다. 그러므로
</b>
<img src="./images/iu.jpg" />
<img src="./images/ui_2.png" />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
width: 30%;
display: inline-block;
}
</style>
</head>
<body>
<img src="./images/iu_1.jpg" />
<img src="./images/iu_2.png" />
<img src="./images/iu_3.jpg" />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div.box1 {
width: 100px;
height: 100px;
border: 1px solid crimson;
display: inline-block;
}
div.box2 {
width: 100px;
height: 100px;
border: 1px solid crimson;
display: inline;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<br />
<br />
<br />
<br />
<br />
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
</body>
</html>
참고
www.youtube.com/watch?v=vEKv0PBLRMA&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99&index=15
반응형