본문 바로가기
Not Using/Java script/HTML/CSS

CSS 계속

longer 2011. 11. 15. 13:57
글자지정하기

 font-family  글자체
 font-size  크기
 font-weight  글자굵기
 font-style  글자 스타일
 font-variant  작은 대문자로 변환
속성 설명

<HEAD><TITLE>FONT지정하기1</TITLE>
<STYLE TYPE="text/css">
<!--
BODY{FONT-SIZE:30pt}
.font1{font-family:궁서체}
.font2{font-family:"HY 견고딕"}
.font3{font-family:cursive}
.font4{font-family:fantasy}
.font5{font-family:monospace}
-->

</STYLE>

</HEAD>
<BODY>
<P CLASS="font1">FONT지정하기</P>
<P CLASS="font2">FONT지정하기</P>
<P CLASS="font3">FONT지정하기</P>
<P CLASS="font4">FONT지정하기</P>
<P CLASS="font5">FONT지정하기</P>
</BODY>

설명:
BODY태그 전체에 글자 크기를 30pt로 지정하였다.  
나나머지 클래스로 지정해주어 폰트체를 주었다.



[글자크기 지정하기]

글자의 크기를 지정하는 속성은 font-size이다.
font-size의 속성값
 값
  설명
 xx-small  대단히 작은 글자 크기
 x-small  작은 글자 크기
 small  조금 작은 크기
 medium  기본 값(12pt)
 large  조금 큰 글자 크기
 x-large  큰 글자 크기
 xx-large  대단히 큰 글자 크기
 smaller  상위 글자 크기에서 1단계 작은 글자 표기
 larger  상위 글자 크기에서 1단계 큰 글자 표기


 <HEAD><TITLE>FONT지정하기2</TITLE>

<STYLE TYPE="text/css">
<!--

.font1{font-size:20pt}
.font2{font-size:40pt}
.font3{font-size:100%}
.font4{font-size:200%}
.font5{font-size:xx-small}
.font6{font-size:x-small}
.font7{font-size:small}
.font8{font-size:medium}
.font9{font-size:large}
.font10{font-size:x-large}
.font11{font-size:xx-large}

-->

</STYLE>
</HEAD>

<BODY>
<P CLASS="font1">font지정하기</P>
<P CLASS="font2">font지정하기</P>
<P CLASS="font3">font지정하기</P>
<P CLASS="font4">font지정하기</P>
<P CLASS="font5">font지정하기</P>
<P CLASS="font6">font지정하기</P>
<P CLASS="font7">font지정하기</P>
<P CLASS="font8">font지정하기</P>
<P CLASS="font9">font지정하기</P>
<P CLASS="font10">font지정하기</P>
<P CLASS="font11">font지정하기</P>


</BODY>


[글자 굵기 지정하기]

글자굵기는 font-weight으로 지정한다.
굵기값은 100~900으로 지정할 수 있으며 기본값은 400이다.


 값  설명
 normal  기본값
 bold  굵은 글자 굵기(700)
 bolder  상위 요소보다 1단계 굵은 글자 굵기
 lighter  상위 요소보다 1단계 작은 글자 굵기



 <HEAD><TITLE>size지정하기</TITLE>

<STYLE TYPE="text/css">
<!--
BODY{font-size:20pt}
.font1{font-weight:100}
.font2{font-weight:400}
.font3{font-weight:900}
.font4{font-weight:normal}
.font5{font-weight:bold}
.font6{font-weight:bolder}
.font7{font-weight:lighter}

-->

</STYLE>
</HEAD>

<BODY>
<P CLASS="font1">font지정하기</P>
<P CLASS="font2">font지정하기</P>
<P CLASS="font3">font지정하기</P>
<P CLASS="font4">font지정하기</P>
<P CLASS="font5">font지정하기</P>
<P CLASS="font6">font지정하기</P>
<P CLASS="font7">font지정하기</P>


</BODY>

BODY태그 전체에 font-size속성의 값을 '20pt'로 입력하여 글자의 크기를 지정하였다. 



[기타]

HTML의 <I>태그와 같이 글자의 이탤릭체 효과를 내는 역할을 하는 스타일 속성은 FONT-STYLE이다. 값지정은 italic,oblique값이 있으며 차이점은 엄밀히 말하면 다르지만 일반적인 브라우저에서는 이를 구별하지 않는다.


소문자를 작은 크기의 태문자로 변환하는 역하는 하는 속성도 존재하는데 이것이 font-variant속성이다.


<HEAD><TITLE>FONT지정하기2</TITLE>

<STYLE TYPE="text/css">
<!--
BODY{font-size:20pt;font-weight:bold}
.font1{font-style:italic}
.font2{font-style:oblique}
.font3{font-style:normal}
.font4{font-variant:normal}                       
.font5{font-variant:small-caps}                 //작은 대문자로 변환
 -->

</STYLE>
</HEAD>

<BODY>
<P CLASS="font1">font지정하기</P>
<P CLASS="font2">font지정하기</P>
<P CLASS="font3">font지정하기</P>
<P CLASS="font4">font normal지정하기</P>
<P CLASS="font5">font small-caps 지정하기</P>


</BODY> 




지금까지 글자의 속성을 지정하는 방법에 대해 알아보았다.글자의 글자체, 굵기, 크기, 스타일등을 한꺼번에 지정하고자 할때는 간단하게 font속성을 사용하여 값만 지정해서 사용할 수도 있다. 
기본적으로 font:font-weight값 font-style값  font-variant값 font-size값/line-height값 font-family값 순서로 표현하며 font-weight값과 font-style값, font-variant값은 서로 순서를 바꿔도 상관없다. 그리고 line-height값은 font-size값 뒤에 '/'를 붙여 입력한다. 마지막으로 font-size값과 font-family값은 반드시 넣어야 한다.
 








[문장지정하기]

글자나 단어의 간격, 정렬에 대한 스타일 속성에 대해서 알아보자.


 값  속성
 letter-spacing:수치  글자간격지정
 word-spacing:수치  단어간격지정
 vertical-align:수치  수직정렬지정
 text-align:수치  수평정렬지정
 test-decoration:키워드  글자장식지정 
 text-transform:키워드  대소문자지정 
 

<HEAD><TITLE>FONT지정하기2</TITLE>

<STYLE TYPE="text/css">
<!--
BODY{font-size:20pt;font-weight:bolder}
.font1{letter-spacing:normal}
.font2{letter-spacing:10pt}
.font3{letter-spacing:20pt}
.font4{word-spacing:normal}
.font5{word-spacing:10pt}
.font6{word-spacing:20pt}
-->

</STYLE>
</HEAD>

<BODY>
<P CLASS="font1">letter 간격 지정하기</P>
<P CLASS="font2">letter 간격 지정하기</P>
<P CLASS="font3">letter 간격 지정하기</P>
<P CLASS="font4">word 간격 지정하기</P>
<P CLASS="font5">word 간격 지정하기</P>
<P CLASS="font6">word 간격 지정하기</P>

</BODY> 

자간을 지정할때는 letter-spacing속성을 사용하고 단어간의 간격을 지정할때는 word-spacing속성을 사용한다. 




[정렬지정하기]
 

 속성 설명 
 left 왼쪽 정렬 
 right 오른쪽 정렬 
 center 가운데 정렬 
 justify 균등하게 정렬 
 



<HEAD><TITLE>text지정하기2</TITLE>

<STYLE TYPE="text/css">
<!--
BODY{font-size:20pt}
.text1{text-align:left}
.text2{text-align:center}
.text3{text-align:right}
.text4{vertical-align:top}
.text5{vertical-align:middle}                  //글자를 가운데로 정렬
.text6{vertical-align:baseline}               //수직정렬의 기본값
.text7{vertical-align:sub}                     //아래첨자
.text8{vertical-align:super}                  //위첨자
-->

</STYLE>
</HEAD>

<BODY>
<P CLASS="text1">수평 정렬하기</P>
<P CLASS="text2">수평 정렬하기</P>
<P CLASS="text3">수평 정렬하기</P>

<p>수직 정렬하기
<IMG SRC="1.JPG" CLASS="text4" HEIGHT="80pt"></p>   <!--이미지에 텍스트의 위치를 TOP으로
<p>수직 정렬하기 
<IMG SRC="1.JPG" CLASS="text5" HEIGHT="80pt"></p>     <!--이미지에 텍스트의 위치를 MIDDLE로
<p>수직<SPAN CLASS="text6" >정렬</SPAN>하기</p>
<p>수직<SPAN CLASS="text7" >정렬</SPAN>하기</p>
<p>수직<SPAN CLASS="text8" >정렬</SPAN>하기</p>

</BODY>

'Not Using > Java script/HTML/CSS' 카테고리의 다른 글

fetch API  (0) 2023.12.10
CSS  (0) 2011.11.15
홈페이지 프레임 연결과 기타태그  (0) 2011.11.15
TAG_ATTRIBUTE3  (0) 2011.11.15
TAG_ATTRIBUTE2  (0) 2011.11.14

'Not Using/Java script/HTML/CSS' Related Articles

티스토리툴바