Css란[4]

타이포그래피란, 인쇄, 웹, 편집 디자인 등에서 서체와 글자 배치를 시각적으로 구성하고 표현하는 작업을 말합니다.

---

🅰️ Font Size (글자 크기)

✅ 단위 종류

단위 설명

px	고정 크기 (브라우저 설정과 무관)
em	부모 요소를 기준으로 한 상대 크기
rem	루트 요소(html)를 기준으로 한 상대 크기

em, rem은 가변 크기로 반응형 웹에 자주 사용됩니다.

브라우저 기본 설정(보통 16px)에 따라 변경될 수 있습니다.

---

🎨 Color (글자 색상)

color: red;
color: rgb(255, 0, 0);

---

🧭 Text Alignment (정렬)

속성 값 설명

left	왼쪽 정렬
right	오른쪽 정렬
center	가운데 정렬
justify	양쪽 정렬

---

🅰️ Font 관련 속성

✅ font-family (글꼴)

font-family: arial, verdana, "Helvetica neue", sans-serif;

• 글꼴 후보는 순서대로 적용
• 이름에 띄어쓰기가 있으면 " "로 묶음
• 계열 구분:
  • serif : 바탕체
  • sans-serif : 고딕체
  • monospace : 고정폭 글꼴

✅ font-weight (글자 굵기)

font-weight: bold;
font-weight: 400; /* 숫자로도 지정 가능 */

✅ line-height (줄 간격)

line-height: 1.5; /* 기본값은 보통 1.2 */

---

🧬 상속 (Inheritance)

• CSS의 일부 속성은 상속됨 (예: color, font, text-align)
• 모든 속성이 상속되지는 않으며, MDN 문서에서 확인 가능

---

📦 Display 란?

HTML 요소를 어떻게 화면에 표시할지를 결정하는 속성입니다.

---

📏 Box Model

✅ Block vs Inline

유형 특징

block	한 줄 전체를 차지, width 지정 가능
inline	콘텐츠 크기만큼 차지, width, height 무시됨

---

📐 Margin / Padding

• margin: 요소 바깥 여백
• padding: 요소 안쪽 여백

---

📦 box-sizing

값 설명

content-box	width/height에 content만 포함 (기본값)
border-box	padding, border까지 포함한 크기 지정 (추천)

box-sizing: border-box;

---

📍 Position

속성 설명

static	기본 배치, 위치 변경 불가
relative	원래 위치 기준으로 offset 조정 가능
absolute	가장 가까운 position 지정 부모 기준으로 위치
fixed	화면 기준 고정 (스크롤해도 위치 고정됨)

✅ absolute 특징

• 기준 부모는 position: relative 또는 absolute인 요소
• 상속이 끊겨 일반 DOM 흐름에서 제외됨