디스플레이 속성 4가지 특징
1️⃣ 기본 너비 값
2️⃣ 한 줄에 하나 or 여러 개
3️⃣ 크기 값 (너비, 높이)
4️⃣ 상하 마진
- 인라인 요소 (Inline Elements)
➡️ 글자를 개별적으로 꾸미는 서식에 관련된 태그들
span, a, b, strong, mark, map 등
➡️ 기본 너비 값 : 컨텐츠 너비 값 / 한 줄에 여러개 / 크기 값 ❌ / 상하 마진 ❌
- 블록 요소 (Block Elements)
➡️ 레이아웃에 관련된 태그, 목록, 제목, 테이블, 시멘틱태그(헤더, 푸터, 메인, 섹션 등)
div, p, table, ul, ol 등
➡️ 기본 너비 값 : 100% / 한 줄에 하나만 배치 / 너비 값, 높이 값 ⭕ / 상하좌우 마진 ⭕
- 인라인 블록 요소 (Inline Block Elements)
➡️ 이미지를 비슷한 대부분의 폼 요소(버튼, textarea, select 등) ✔️label은 인라인 요소
img, input, button, textarea, Font Icon태그, video, audio
➡️ 기본 너비 값 : 컨텐츠의 너비 값 / 한 줄에 여러 개 배치 / 크기 값 ⭕ / 상하좌우 마진 ⭕
(상하) 마진 겹침 현상 : 둘 중에 더 큰 마진으로 마진을 취하는 것
'꼼지락거리기' 카테고리의 다른 글
| React 개념 정리 Hooks useRef / useMemo (0) | 2023.02.27 |
|---|---|
| CSS 중앙 정렬하는 방법 (0) | 2023.02.21 |
| React 개념 정리 Hooks useContext / useReducer (0) | 2023.02.13 |
| React 개념 정리 Hooks useState / useEffect (0) | 2023.02.06 |
| React DOM, 리액트는 어떻게 돌아가는가? (0) | 2023.01.24 |