Inline vs Block vs Inline-block 속성
- CSS의 가장 기본적인 속성
- 모든 요소들을 inline, block, inline-block중 하나를 가진다
- Block > Inline 보다 큰 개념이다. 그렇기 때문에 inline 태그안에 block 태그를 넣는 다면 오류가 발생
1. Inline
- 물 흐르듯이 한 줄에 여러 요소가 들어가는 속성
1) 예제
- 태그를 2개 사용하였지만 한 줄에 모두 적용 되었다
3) 특징
- Inline 요소 상하 여백은 margin 이 아니라 line-height에 의해 컨트롤
- width, height 속성은 안된다
- 좌우 5px 여백이 자동 적용
2) Inline 속성 태그
a abbr acronym b bdo big br button cite code dfn em i img input kbd label map object q samp small script select span strong sub sup textarea tt var
2. Block
- 한 태그가 한 줄을 모두 차지
1) 예제
- 태그 2개가 두 줄에 의해 보여진다
2) 특징
- margin, width, height가 모두 적용
- 주로 레이어를 잡을 때 사용 한다
- background-color로 block 인지 아닌지 확인이 가능하다
3) block 속성 태그
address article aside audio blockquote canvas dd div dl fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr noscript ol output p pre section table tfoot ul video
3. Inline-block
- block과 Inline의 중간 속성으로 사용자에 의해 정의 된다
- Inline과 같이 한 줄에 나타나며 margin, width, height가 적용된다
1) 예제
- <div> 태그를 2 개 정의 했지만 한 줄에 같이 출력된다
- display : inline-block
'Front-End > HTML5 + CSS' 카테고리의 다른 글
| [CSS] 3단 레이아웃 (float, display) (0) | 2016.12.11 |
|---|---|
| [CSS] 고정 <header>, <footer> 만들기 (0) | 2016.12.11 |
| [CSS3] CSS3 사용자 인터페이스 (0) | 2016.12.11 |
| [CSS3] CSS3 애니메이션 속도 제어 (0) | 2016.12.11 |
| [CSS3] CSS3를 이용한 애니메이션 효과 (0) | 2016.12.11 |
리딩리드