display 속성
: 웹 페이지 상에서 요소들이 어떻게 보여지고 다른 요소와 어떻게 상호 배치되는지를 결정하는 속성임
inline
: display 속성이 inline으로 지정된 요소는 전후 줄바꿈이 없이 한 줄에 다른 요소들과 나란히 배치가 됨
block
: display 속성이 block으로 지정된 요소는 전후 줄바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지함
inline-block
: display 속성이 inline-block으로 지정된 요소는 기본적으로 inline, 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치가 됨
하지만, inline 요소에서 불가능하던 width와 height 속성 및 margin, padding 속성의 간격 지정이 가능해짐
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul {
width: 100%;
height: 50px;
background-color: #069;
list-style-type: none; /* 글자 앞의 '●'(점)을 제거하는 속성 */
}
ul li a {
color: #FFF;
text-decoration: none; /* a링크 태그의 밑줄을 제거하는 속성 */
}
ul li {
display: inline-block;
margin: 10px 70px; /* 상하 : 10px, 좌우 : 70px */
padding: 5px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">사업영역</a></li>
<li><a href="#">제품문의</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</body>
</html>=============================실행=============================
display: block; 예시
=============================코드=============================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.block img {
display: block;
}
</style>
</head>
<body>
<div>
<img src="images/car1.gif" width="250">
<img src="images/car2.gif" width="250">
<img src="images/car3.gif" width="250">
</div>
<div class="block">
<img src="images/car1.gif" >
<img src="images/car2.gif" >
<img src="images/car3.gif" >
</div>
</body>
</html>=============================실행=============================
