박스모델의 종류
- 블록 레벨 엘리먼트(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)
1 2 3 4 5 6 7 8 9 | <html> <body> <ul> <li>생활코딩1</li> <li>생활코딩2</li> <li>생활코딩3</li> </ul> </body></html> |
example2.html - a는 인라인엘리먼트이기 때문에 한줄에 여러개의 엘리먼트가 표시된다. (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> </body></html> |
example3.html - 인라인 엘리먼트를 display 속성을 이용해서 블록레벨엘리먼트로 변경 (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <style> a { display: block } </style> </head> <body> </body></html> |
example4.html - display:none을 하면 엘리먼트를 화면에서 보이지 않게 할 수 있다. (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> </body></html> |
