CSS 크기 단위
텍스트나 요소 크기를 정의하는 단위이다.
크기 단위 속성
px: 화소 하나의 크기에 대응되는 단위(절대 값)em: 부모 요소 크기에 따른 배수 단위(상대 값)rem: HTML 태그의 폰트 크기에 따라 결정(상대 값)
단위 예시
1. 기본 px 단위
<html>
<style>
.fontsize1 {
font-size: 20px;
}
.fontsize2 {
font-size: 40px;
}
html {
font-size: 200px;
}
body {
font-size: 100px;
}
</style>
<body>
<div class="fontsize1">
FONTSIZE
</div>
<div class="fontsize2">
FONTSIZE
</div>
</body>
</html>이 경우 부모 요소인 body 태그나 html 태그의 font-size가 변경되더라도,
폰트를 절대 단위로 지정해 준 내부 요소는 영향을 받지 않는다.
2. rem 단위
<html>
<style>
html {
font-size: 20px;
}
.fontsize1 {
font-size: 2rem;
}
.fontsize2 {
font-size: 1rem;
}
</style>
<body>
<div class="fontsize1">
FONTSIZE
</div>
<div class="fontsize2">
FONTSIZE
</div>
</body>
</html>단위 rem의 경우 최상위 부모요소인 html 태그의 폰트 사이즈를 기준으로 단위 값의 비율만큼 크기가 변한다.
위 예제의 경우 html 태그의 폰트 크기가 20px이므로, font-size1의 경우 40px, font-size2의 경우 20px의 폰트 크기를 가지게 된다. html 태그의 폰트를 설정하지 않을 경우 브라우저의 기본 폰트 크기(16px)를 기준으로 크기가 변한다.
3. em 단위
<html>
<style>
.fontsize-container {
font-size: 30px;
}
.fontsize1 {
font-size: 2em;
}
.fontsize2 {
font-size: 1em;
}
</style>
<body>
<div class="fontsize-container">
<div class="fontsize1">
FONTSIZE-em
</div>
<div class="fontsize2">
FONTSIZE-em
</div>
</div>
</body>
</html>단위 em의 경우 자신 요소의 폰트 사이즈를 기준으로 지정한 단위 값의 비율만큼 크기가 변한다. 위 예제의 경우 부모 요소인 fontsize-container의 폰트 크기인 30px이 내부 요소인 fontsize1, fontsize2 영역에 영향을 줘 두 요소의 폰트 크기가 30px로 지정된다. 따라서 30px을 기준으로 fontsize1은 60px의 폰트 크기를 fontsize2는 30px의 폰트 크기를 가지게 된다.
*** 웹 페이지를 제작하다 보면 폰트 크기의 변화에 따라 관련된 요소의 길이나 크기가 변화가 필요한 경우가 있다. 폰트가 12px -> 15px로 커지면 그 크기에 맞춰 내부 여백 값과 같은 요소들의 변화가 필요해진다. 이때 단위 설정을 통해 기준점을 잘 잡아두면 상대단위(rem,em)를 통해 px을 일일히 바꿔주는 수고로움에서 벗어날 수 있다!
CSS 폰트
폰트 설정
font-familydiv{
font-family: Gramond;
}만약 폰트 이름에 띄어쓰기가 포함될 경우
'Gill Sans'와 같이 사용한다.
font-sizediv{
font-size: 10px;
}폰트의 기본 크기는 16px이다.
font-weightdiv{
font-weight: lighter;
font-weight: normal;
font-weight: bold;
font-weight: bolder;
}div{
font-weight: 100~900;
}폰트의 굵기는 100~900 사이의 숫자로도 조절이 가능하다.
lighter: 100 / normal: 400 / bold: 700 / bolder: 900
line-heightdiv{
line-height: 2;
}Googlefont 설정하기
1. 구글 웹 폰트 검색
2. 원하는 폰트 선택
카테고리를 활용하거나 글꼴 이름을 검색하여 원하는 글꼴을 찾는다.
(디자인할 때 자주 썼던 Notn Sans 픽! 무료입니다ㅎㅎ)
3. 폰트 담기
+select this style 을 클릭하여 폰트를 담는다.
4. 생성된 코드 복사
폰트 링크를 카피해서 HTML <head> 안에 붙여넣으면 CSS에서 사용이 가능하다.
<link href="https://fonts.googleapis.com/css2 family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet">
RN App Developer