초보개발자의 성장블로그
CSS 28 display inline 방식과 block 방식
프론트엔드/CSS2021. 4. 3. 22:37
inline방식
<span>, <a>, <img>, <input>, <select>, <textarea> 등
block방식
<div>, <h1>~<h6>, <p>, <ul>, <ol>, <li>, <form>, <dl>, <dt>, <dd> 등
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display속성</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
}
#menu{
width:500px;
padding:10px;
margin:20px 0 0 40px;
background-color: #eeeeee;
border:solid 1px #aaaaaa;
text-align:center;
}
#menu li{
display:inline;
}
</style>
</head>
<body>
<ul id="menu">
<li>초보개발자의 성장블로그 | </li>
<li>자바 | </li>
<li>HTML | </li>
<li>CSS | </li>
<li>JavaScript | </li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display:inline-block 속성</title>
<style>
.green_box{
display:inline-block;
width:150px;
height: 75px;
margin:10px;
border:solid 3px #73ad21;
}
</style>
</head>
<body>
<h2>인라인 + 블록 특성(display:inline-block)</h2>
<div class="green_box">박스 1</div>
<div class="green_box">박스 2</div>
<div class="green_box">박스 3</div>
<div class="green_box">박스 4</div>
<div class="green_box">박스 5</div>
<div class="green_box">박스 6</div>
</body>
</html>'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 30 float 속성으로 웹페이지 구성해보기 (0) | 2021.04.04 |
|---|---|
| CSS 29 float 속성, clear 속성, overflow 속성 (0) | 2021.04.03 |
| CSS 27 box의 shadow (그림자) (0) | 2021.04.03 |
| CSS 26 box의 margin과 padding (0) | 2021.04.03 |
| CSS 25 box의 border (경계선) (1) | 2021.04.03 |
댓글()