U E D R , A S I H C RSS

홈페이지만들기/css

1. 글꼴을 설정하는 font-family

다중 글꼴을 선택할 수 있다.
{font-family:글꼴}
~cpp 
<html>
<head>
<title>글꼴 설정 예제</title>
</head>
<Style type="text/css">
font.01{font-family: "Arial Black", "Script"}
font.02{font-family: "한컴바탕", "상호체"}
</Style>
<body>
<b>
<font class="01">Css & Java Script</font><br><br>
<font class="02">한컴 바탕폰트체로 나타냅니다.</font><br><br>
</b>
</body>
</html>
font.01{font-family: "Arial Black", "Script"} 둘 중 하나만 클라이언트의 컴퓨터에 있으면 그 것이 글꼴이 된다.
둘 다 있을 경우에는 먼저 지정한 글꼴이 우선 순위를 가진다.

2. 글자 크기를 설정하는 font-size

스타일 시트에서는 원하는 글자 크기를 마음대로 조정할 수 있다.
{font-size:절대크기|상대크기}
~cpp 
<html>
<head>
<title>문자 크기 설정 예제</title>
</head>
<Style type="text/css">
body{font-size:10pt}
font.01{font-size:50pt}
font.02{font-size:6mm}
</Style>
<body>
<body><body>태그안에 있는 모든 문자들은 10pt로 설정되어 있습니다.<br>
<font class="01">CSS란 무엇인가?</font><br><br>
<font class="02">우리 말로 스타일 시트입니다.</font><br><br>
IE메뉴 문자 크기를 변형 해보십시오<br>
변화가 생기질 않을 것입니다.
</body>
</html> 
글꼴 크기에 사용되는 단위는 아주 다양하게 있다. 단위를 사용하지 않으면 기본적으로 픽셀 단위를 사용한다.
html과 달리 크기 조절에 제한이 없다.

3. 글자 기울임을 설정하는 font-style

{font-style:스타일}
~cpp 
<html>
<head>
<title>글꼴 스타일 설정 예제</title>
</head>
<Style type="text/css">
font.01{font-style:italic}
font.02{font-style:oblique}
</Style>
<body>
<b>
<font size="3" class="01">italic으로 바뀝니다.</font><br><br>
<font size="3" class="02">oblique로 바뀝니다.</font><br><br>
</b>
</body>
</html> 
normal(보통), italic(이탤릭), oblique(기울임)

4. 작은 영 대문자로 설정하는 font-variant

{font-variant:small-caps}영문자를 작은 대문자로 설정.

5. 글자 두께를 설정하는 font-weight

{font-weight:키워드}문자 두께를 키워드에서 설정한 값으로 적용
  • 키워드: normal, bold, bolder, lighter(100 ~ 900)

6. 글자 속성을 한번에 지정

{font:각 스타일의 키워드}font에 관련된 스타일을 일괄적으로 지정할 수 있다.
~cpp 
font{font:italic normal bolder 12pt Arial}

7. 쓰레드

*너무 많다..수백개 다. 필요한 것들만 골라서 정리해야겠다.


페이지만들기

Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:33
Processing time 0.0138 sec