CSS Property (속성 ) : Font

CSS Property (속성 ) : Font

☞ 4가지 선택자
*{ 스타일 속성: 속성값; }   ex) * { color: blue; }  ※ * = all
태그명{ 스타일 속성: 속성값; }   ex) body { color: black; }
.클래스명{ 스타일 속성: 속성값;}   ex) .wooin21 { color: pink; }
#아이디{ 스타일 속성: 속성값;}   ex) #wooin21 { color: orange; }

CSS 기본문법 :  p { 속성: 속성 값 }  ex)  p { font-family :  'Nanum Gothic', tahoma, verdana; }   /*  주석  */

Font 관련 Property (속성 ) :
font-family, font-style, font-variant, font-size, font-weight, font-stretch

[ example ]
01. font-family
p {
    font-family: "Times New Roman", Times, serif;
}

02. font-style
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

03. font-size

p {
    font-size: 14px;
}
p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

04. font-weight
p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

05. font-variant
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

05. font-variant
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}


※ Responsive Font Size
vw = "viewport width"

ex) <h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

☞ CSS 관련 유용한 사이트 :  https://www.w3schools.com/