CSS 폰트 및 크기
2023. 7. 30. 16:05ㆍFrontEnd/css
✅ 아래 내용들에 대해서 알아보자
- css 폰트
- css 크기
- 예제 코드
css font
css font 속성을 이용하여 폰트에 대해서 다양한 속성을 사용할 수 있다.(참고)
css 크기
- rem : 최상위 요소의 크기의 n배 적용
- em : 상위 요소의 크기의 n배 적용
- vw: viewport width 사이즈 크기의 퍼센트만큼 너비 크기
- vh: viewport height 사이즈 크기의 퍼센트만큼 높이 크기
예제 코드
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Font Style 1</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap");
* {
margin: 0px;
padding: 0px;
}
html {
/* font-family: serif, monospace; */
font-size: 15px;
}
/*
글꼴 관련 속성
- font-family : 글꼴 종류 지정(기본값 : 웹브라우저 기본 글꼴)
- font-size : 글자 크기 지정
- font-style : 글자를 이텔릭체로 표시할지 지정
- font-weight : 글자 굵기를 지정
- font-variant : 소문자를 작은 대문자로 바꾸는 속성
단위
- px : 픽셀 단위
- rem : 루트 요소의 글꼴 크기
- em : 요소의 글꼴 크기
- vw(viewport width) : viewport(브라우저의 사이즈) 너비의 1%
- vh(viewport height) : viewport 높이의 1%
*/
.title {
font-size: 28px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
color: rgb(97, 36, 154);
}
.content {
font-size: 18px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.font-weight-bold {
font-weight: bold;
}
.font-weight-300 {
font-weight: 300;
}
.web-font {
font-family: "Noto Sans KR", sans-serif;
}
.px {
font-size: 20px;
}
/* rem : 최상위 요소(html 태그 등..) 폰트 사이즈 크기의 n배 */
.rem {
font-size: 2rem;
}
/* em : 상위 요소의 폰트 사이즈 크기의 n배 */
.em {
font-size: 2em;
}
.up {
font-size: 11px;
}
/* viewport width 사이즈 크기의 퍼센트 만큼의 너비(가로) */
.vw {
width: 50vw;
height: 100px;
background-color: yellow;
}
/* viewport height 사이즈 크기의 퍼센므 만큼의 높이(세로) */
.vh {
height: 50vh;
background-color: blue;
}
</style>
</head>
<body>
<h2 class="title">폰트 공부</h2>
<p class="content">font-size, font-family를 공부해봅시다</p>
<p class="content font-weight-bold">font-weight 공부해봅시다</p>
<p class="content font-weight-300">font-weight를 공부해봅시다</p>
<p class="web-font">웹폰트를 공부해봅시다</p>
<hr />
<h2>px</h2>
<p class="px">px에 대해서 공부해봅시다</p>
<h2>rem</h2>
<p class="rem">rem에 대해서 공부해봅시다</p>
<div class="up">
<h2>em</h2>
<p class="em">em에 대해서 공부해봅시다</p>
</div>
<hr />
<h2>vw</h2>
<div class="vw"></div>
<h2>vh</h2>
<div class="vh"></div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.content {
border: 1px solid blue;
}
.text-center {
text-align: center;
color: aqua;
}
.text-right {
text-align: left;
}
.text-left {
text-align: right;
}
.article {
/* 글자 높이 */
line-height: 1.8rem;
/* 글자 간격 */
letter-spacing: 2px;
/* 단어 간격 */
word-spacing: 10px;
/* 들여쓰기 */
text-indent: 80px;
}
.transform-case {
/* 텍스트 대소문자 변경 */
text-transform: uppercase;
text-decoration: none;
}
</style>
</head>
<body>
<section>
<p class="content text-center">text-center</p>
<p class="content text-right">text-right</p>
<p class="content text-left">text-left</p>
</section>
<section>
<p class="article">
<span class="transform-case">korea</span>
에서 가장 보람차고 즐겁다는 보디빌더들도 비시즌기에는 몸이 상당히 붓거나
초췌해진다.[15] 호흡을 참아서 자살하는 것이 불가능한 것처럼 인간의
의지력은 생존본능을 절대 이길 수 없다.[16] 그래서 금주보다도 더 괴로운
것이 다이어트라고 한다.[17] 특히 단순한 기호품인 술과 달리 음식은
생활하는데 필요한 것인지라 멀리하기 어렵다는 것도 문제. 식사 시간만 되면
살 빼는 사람들은 자기 입이 시한폭탄이 된다. 그 이유는 식사야말로 가장
자연스럽고 근본적인 행위이자, 모두가 해야만 하는 행위이고, 모두가
좋아하는 행위기 때문이다. 술은 직접적으로 건강을 해친다는 이유나
종교적인 이유로 거부하는 문화가 상당히 정착됐으나, 맛있는 식사를
거부하는 행위는 직설적으로 말해 자학적이고 변태적인 성향에 가깝기 때문에
절대 그렇지 않다. 인류는 수십만년간 어떻게 하면 '맛있게 먹을 수 있을까?'
혹은 '먹을 수 있게 만들까?'에 신경썼지 어떻게 하면 내가 풍족한 식사를
끊고 날씬한 몸매를 만들며 오래 살까를 고민하지 않았다.
</p>
</section>
</body>
</html>
참고사항
반응형
'FrontEnd > css' 카테고리의 다른 글
| css 가상클래스/가상 요소 (0) | 2023.08.11 |
|---|---|
| css position (0) | 2023.08.11 |
| css float (0) | 2023.08.11 |
| css display (0) | 2023.07.31 |
| CSS 선택자(Selector) (0) | 2023.07.30 |