Programming/Front-end(js, React, HTML, CSS)

[HTML/CSS] display 속성 - inline, block, flex

Sujin Lee (Daisy) 2020. 2. 28. 01:00

# 블록 요소 vs 인라인 요소  

<블록요소>

- 포함 : 모든 인라인 요소 포함 가능, 다른 블록 요소도 일부 포함 가능

- 넓이 : ★가로폭 전체★의 넓이를 가지는 직사각형 형태. ★한 줄 다 차지★ 

- 레이아웃 : width, height, margin, padding 등을 사용해서 크기나 위치 지정 가능

                width/height/margin/padding 등 사용해서 크기나 위치를 지정하려면 블록 요소여야 한다. 

- 줄바꿈 : (O). 블록요소 다음에는 줄바꿈됨

- inline으로 변경하는 방법 : CSS에서 display : inline;

- 블록요소 종류 : <div>, <table>, <ul>, <li>, <form>, <p> 등 

(1) 영역 잡는 애들  (2) 테이블, 리스트  (3) 데이터 입력 (4) 기타
<div>
<main>
<section>
<article>
<nav>
<header>
<aside>
<footer>
<canvas>

<table>

<ol>

<ul>

<li>

<dl> : description list

<dt> : description title

<dd> : description data

<form>

<fieldset> 

<p>

<pre>

<video>

<figure> 

<figcaption>

<address>

<blockquote>

<hr>

<noscript>

<tfoot>

※ <fieldset>: <form> 하위 태그. <input>이나 <label>보다는 상위 태그이다. 

<figure> : 이미지 마크업할 때 img 상위레벨에 사용. 

※ <figcaption> : <figure>안에 img와 figcaption이 함께 들어감. img에 대한 설명. 

 

<인라인 요소>

- 포함 : 항상 블록 요소 안에 포함되어 있음.

           ex) <form>/<filedset> : 블록 요소. 그 하위의 <input>, <label>, ...은 인라인 요소.

           ex) <figure>: 블록 요소. 그 하위의 <img>는 인라인 요소. 

           ex) <pre>: 블록 요소. 그 하위의 <code>는 인라인 요소.

          인라인 요소 안에 다른 인라인 요소 포함 가능

- 넓이 : ★컨텐츠가 끝나는 지점까지가 넓이★

- 레이아웃width, height, margin, padding등을 사용해서 크기나 위치 지정 불가

                (width/height 지정해도 적용되지X, margin/padding은 좌우만 적용되고 상하는 적용X) 

                text-align으로 텍스트 좌/우/중앙 정렬 가능

- 줄바꿈 : 인라인 요소 다음 컨텐츠는 인라인 요소의 오른쪽에 붙어서 나옴 (줄바꿈 없음)

- block으로 변경하는 방법 : CSS에서 display: block; 

- 인라인 요소 종류 : 

(1) 텍스트 스타일/링크 관련 태그들 (2) form 하위 태그들 (3) 기타

<a>

<b>

<i> : 기울이기. italic.

<em>

<span>

<strong>

<br>

<sub>

<sup>

<input>

<output>

<label>

<textarea>

<select>

<button>

<img>

<cite>

<code>

<map>

<object>

<script>

 

<display 속성 - 화면 배치 방법 결정>

display 속성 특징
display: block;

해당 요소를 block 요소로 만든다.

ex) 원래는 inline요소인 <img>를 block 요소로 변경

display: inline; 

해당 요소를 inline 요소로 만든다.

주의) 한 줄로 배치할 수는 있지만 width/height/margin/float 등이 정확하게 적용되지X

    inline으로 만들면서도 이런것 포기하기 싫다면 inline-block으로 만들어야. 

ex) 원래는 block 요소인 <li>를 inline 요소로 변경 ==> GNB 만들 때 많이 사용

display: inline-block;

inline 요소처럼 줄바꿈 없이 한 줄에 배치됨.
 + inline 요소에서 불가능하던 width/height 지정 및 margin/padding 상하 지정 가능. 

display: inherit;

상위 요소의 display 속성을 상속 받음

display: table; 

table(디폴트: block)로 만든다.

display: inline-table;

inline 레벨의 표로 만든다.

display: table-cell;

표에서 하나의 cell로 만든다. (<td>나 <th> 태그 사용한 것처럼.) 

 

 

<Flex box>

 - 개구리 옮기기: https://flexboxfroggy.com/#ko

 - 포탑 배치하기: http://www.flexboxdefense.com/

 

 

 


아래 컨텐츠는 다른 글로 발행하자. 

 

# 컨텐츠가 실제 화면에 차지하는 가로(세로) 크기

     = width(height) + margin + border + padding

 - margin이 바깥여백, padding이 안 여백!! 

 

 

 

# 마진 병합(margin collapsing)

 - 위에 위치한 컨텐츠의 margin-bottom: a px;과 아래에 위치한 컨텐츠의 margin-top: b px;이 있을 때, 

   두 컨텐츠 사이의 margin은 a+b가 아니라, a>b라면 a , b>a라면 b이다. 

 - 즉, 세로로 margin이 겹칠 경우, 두 margin을 합쳐서, 더 큰 margin 값만 남기고 작은 margin은 없앤다. 

 

 

 

# 참고자료 

1. form 요소 설명:

 http://webberstudy.com/html-css/html-3/form-1/

2. MDN - Block and inline layout in normal flow

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow

3. W3School - CSS Layout - inline-block 

https://www.w3schools.com/css/css_inline-block.asp

4. MDN - display 속성 

https://developer.mozilla.org/en-US/docs/Web/CSS/display

반응형