Block 방식 - 세로로 떨어지는 방식
- h1 ~ h6, div
- width 및 height 적용
display: block;Inline 방식 - 가로로 떨어지는 방식
- a, span, label
- width 및 height 적용 X
- margin 및 padding 적용 X
display: inline;Inline-block 방식 - 가로로
- width 및 height 적용
- margin 및 padding 적용
display:inline-block;Block 방식
1. h1 ~ h6
- h1 부터 h6 까지 존재한다.
2. div
- 하나의 블럭 방식
Inline 방식
1. a
- 하이퍼링크
<a href="https://velog.io/@jjoung-2j/posts">쫑쫑이</a>2. label
- 의미있는 라벨, 바코드
체크박스 옆의 글자를 클릭해도 체크박스가 선택되게 하기 위함
3. span
- 텍스트 inline 용
width, height 적용 불가능
width
- 너비
-> % 권장 (px 가능 하지만, 컴퓨터별 모니터 상황이 다를 수 있다.)
height
- 높이
-> % 사용 불가
주의사항
border 가 있을 경우, inlen-block의 width 합이 100% 이면 한줄을 넘어버린다.
inline은 width 를 적용하지 못한다.
정리
- ch02_display -> 01_display_inline_block.html
