[HTML&CSS] 블록 레벨, 인라인 레벨 요소 (Block Level Element, Inline Level Element)

*현 포스팅의 HTML 코드의 실행환경을 만들고 싶으신 분들은 아래 포스팅을 참고하시면 좋을 것 같습니다.


[Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기



| 블록 레벨 요소 및 인라인 레벨 요소(Block Level Element)


블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 이 한 줄을 차지한다는 의미는 너비가 100%라는 것을 뜻합니다. 따라서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 줄넘김이 됩니다.


블록 레벨은 다음과 같은 특징이 있습니다. 


  • margin, width, height 속성을 정의하면 모두 적용됩니다. 이런 특성 때문에 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 사용할 수 있습니다.


| 인라인 레벨 요소(Inline Level Element)


인라인 레벨(inline-level) : 줄을 차지하지 않는 요소입니다. 브라우저같은 화면에 표시되는 컨텐츠만큼 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있습니다. 따라서 한 줄에 여러 개의 인라인 레벨 요소를 표시하는 것이 가능합니다.


인라인 레벨은 다음과 같은 특징이 있습니다.


  • 상, 하단 외부 여백(margin-top, margin-bottom) 속성을 정의해도 적용되지 않습니다. 상, 하 여백은 margin이 아니라 line-height 속성에 의해 발생됩니다.
  • 너비(width)와 높이(height) 속성이 적용되지 않습니다. 인라인 요소의 너비 및 높이는 태그가 품고 있는 내부 요소 부피에 맞춰집니다.
  • 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우 최소한의 간격을 유지하기 위해 좌, 우에 약 5px 가량의 외부 여백이 자동으로 발생합니다.


다음은 블록 레벨, 인라인 레벨인 태그들의 목록입니다.

블록 레벨 

 <p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>

인라인 레벨

 <a>, <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button> 


| 블록, 인라인 요소 예제 (Block, Inline Element Example)


다음은 블록과 인라인 요소가 조합되어있는 예제입니다. 아래 HTML 코드를 실행하면 다음과 같은 그림이 브라우져 상에서 실행되게 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>블록, 인라인</title>
<style>
.inline-div {
display: inline;
margin: 20px; /* 인라인 블록은 margin으로 여백을 정의할 수 없습니다 */
padding: 20px; /* padding은 가능 합니다*/
width: 400px; /* width, height 모두 영향을 미치지 못합니다 */
height: 200px;
border-style: solid;
border-width: 2px;
background-color: red;
}

.
block-div {
display: block;
margin: 20px; /* 블록 요소는 margin, width, height 모두 영향을 받습니다*/
padding: 20px;
width: 400px;
height: 100px;
border-style: solid;
border-width: 2px;
}
</style>
</head>
<body>
<div class="block-div">
블록1
</div>
<div class="inline-div">
인라인1
</div>
<div class="inline-div">
인라인2
</div>
<div class="inline-div">
인라인3
</div>
<div class="block-div">
블록2
</div>
<div class="block-div">
블록3
</div>
<div class="block-div">
블록4
</div>
</body>
</html>

  • 블록 레벨이 된 div 태그들은 위에서 아래로 전체 너비를 차지하며 그려지는 것을 볼 수 있습니다.
  • 인라인 태그는 한 줄에 나란히 배치됩니다 
  • 여기서 주목해야할 점은 블록 요소는 margin, width, height 모두 영향을 받는 다는 것 그리고 인라인은 이 요소들 모두 영향을 미치지 않는다는 것을 알 수 있습니다.


| 인라인과 블록의 합성 속성 inline-block (Inline Block Attribute)


inline-block이라는 속성은 인라인과 같인 한 줄에 표현하면서도 margin, width, height 속성을 정의하면 표현해 줍니다. 이 속성을 기본적으로 가지고 있는 태그가 없기 때문에 따로 inline-block이라 선언을 해야합니다. 


인라인과 다르게 inline-block은 다음과 같은 속성이 있습니다.


상, 하단 외부 여백 속성(margin-top, margin-bottom)을 정의할 수 있습니다. inline-block 요소의 상, 하 여백을 margin, line-height 두 가지 속성 모두를 통해 설정할 수 있습니다.

너비(width)와 높이(height) 속성이 적용됩니다. 

인라인과 같이 최소한의 간격을 유지하기 위해 5px 가량의 외부 여백이 자동으로 발생하지만 margin-left, margin-right를 사용하여 추가로 여백을 지정할 수 있습니다.


| 인라인 블록 예제 (Inline Block Example)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>블록, 인라인</title>
<style>
.inline-div {
display: inline-block;
margin: 20px; /* inline-block margin으로 여백을 정의 가능 */
padding: 20px;
width: 400px; /* width, height 모두 정의 가능 */
height: 200px;
border-style: solid;
border-width: 2px;
background-color: red;
}

.block-div {
display: block;
margin: 20px; /* 블록 요소는 margin, width, height 모두 영향을 받습니다*/
padding: 20px;
width: 400px;
height: 100px;
border-style: solid;
border-width: 2px;
}
</style>
</head>
<body>
<div class="block-div">
블록1
</div>
<div class="inline-div">
인라인1
</div>
<div class="inline-div">
인라인2
</div>
<div class="inline-div">
인라인3
</div>
<div class="block-div">
블록2
</div>
<div class="block-div">
블록3
</div>
<div class="block-div">
블록4
</div>
</body>
</html>


  • inline-block은 너비(width)가 찾을 시 블럭 속성처럼 요소가 아래로 줄바꿈이 되는 것을 볼 수 있습니다. 
  • 또한 margin, width, height 속성 모두 영향을 받는다는 것을 알 수 있습니다. 
  • 참고로 브라우저의 너비를 좁혀 inline-block이 모두 한 줄에 들어가기 충분하지 않을 경우 위 inline-block이 아래로 내려오는 것을 볼 수 있습니다. 





| 참고자료 (References)


http://www.beautifulcss.com/archives/1179

http://www.yes24.com/Product/Goods/34890410?scode=032&OzSrank=2

http://blog.naver.com/PostView.nhn?blogId=gumpofmay&logNo=80208082273&categoryNo=24&parentCategoryNo=0&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView





이 글을 공유하기

댓글(1)

  • 행음
    2021.07.29 16:50

    좋은 컨텐츠 잘보고 갑니다~
    좋은 컨텐츠에 보상은 해드릴것은 없고, 배너만 글마다 있는거 클릭함으로 감사함 전합니다.

Designed by JB FACTORY