박스모델은 블록 레벨 요소인지 인라인레벨 요소인지 따라 나열 방법이 달라집니다.
- 블록 레벨(block-level) : 요소를 삽입했을 때, 혼자 한 줄을 차지하는 요소, 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정할려면 블록레벨 요소여야 한다.
<p>, <h1> ~ <h6>, <div> <form> <table> ....- 인라인 레벨(inline-level): 화면에 표시되는 콘텐츠 영역만 차지한다, 블록레벨와 돨리 혼자 한 줄을 차지 하지 않는다.
<img>, <span>, <input>, <br>, <label>, <button> ....display 속성 - 화면 배치방법
display:none, contents, block, inline, inline-block, table, table-cell-
display: block으로 지정하면 해당 요소를 블록레벨로 지정
-
display: inline으로 지정하면 애당 요소를 인라인레벨로 지정
-
display: inline-block 지정하는 이유는 inline으로 지정하면 한 줄로 배치 할수 있지만 너비나 높이, 마진 같은 박스모델값이 적용되지 않습니다. 요소를 인라인 레벨로 배치하면서 내용에는 블록레벨 속성을 지정하고 싶다면 inline-block을 사용하면 됨.
<html>
<title>
</title>
<style>
nav ul li {
display: inline;
<!-- 이곳을 inline, inline-block 바꿔가면서 형태를 확인해보자 -->
margin: 20px;
}
</style>
<body>
<nav>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</nav>
<nav>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</nav>
</body>
</html>
unit test, tdd, bdd, laravel, django, android native, vuejs, react, embedded linux, typescript