728x90
타이포그래피란, 인쇄, 웹, 편집 디자인 등에서 서체와 글자 배치를 시각적으로 구성하고 표현하는 작업을 말합니다.
🅰️ 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 흐름에서 제외됨
728x90
'Publishing > Css' 카테고리의 다른 글
Css란[3] (0) | 2023.04.15 |
---|---|
CSS란[2] (0) | 2023.04.15 |
CSS란[1] (0) | 2023.04.15 |