[CODECADEMY] 코드카데미 : display 속성 (inline, block, inline-block)

 

 

모든 HTML 요소에는 display다른 요소와 수평 공간을 공유 할 수 있는지 여부를 나타내는 기본값 이 있습니다.

 일부 요소는 내용의 크기에 관계없이 전체 브라우저를 왼쪽에서 오른쪽으로 채 웁니다. 

다른 요소는 내용에 필요한 만큼의 수평 공간 만 차지하며 다른 요소 바로 옆에 있을 수 있습니다.

 

이 과정에서 우리는 display 속성의 세 가지 값을 다룰수 있다.   : inline, block, inline-block.

 

---

1. display: inline;

 

 

- inline 값의 예 : <em>, <strong>,<a>

인라인 요소에는 내용을 단단히 감싸는 상자가 있으며 내용을 표시하는 데 필요한 공간 만 차지하며

각 요소 다음에 줄 바꿈이 필요하지 않습니다. 

 

- 요소의 높이와 너비는 CSS 문서에서 지정할 수 없습니다. 

예를 들어 앵커 태그 ( <a>) 의 텍스트는 기본적으로 주변 텍스트와 같은 줄에 표시되며

내용을 포함하는 데 필요한 만큼만 넓습니다. 

 

- CSS 속성으로 inline 요소의 height 와 width의 크기를 변경할 수 없습니다 .

 

To learn more about <em>inline</em> elements, read <a href="#">MDN documentation</a>.   

In the example above, the <em> element is inline, because it displays its content on the same line as the content surrounding it, including the anchor tag. This example will display:

 

위의 예에서 <em>요소는 inline입니다.

<a> 태그를 포함하여 요소를 둘러싸는 내용과 같은 줄에 내용을 표시하기 때문에입니다.

 

인라인 요소 에 대한 자세한 내용은 MDN 설명서를 참조하십시오 .

Inline elements

 

CSS display속성은 모든 요소를 ​​인라인 요소로 만드는 기능을 제공합니다. 

여기에는 단락, div 및 제목과 같이 기본적으로 인라인되지 않은 요소가 포함됩니다.

h1 {
  display: inline;
}

위 예제의 CSS는 모든 <h1>요소 의 표시를 inline로 변경합니다 . 

브라우저는 <h1>다른 인라인 요소와 동일한 요소를 직전 또는 직후에 렌더링 합니다 (있는 경우).

 

 

 

---

 

2. display: block;

 

일부 요소는 그 주위의 내용과 같은 줄에 표시되지 않습니다. 

이것을 블록 레벨 요소 라고 합니다. 

 

 

- block 값의 예 :  <h1>~ <h6>, <p>, <div>및 <footer>

 

- 기본적으로 페이지의 전체 너비를 채우지만, width속성을 설정할 수도 있습니다. 

달리 명시되지 않는 한, 내용물을 수용하는 데 필요한 높이입니다.

 

 

블록 레벨 요소의 전체 목록을 보려면 MDN 설명서를 방문하십시오 .

Block-level elements

 

 

strong {
  display: block;
}

위의 예에서, 모든 <strong>요소는 내용이 대부분의 컴퓨터 화면의 너비를 채우지 않더라도

양쪽에 직접 내용이없는 자체 행에 표시됩니다.

 

 

---

 

3. display: inline-block;

 

인라인 블록 디스플레이는 인라인 및 블록 요소의 기능을 결합합니다. 

인라인 블록 요소가 나란히 나타날 수 있으며 width및 height속성을 사용하여 치수를 지정할 수 있습니다. 

예를 들어, <div>아래 CSS에서 s는 동일한 선과 지정된 치수로 표시됩니다.

<div class="rectangle">
  <p>I’m a rectangle!</p>
</div>
<div class="rectangle">
  <p>So am I!</p>
</div>
<div class="rectangle">
  <p>Me three!</p>
</div>

.rectangle {
  display: inline-block;
  width: 200px;
  height: 300px;
}

   
위의 예에서 각각 텍스트 단락을 포함하는 3 개의 직사각형 div가 있습니다. 

.rectangle <div>들 모두 그들의 텍스트 내부 공간 (300 개) 픽셀 (200)의 화소를 필요로하지 않더라도, 

200 개 픽셀 폭 300 픽셀, 높이 (왼쪽에서 오른쪽으로 충분한 공간이 제공된다) 인라인 표시된다.

 

 

	inline	block	inline-block
배열 기준	가로 (줄 바꿈x)	세로 (줄 바꿈o)	가로
width 값	지정 불가	지정 가능	지정 가능
height 값	지정 불가	지정 가능	지정 가능