728x90
📌 font-family : 글씨체
- 사용자마다 폰트가 없을 수도 있기 때문에 여러가지 폰트 설정을 해 두는 것
- 먼저 쓴 것이 우선순위가 된다.
- 아래의 경우 돋움체가 없으면 굴림체 적용
<style type="text/css">
body{
font-family : "돋음", "굴림";
}
</style>
예시
body{
font-family: "궁서", "굴림";
}
→ PC에 궁서체가 있기 때문에 굴림체는 적용이 되지 않음
body{
font-family: "가는각진목체", "굴림";
}
→ PC에 가는각진목체가 없기 때문에 굴림체로 적용 됨.
📌 font-size : 사이즈
- 글자 크기를 px, pt, em, ex, % 등을 이용해 변경가능
- em : 대문자 M 너비의 기준
- ex : 소문자 x 높이 기준
- % : 창의 사이즈에 따라 달라짐
- xx-small < x-small < s-small < small < x-large < xx-large 순
body{
font-size : 12px;
}
📌 font-style : 기울임
- nomal : 기본
- italic : 이탤릭체
- oblique : 기울어짐꼴
- inherit : 상속받아서 쓰겠다는 뜻
<body>
<h1> 안녕하세요 </h1>
<p class="style-normal"> 노멀입니다. </p>
<p class="style-italic"> 이탤릭체입니다. </p>
<p class="style-oblique"> 기울어짐꼴입니다 </p>
<p class="style-inherit"> 상속받았습니다 </p>
</body>body{
font-style : oblique;
}
.style-normal{
font-style : normal;
}
.style-italic{
font-style : italic;
}
.style-oblique{
font-style : oblique;
}
.style-inherit{
font-style : inherit;
}
→ body 에 기울임체가 적용이 되어있기 때문에 style-inherit 에서는 해당 css를 상속 받아 적용된다.
📌 font-weight : 굵기
- 100~900 사이이의 숫자로 폰트 굵기를 정할 수 있다.
- nomal : 보통
- bold : 굵게
- bolder : 좀 더 굵게
- lighter : 좀 더 가늘게
<body>
<h1> 안녕하세요 </h1>
<p class="style-normal"> 노멀입니다. </p>
<p class="style-bold"> bold입니다. </p>
<p class="style-bolder"> bolder입니다 </p>
<p class="style-lighter"> lighter입니다 </p>
</body>body{
font-weight : bold;
}
.style-normal{
font-weight : normal;
}
.style-bold{
font-weight : bold;
}
.style-bolder{
font-weight : bolder;
}
.style-lighter{
font-weight : lighter;
}
📌 color : 색상
- red, blue 등과 같이 색깔 이름을 넣어도 되고 색상표 (RGB)를 넣어도 된다.
- color : red 혹은 color : #ffff
p {
color : red;
}
📌 color rgba : 폰트 색상 + 투명도 조절
p {
color : rgba(255,0,0,50%)
}
728x90