[CSS] 3. 레이아웃 스타일 - 인라인, 블록, 인라인블록

인라인(inline)	인라인블록(inline-block)	블록(block)
크기값을 지정못함	크기값을 지정할 수 있음
한줄에 여러개 배치		한줄에 한개만 배치
좌우 마진만 가능	상하좌우마진 모두 가짐
기본 너비값은 컨텐츠의 너비값		기본 너비값은 부모 요소의 100%

 

■ block 요소
- div, ul, ol, li, h, hr, form, dl, dt, dd, p, table, body, main, header, article, footer, section, nav, details, summury, center, aside, h1 ~ h6

- 레이아웃( 제목, 문단, 표 )과 관련된 요소

 

■ inline 요소
- span, a, big, small, em, b, br, audio, video, s, u, mark, q, strong, sup, sub, i, del, label

- 텍스트와 연관있는 요소가 많다
​
■ inline-block 요소
- img, input, button, fontawesome icon
​

 

1. 중앙 정렬

• block : 중앙 정렬이 될 자신에 margin: auto (단, 너비가 100% 미만인 경우, 수평 중앙에 보낼 수 있다 )
• inline / inline-block : 부모요소에 text-align: center 로 정렬

2. 좌우 정렬

• float 속성으로 정렬 ( 종류 무관 )

3. 모든 요소는  position: absolute 또는 position:  fixed가 적용되면 inline 으로 display 속성이 변함

 

4. 모든 요소는  float 속성을 가지면, 마진이 없는 inline 으로 display 속성이 변함

5. display 속성을 block으로 변경하면 요소의 너비는 자동으로 부모 요소를 기준으로 100%로 변경됨.
 (단, table, img, button, input 등 인라인블록 요소는 display: block으로 바꿔도 너비가 100%로 변경되지 않으므로 width: 100%를 주어야 함)

 

 

6. 가상클래스 ::before ::after의 최초 display 속성은 inline 
(크기 값을 주려면 display: block 또는 inline-block으로 변경해야 함.
단, position: absolute 또는 fixed 있으면 자동으로 display: inline-block 속성을 넣지 않아도 inline-block으로 변경됨.)

 

7. display 속성
block , inline, inline-block, none 4가지의 값이 있고 각 요소들간의 전환이 가능하도록 해준다