안녕하세요 int 관리자 전설입니다. 오늘은 폰트에 관련된 코드를 배워보도록 하겠습니다. 바로 ㄱㄱ!
먼저 CSS 파일 불러오기에 있는 기본 틀을 먼저 에디터에 작성하시구요, html바디 부분과 CSS 부분을 똑같이 작성해주시기 바랍니다.
오늘 배울 주제는 폰트입니다. 그중에서 Font-family, font-size, font-weight, font-style을 설명드리도록 하게습니다. 밑에 있는 코드를 똑같이 따라 작성해주시기 바랍니다. 저번 시간에 배운 id와 color을 이용해보면 더 좋겠죠?
<HTML> body부분만
<body>
<h1>CSS 3차시 - FONT</h1>
<h2 id="fontfamily">fontfamily</h2>
<h2 id="fontsize">fontsize</h2>
<h2 id="fontweight">fontweight</h2>
<h2>fontweight</h2>
<h2 id="fontstyle">fontstyle</h2>
</body>
<CSS>
#fontfamily{
font-family: Arial, Helvetica, sans-serif;
color: royalblue;
}
#fontsize {
font-size: 5rem;
color: darkorange;
}
#fontweight{
font-weight: 100;
color:yellowgreen;
}
#fontstyle{
font-style: italic;
color:tomato;
}
자 코드를 실행시켜 보도록 할게요. 먼저 fontfamily라고 되어 있는 글씨는 Arial 글씨로 바꾸라고 명령을 했지만 원래 글꼴이 Arial이기 때문에 똑같습니다. 그다음으로 fontsize라는 글씨는 5rem이라는 글씨 크기로 바뀌게 됩니다. rem말고도 px, pt등도 사용이 가능합니다.fontweight는 두가지가 있는데, 초록색 fontweight 글씨는 조금 더 얇고, 그냥 검정색 fontweight 글씨는 두껍습니다. font-weight는 100~900까지 백단위로만 사용이 가능합니다. 기본값은 400입니다. 마지막으로 fontstyle부분은 글씨가 약간 기울어져 있는 것을 확인하실 수 있습니다.
이처럼 오늘은 폰트 중에서도 가장 중요한 4가지의 코드들을 설명해드렸습니다. 다음 시간에는 더 재밌고 알찬 CSS 강의로 찾아뵙겠습니다 .감사합니다!
