박스모델의 종류
- 블록 레벨 엘리먼트(block-level element)
- 한줄에 하나의 엘리먼트만 표시되는 종류의 엘리먼트 (예제1)
- 다른 인라인 엘리먼트 뿐 아니라 블록 레벨 엘리먼트도 컨텐츠로 포함할 수 있다.
- DIV, H1~H6, P, FORM, UL, LI, ADDRESS, BLOCKQUOTE, FIELDSET, TABLE, HR 등
- 인라인 엘리먼트(inline element)
- 한줄에 여러개의 엘리먼트가 표시되는 종류의 엘리먼트 (예제2)
- 인라인 엘리먼트만 포함 할 수 있고, 블록레벨 엘리먼트의 자식이어야 한다.
- a, img, em, strong등
- display 속성을 이용해서 블록레벨 엘리먼트를 인라인 엘리먼트로 바꿀 수 있고, 반대경우도 가능하다.
- display 속성의 값을 none으로 하면 엘리먼트를 화면에서 보이지 않게 할 수 있다.
예제
example1.html - li는 블록레벨엘리먼트이기 때문에 한줄에 하나의 엘리먼트만 표시된다. (jsfiddle, github)
<html>
<body>
<ul>
<li>생활코딩1</li>
<li>생활코딩2</li>
<li>생활코딩3</li>
</ul>
</body>
</html>
example2.html - a는 인라인엘리먼트이기 때문에 한줄에 여러개의 엘리먼트가 표시된다. (jsfiddle, github)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <a href="http://opentutorials.org">생활코딩1</a> <a href="http://opentutorials.org">생활코딩2</a> <a href="http://opentutorials.org">생활코딩3</a> </body> </html>
example3.html - 인라인 엘리먼트를 display 속성을 이용해서 블록레벨엘리먼트로 변경 (jsfiddle, github)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
a {
display: block
}
</style>
</head>
<body>
<a href="http://opentutorials.org">생활코딩1</a>
<a href="http://opentutorials.org">생활코딩2</a>
<a href="http://opentutorials.org">생활코딩3</a>
</body>
</html>
example4.html - display:none을 하면 엘리먼트를 화면에서 보이지 않게 할 수 있다. (jsfiddle, github)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <a href="http://opentutorials.org">생활코딩1</a> <a href="http://opentutorials.org" style="display:none">생활코딩2</a> <a href="http://opentutorials.org">생활코딩3</a> </body> </html>
