day05 - font
> font
폰트의 종류 - familiy 로 묶어서 분류
monospace 는 글자간 간격이 일정하여 코딩할 때 많이 사용함
< css font property >
1. font-family: 글꼴을 설정
font family 명을 작성
여러개 작성 시 앞에서부터 차례대로 시도하며, 시스템에서 표시가능한 폰트이면 선택됨
작성한 family 의 폰트 중 어떤 폰트를 표시할지는 (크롬기준)설정-글꼴맞춤설정 에서 설정되어있음
* web safe font: 웹에서 문제없이 안전하게 사용가능한 폰트 - (영문기준) Arial, Verdana, Georgia, Courier New 등
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>* 기본 폰트 외에 다른 폰트를 쓰고싶다면? → 구글 폰트 - 언어, 카테고리 선택 - 원하는 폰트 선택 - select this style
link 를 복사, head 에 작성
css rules 복사, head 의 style 에 작성
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@300&family=Yeon+Sung&display=swap" rel="stylesheet">
<title>font example</title>
<style>
*{
font-family:'Gowun Dodum', sans-serif;
}
h2{
font-family: 'Yeon Sung', cursive;
}
</style>
</head>
<body>
<h1>새로운 폰트를 적용해보자!</h1>
<h2>이것만 다른 폰트를 쓸거야.</h2>
<h3>폰트를 바꾸니까 예쁜 것 같아~</h3>
</body>
2. font-style: 기울기와 같은 글꼴의 스타일을 설정
normal (기본), italic (기울기), oblique (기울기) 등을 작성
<head>
<style>
#head1{
font-style:normal;
}
#head2{
font-style:italic;
}
#head3{
font-style:oblique;
}
</style>
</head>
<body>
<h1 id="head1">this is the first text.</h1>
<h1 id="head2">this is the second text.</h1>
<h1 id="head3">this is the third text.</h1>
</body>
3. font-weight: 글씨의 굵기를 설정
normal (기본), bold (굵게), lighter (얇게), 혹은 숫자100(가장 얇게)~900(가장 굵게) 로 작성
<head>
<style>
#div1{
font-weight:normal;
}
#div2{
font-weight:bold;
}
#div3{
font-weight:lighter;
}
#div4{
font-weight:100;
}
#div5{
font-weight:900;
}
</style>
</head>
<body>
<div id="div1">this is the first text.</div>
<div id="div2">this is the second text.</div>
<div id="div3">this is the third text.</div>
<div id="div4">this is the fourth text.</div>
<div id="div5">this is the fifth text.</div>
</body>
4. font-size: 글씨 크기를 설정
px 단위로 작성
혹은 em 단위로 작성 - 부모요소의 폰트 크기의 n배
혹은 rem 단위로 작성 - 루트요소의 폰트 크기의 n배 (루트요소는 html)
<head>
<style>
#div1{
font-size:30px;
}
#div2{
font-size:2em;
}
#div3{
font-size:1.5em;
}
#div4{
font-size:2rem;
}
</style>
</head>
<body>
<div id="div1">this is the first text.</div>
<div id="div2">this is the second text.</div>
<div style="font-size:20px;">
<div id="div3">this is the third text.</div>
</div>
<div id="div4">this is the fourth text.</div>
</body>* font 정보를 확인하려면, element 에서 우클릭 - 검사 - computed 에서 확인
5. font: 여러가지 폰트 속성을 한번에 설정할 수 있음
font-size 와 font-family 는 반드시 작성해야 함 (다른 것들은 작성하지 않으면 기본값으로 설정됨)
작성 순서: font-style font-variant font-weight font-size/line-height font-family
<head>
<style>
#div1{
font:40px D2Coding, monospace;
}
#div2{
font:italic bold 2em Arial, sans-serif;
}
#div3{
font:900 3rem Times, serif;
}
</style>
</head>
<body>
<div id="div1">this is the first text.</div>
<div id="div2">this is the second text.</div>
<div id="div3">this is the third text.</div>
</body>