1. inline
- height와 width 속성 설정 (X)
- span, a, img, em, strong, i, small
2. inline-block
- height와 width 속성 설정 (O)
3. block
- height와 width 속성 설정 (O)
- 행(line) 전체(full width) 점유
- the entire width of its parent element
※ element(요소)의 block-level과 inline-level 속성은 CSS의 "display" 값의 지정으로 변경이 가능합니다.
※ inline-level element에 margin, padding, border 설정은 가능하지만 주변 요소와 설정에 따라서 지정한 효과가 나타나지 않을 수 있습니다. CSS에 inline-block-level element로 속성을 변경하여 사용하는 것이 안전합니다.
[참고] W3C Recommendation, Visual formatting model
p { display: inline-block; }
위의 코드는 block-level 요소 <p>를 CSS에서 inline-block으로 변경하여 지정한 하나의 예문입니다. display 값을 inline-block으로 지정하여 속성을 바꾼 것입니다. 모질라 개발자 문서를 검색해 보니까, 이와 같이 해당 요소의 웹브라우저 렌더링 모델 변경은 가능하지만 그 요소의 기본적인 content category와 content model은 바뀌지 않음을 주의해야 한다는 설명이 있습니다. 예를 들어 inline 요소인 <span>의 display 값을 block으로 변경하여도 block 요소 <div>를 child로 수용하지 못한다는 의미입니다.
StackOverflow의 관련 질문: Why doesn't my div inside a span work properly?
[참고]
| Changing element levels You can change the visual presentation of an element using the CSS display property. For example, by changing the value of display from "inline" to "block", you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa. However, doing this will not change the category and the content model of the element. For example, even if the display of the span element is changed to "block", it still would not allow to nest a div element inside it. [참고] Inline elements - HTML: HyperText Markup Language | MDN (mozilla.org) |
[참고] w3schools, "HTML Block and Inline Elements"
block-level elements
in alphabetical order :
※ The word “order” is usually treated as an uncountable (mass) noun. To say "an alphabetical order" is unnatural in this case.
| <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video> |
※ <aside>가 가로 폭을 모두 점유하지 않고 width, 100% 설정을 필요로 하여 빙 IA에 문의하였더니 아래와 같은 답변을 받았습니다.
"The width of an aside element(<aside>) is set by default to auto. If you want to make it 100% of the parent container, you can use CSS to set the width property of the aside element to 100%."
aside { width: 100%; }
inline-level elements
| <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> |
<bdo>
- bi-directional override
- 요소 내부 문자의 진행 방향(text direction)
- ltr, rtl
| <bdo dir="rtl">This text goes right-to-left.</bdo> |
<dfn>
- definition element
- 정의를 진행할 요소
| <dfn>HTML</dfn> is a computer language that is used to create documents or Web sites on the Internet. |
댓글