블록(block)
<h1>, <p>, <div> 와 같은것
위에서부터 아래로 배치됨
너비와 높이를 지정할 수 있음
인라인(inline)
<a>, <span> 같은것
평소에 글 쓰는 방향
화면에 꽉 차면 다음줄로 넘어감
너비나 높이를 지정할 수 없음 (예외로 img 는 가능)
여백은 가로로만(글 쓰는 방향) 가능
인라인블록(inline-block)
인라인처럼 배치되나 블록처럼 크기를 가지고 싶을 때 사용하는 속성
블록인라인 블록
블록 | 인라인 | 인라인블록 | |
기본 크기 | 좌우로 꽉 참 | 콘텐트에 딱 맞게 | 콘텐트에 딱 맞게 |
배치 | 위에서 아래로 | 글 쓰는 방향 | 글 쓰는 방향 |
width 와 height | O | O | X |
margin 과 padding | O | O | ▵ 인라인 진행 방향(=가로)만 제대로 사용 가능 |
float : right / left
요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있음.
'HTML, CSS' 카테고리의 다른 글
[CSS] 박스모델 정리 (0) | 2023.04.17 |
---|---|
[CSS] padding/ margin 표기법 (0) | 2023.04.17 |
[CSS] 불투명도: opacity (0) | 2023.04.14 |
[CSS] 그림자: box-shadow (0) | 2023.04.14 |
[CSS] 그라디언트: linear-gradient (0) | 2023.04.14 |