| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 패스트캠퍼스
- 개발자취업부트캠프
- TypeScript
- next.js
- GIT
- styled-components
- JavaScript
- 국비지원교육
- 메가바이트스쿨
- 내일배움카드
- 이벤트
- useRef
- 프론트엔드
- MegabyteSchool
- 모던 자바스크립트 딥 다이브
- CSS
- 자바스크립트
- 모던 딥 다이브 자바스크립트
- 코딩테스트
- 자료구조
- 비전공자
- 알고리즘
- 개발 공부
- Github
- 리액트
- 프로그래머스
- useMemo
- 입문
- 공식문서
- react
Archives
- Today
- Total
개발 기록 남기기✍️
[CSS] 단위 설정 본문
px/pt에 대한 단위값의 이해
- css 맨 처음에 브라우저의 폰트를 지정해줘야 한다.
:root {font-size : 16px;}
- 16px == 12pt
- point는 인쇄 디자인에 쓰이고 px은 디스플레이에서 사용
- px 단위는 절대 단위이므로 역동적 특성이 없어 사용자 접근성 낮음
%에 대한 단위값의 이해
- 부모요소 기준으로 값이 조정됨
em에 대한 단위값의 이해
- 16px == 12pt == 100% == 1em
- em은 최초에 설정된 font-size를 기준으로, 부모 요소를 따라 움직임.
- font-size의 em 값이 작아지면 font-size 뿐만 아니라 width, height 등에도 같이 적용됨
rem에 대한 단위값의 이해
- font에서는 pixel보다는 rem으로 주로 표현
- rem : 최상위 요소의 font-size 를 기준으로 사이즈 조정, 소숫점 6자리까지 표현
- 접근성이 편리함
'Front-End > HTML & CSS' 카테고리의 다른 글
| [CSS] Flexbox Froggy 솔루션 (0) | 2022.12.16 |
|---|---|
| [CSS] CSS 선택자 우선순위 (0) | 2022.12.15 |
| [CSS] font (0) | 2022.07.07 |
| [CSS] ir 기법, is 기법 (0) | 2022.07.07 |
| [CSS] image, background 구분 (0) | 2022.07.07 |