CSS 레이아웃 개념 정리, display
exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
</head>
<style type="text/css">
span {
display:block;
background:orange;
}
h3 {
display:inline;
}
a {
display:none;
}
/* 첫번째 태그 ul li 태그를 지정한다.*/
#list1 li {
display:inline;
width:100px;
}
</style>
<body>
<!-- Ex16_display.htm -->
<!--
block : 블럭/ 인라인 요소를 블럭 요소처럼 출력
inline : 블럭/인라인 요소를 인라인 요소처럼 출력
none : 블럭/인라인 요소를 안보이게
display 속성은 라인이 남게 안보이게 보여주지 않고 라인까지 숨겨준다. 라인은 표시하면서 삭제해주는것도 있다.
-->
<p>안녕하세요. <span>홍길동</span>입니다.</p>
<div>안녕하세요. <h3>홍길동</h3>입니다.</div>
<a href="#">링크입니다.</a>
마지막입니다.
<hr />
<ul id="list1">
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
<ul>
<li>항목5</li>
<li>항목6</li>
<li>항목7</li>
<li>항목8</li>
</ul>
</body>
</html>
결과
