Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

제뉴어리의 모든것

[CSS] display - block과 inline 그리고 inline-block 본문

css

[CSS] display - block과 inline 그리고 inline-block

제뉴어리맨 2022. 6. 4. 12:45

 

 

안녕하세요. 

오늘은 display porperty에 대해서 알아 보겠습니다. 그 중에서 inline과 block 그리고 inline-block에 대해서 알아보겠습니다.

 

먼저 display property에서 간단히 설명하면 display는 화면이 렌더링 되었을때 어떠한 특정 영역이 표시 되는데 성질을 부여하는 property입니다. 그 중 가장 많이 사용 되는 inline과 block 성질(display property의 값)입니다.

 

우선, html의 태그들은 크게 block 요소와 inline 요소로 나눌 수 있다.

 

  • block 요소
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>

 

block 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.

  • inline 요소

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>

 

inline 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.

 

이 외 태그들이 어떠한 성질의 요소인지 확인 하고 싶으시다면 쉬운 방법이 한 가지 있습니다.

 

태그들의 display 기본값 확인하기

 

각 브라우저의 개발자 도구를 이용하시면 확인 할 수 있는데 저는 크롬을 통해 알아보겠습니다.

 

 
<html>
<head>
<style>
#box-container > div,
#box-container > span{
border: 2px solid #09c;
margin: 3px 0;
padding: 5px;
}
.none{ display: none }
.block1{ display: block }
.block2{ display: block; width: 300px; height: 60px; }
.inline{ display: inline; width: 200px; height: 60px; }
.inline-block{ display: inline-block; width: 200px; height: 60px; }
.default-inline, .default-block{ width: 200px; height: 60px; }
</style>
</head>
<body>
<div id="box-container">
<div class="none">none</div>
<div class="block1">block1</div>
<div class="block2">block2</div>
<span class="inline">inline</span>
<span class="inline-block">inline-block</span>
<span>detualt inline-block</span>
<div>block3</div>
</div>
</body>
</html>

 

 

우선 이러한 예제를 작성해 보았습니다. 아래 참고자료에서 필요한 코드를 좀 더 추가 하여 작성하였습니다.

 

예제 아래쪽 block3 이라고 적혀 있는 div 박스와 default inline-block 이라고 적혀 있는 span 태그를 주목 해주세요.

display를 따로 명시하여 주지 않은 이 두 요소를 검사 해보겠습니다.

 

 

 

 

 

이렇게 크롬 개발자 도구에서 Style매뉴와 Computed메뉴를 통해 tag들이 가지고 있는 스타일을 확인 할 수 있는데 위에 사진은 <span> 태그에 대한 스타일인데 display가 inline으로 설정되어 있음을 볼 수 있고  user agent stylesheet를 보시면 <div>의 display가 block으로 명시 되어 있음을 볼 수 있습니다.

 

그럼, user agent stylesheet에 명시 된 것은 뭐고 Computed 메뉴에 명시 된 것은 무엇 인지궁금 하실텐데 user agent stylesheet는 각 브라우저에서 지정한 스타일을 의미 하며 Computed 메뉴에 지정된 스타일은 그 태그가 가지고 있는 고유 스타일을 의미합니다. 

 

그럼 본격적으로 이 두 성질의 차이를 알아보죠.

 

 

 

block vs inline

 

 

 

block

 

block은 한 영역을 차지 하는 박스형태을 가지는 성질입니다. 그렇기 때문에 기본적으로 block은 width값이 100%가 됩니다. 그리고 라인이 새로 추가된다는 것을 알 수 있습니다. 

 

  • block은 height와 width 값을 지정 할 수 있다.
  • block은 margin과 padding을 지정 할 수 있다.

 

inline

 

inline은 주로 텍스트를 주입 할 때 사용 되는 형태입니다. 그렇기 때문에 기본적으로 block처럼 width값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않습니다. 높이 또한 폰트의 크기만큼 잡힙니다.(line-height로 설정이 가능 하긴 합니다.)

 

  • width와 height를 명시 할 수 없다.
  • margin은 위아래엔 적용 되지 않는다.
  • padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.

block3 위에 <span> 영역을 보시면 겹쳐있는 것을 볼 수 있습니다. 위 이미지를 보시면서 위에 적어 놓은 특징들을 보시면 이해하는데 더 도움이 되실 겁니다.

 

 

inline-block

 

inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다. inline-block의 특징은 다음과 같습니다.

 

  • 줄바꿈이 이루어지지 않는다.
  • block처럼 width와 height를 지정 할 수 있다.
  • 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.
 
이상 포스팅을 마치겠습니다.
 
 

[CSS] display - block과 inline 그리고 inline-block (tistory.com)

'css' 카테고리의 다른 글

[HTML&CSS] 블록 레벨, 인라인 레벨 요소 (Block Level Element, Inline Level Element)  (0) 2022.06.05
div 영역 안에 div를 가로로 나열하여 배치하고 가운데 정렬하기  (0) 2022.06.04
특정위치 자식 요소 선택하기 first-child  (0) 2022.06.04
perspective 주의점.  (0) 2022.05.14
여러가지 연산자 (>), (추후 업데이트)  (0) 2022.05.14
'css' Related Articles more