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

# 블록 요소 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