typography
サイズ
/* css*/
font-size: 1px;
font-size: 1rem;
/*
px: 절대값, 고정된 폰트의 크기를 지정할때 사용
(사용자가 글꼴의 크기를 조정할 수 없다)
rem: 상대값, 브라우저의 설정에 따라 가변적으로 크기 변경
*/
色
/* css*/
color: color-name;
color: hex;
color: rgb;
참고 site
https://html-color-codes.info/Korean/ テキストの整列
/* css*/
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
/* justify : 좌우 정렬 같게(양끝에 꽉차게) */
✅ font-family
/* css*/
font-family: arial, verdana, "Times New Roman", sefif;
/*
- 왼쪽부터 차례로 글꼴이 나온다(사용자에게 첫번째 글꼴이 없으면 2번째(verdana)가 나오고, 2번째가 없으면 3번째(Times New Roman)가 나오는 순서)
- 즉, 비슷한 폰트들을 우선순위에 따라 왼 -> 오 순으로 놓는다
- "Times New Roman"처럼 글꼴 자체에 띄어쓰기가 있는 이름은 큰따옴표("")로 감싸준다
- 맨 마지막에는 '포괄적 폰트'로 마무리 해주기
-> serif : 삐침 있는 명조계열의 글꼴
-> sans-serif : 삐침 없고 굵기가 일정한 고딕계열의 글꼴
-> monospace : 글자 폭과 간격이 일정한 글꼴
-> cursive : 손으로 쓴 것 같은 필기계열의 글꼴
-> fantasy : 화려한 글꼴
-글꼴을 여러 개 설정할 때는 쉼표로 구분하며, font-family: Georgia, "Times New Roman", serif; 로 설정했을 때, 제일 먼저 Georgia 글꼴을 적용하는 것이 좋다.(없다면 Times New Roman 글꼴을 사용합). CSS로 설정한 글꼴이 없을 수도 있으므로, 마직막은 generic-family로 정해두는 것이 좋다.
*/
✅ font-weight
/* css*/
font-weight: bold;
font-weight: 900; (bold = 900)
✅font(総合表示法)
/* css*/
.body{
font: font-style
font-variant
font-weight
font-size/line-height
font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
}
/*
-폰트와 관련된 여러 속성을 축약형으로 표현하는 속성. 순서를 지켜서 기술해야 한다.
❗ font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
*/
適用web font
/* css */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300;600&family=Heebo:wght@100&display=swap');
/*
-각 글씨체를 적용하고 싶은 부분에 id등으로 빼서 넣어주기
font-family: 'Dosis', sans-serif;
font-family: 'Heebo', sans-serif;
*/
참고 site
https://fonts.google.com/?authuser=1Reference
この問題について(typography), 我々は、より多くの情報をここで見つけました https://velog.io/@kirin/typographyテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol