Chapter 6
엄청 자주 쓰게 되여~ font
훗.. 지난번 강좌가 너무 쉬웠다는 말이 엄청나더군요 ^^a (언제??..ㆀ)
지난번 강좌가 쉬운 이유가 여기 있지 않겠습니까?
이번건.. 좀.. 어려울겁니다.. -_-a
font... 다들 아시죠? 태그에서도 엄청나게 자주 쓰는 태그 말이예요..
아마도 모르는 님들은 안계시리라 전 믿습니다 *^^*
그래도.. 만에 한분.. 모르실걸 대비해서.. 가르쳐 드리겠습니다.
font란 단어를 사전에서 찾아보면, 음.. 활자란 말이 많이 나오는군요.. -.-a (진짜 찾아본 필자..ㆀ)
(거시기.. 뭐야?! 글자란 뜻은 눈뜨고 찾아봐도 없습니다~!! 종류와 크기가 같은 활자한 벌 ?! 머야..이게..ㆀ)
아..아무튼.. ㅡ.ㅡa 활자란 말이 나오니까.. 글자란 뜻도 되겠져? ^^ㆀ (에이~ 엉터리...)
웹문서 상에서 font란 단어는 주로 글자와 연관되어 나옵니다.
아무튼.. 알아 두시구요.. 그럼 쓸데없는것(?)은 여기서 그만두고 본문으로 가겠습니다...
아래의 표를 잘 보시구요.. 그대로 따라 써 보세요.
지난 강좌때 제대로 외우셨으면 장난스러울 겁니다.
font 속성에는 음. 부가 속성이 몇개 되네요..
fontstyle글자의 모양을 지정합니다. 고작 기울임꼴 하나 뿐이네요 ^^anormal(초기값), italic
family글꼴을 결정하는 부가 속성 입니다. 한글 폰트는 지원 못하구요..
태그의 face속성과 역할이 같습니다.글꼴 ex)arial, helvetica, serif 등등..
weight글자의 굵기를 조절하는 부가 속성 입니다.
원래는 사용자가 지정하는데로 잘~ 따라줘야 정상인데..
아직 이걸 지원하는 글꼴이 드문 모양 입니다. ^^*normal(초기값), 100~900, bolder, lighter, bold
size이 역시 크기를 조정하는것 입니다. 길게 설명 안하겠습니다 ^^**pt, *px, *pc, *mm, *cm, *in, *em 등등..
variant여기에 적용된 영문 글자를 작은 대문자로 바꿔줍니다.
그다지 잘 쓰이지도 않을 뿐더러, 중요하지도 않습니다.. -_-anormal(기몬값), small-caps
▶font-style
▶font-style
<html>
<head>
<title>font-style</title>
<style type="text/css">
.italic {font-style:italic}
</style>
</head>
<body>
<h2 align="center" class="italic">후훗.. 글자기 기울여 집니다.. ㅡ.ㅡγ</h2>
</body>
</html>예제보기 1st ← Click !
위의 예제에서 보시다시피.. style은 고작 해야 글꼴을 기울이는 정도 입니다.
이런것 정돈, HTML의 태그로 해두 되지만..
혹시나, 특별한 경우가 있어서 이걸 써야할 경우, 그때 쓰세요 ^^
그렇게 많이 쓰는 편도 아니고, 글타고 적게 쓰는것 역시 결코 아닙니다.. ㅡ.ㅡ (그럼 머야?!)
좀.. 애매한.. 그런 부가 속성, style 이였습니다. *^^*
▶font-family
▶font-family
<html>
<head>
<title>font-family</title>
<style type="text/css">
#font1 {font-family:times new roman}
#font2 {font-family:arial black}
</style>
</head>
<body>
하핫.. <span id="font1">Times new roman</span>는 어떤 글꼴일까요? *^^*<br>
이뎐.. <font id="font2">Style Sheet</font>
</body>
</html>예제보기 2nd ← Click !
family는 아주아주 무지무지 기가막히게(?) 중요한 부가 속성 입니다.
글꼴을 바꾸는 역할을 하기 때문에, 아주 마니마니 쓰입니다. ^^
위의 style의 역할과는 비교할수 없을만큼 값진(?!)것 입니다.
저두 매우 많이 씁니다. ^^a
그런데, 주의 하셔야 할게 있습니다.
HTML의 태그를 썼을때도 그러했는데..
나에겐 있는 글꼴이, 다른 사람에게는 없는 경우가 장난 아니게 많으니까..
될 수 있으면.. 윈도우의 기본 글꼴들을 택해서 쓰시는것이 더 좋겠죠..
Linux같은 요즘 뜨고 있는 운영 체제를 타겟으로 잡는다면 문제는 더 심각해집니다.. ㅡ.ㅡa
그래서.. 웹상의 기본 글꼴이 생겼는지도 모르겠군요..
그 기본 글꼴에 대해선 아래에서 자세히 설명 하겠습니다. ^^
▶font-weight
▶font-weight
<html>
<head>
<title>font-weight</title>
<style type="text/css">
.bold1 {font-weight:bold}
.bold2 {font-weight:400}
</style>
</head>
<body>
<small class="bold1">냥냥.. 굵습니다..</small>
<big class="bold2">약간 굵게 했는데.. 음.. 글쎄요.. ^^a</big>
</body>
</html>예제보기 3rd ← Click !
흐미..
그다지 많이 쓰이지 않고.. 글타고 또 안쓰이는 것도 아닌..
따지고 보면 style과 신세가 좀.. 비슷하거나 좀 나은 형편(?)을 가진 부가 속성 입니다.
원래는 100~900까지 9단계로 굵기를 조절할 수 있다고 나와 있으나..
읏.. 이 별난 현실에선 안통한답니다 ^^*
100~500까진 같은거 같고.. 또, 600~900까지 같은거 같습니다.
직접 실험 해 본 결과 입니다.. -_-a
어차피 lighter나 normal(초기값)은 같으니까.. 안쓰시길 권장하구여.. ㅡ.ㅡa
bold나 bolder나 또한 결과물이 다를바가 없습니다.. 그러니..
그냥.. 여기의 font-weight 값은 bold만 쓰셔두 무난할듯 *^^*
저두 그러하구요.. 아마 다른님들도 다아~ 그러실거예요.
적용이 안되는 데여.. 뭘.. 헐헐.. ㅡㅡa (W3C~!! 할말 있어~?!)
▶font-size
▶font-size
<html>
<head>
<title>font-size</title>
<style type="text/css">
.kaka {font-size:4mm}
.puhal {font-size:24px}
</style>
</head>
<body>
<span class="kaka">글자 크기는 4mm입니다. ^^ 그렇다고 직접 재어 보지 않으셔두 됩니다..ㆀ</span>
<span class="puhal">24픽셀(pixel)입니다. 별루.. 클것같진 않군요...</span>
</body>
</html>예제보기 4th ← Click !
훗.. 이 font-size를 마니 쓰는 이유를 가르쳐 드릴까요? ^^
그건.. HTML의 태그보다 더 상세하게 글자의 크기를 지정할 수 있기 때문이죠.
크기 단위도 각기 각색이여서.. 님들 맘에 드는걸 선택해서 쓰실 재미(?)도 있구엽 ^o^
저여? 당연히 *pt(포인트)랑 *px(픽셀)을 가장 많이 쓰져 *^^*
전 그래픽 공부를 하다보니.. ㅡ.ㅡa 헐헐.. bitmap은 픽셀을.. vector는 포인트 단위가 많이 쓰였거든요..
그래서.. 익숙해서여.. 헤헷.. ^^a
여러분들도 자신에게 맞는 단위를 즐겨 쓰시길 권장 합니다.
때에 따라서 다르게 쓸 경우도 있지만..
그건 거의 드문 일이라 볼 수 있습니다.
그러니.. 걱정 마시구 맘껏 쓰세요 *^^*
▶font-variant
▶font-variant
<html>
<head>
<title>font-size</title>
<style type="text/css">
#variant {font-variant:small-caps}
</style>
</head>
<body>
<font size="6">halhal... ㅡ.ㅡa <div id="variant">style sheet</div>zzang!</font>
</body>
</html>예제보기 5th ← Click !
이 부가 속성은 좀.. 게으른(?) 님이 쓰기에 딱~ 좋습니다..ㅡ.ㅡa
흠.. 근데.. 그님 조차도 좀처럼 쓸일이 드물것 같네요 ^^*
정말.. W3C에서 이걸 왜 만들었는지 의심이 가는 부분 입니다,.. ㅡㅡ^
차라리 그냥 시프트 눌러서 대문잘 만들고 말지.. 참, 외국 사람들은 알다가도 모르겠다니까요 ^^
난 이거 정말 잘 쓰고 싶다~~ 라고 생각하시는 분이 만약 계신다면.. 말리고 싶군요.. ㅡ.ㅡ
별로 쓸일이 없을테니 말입니다..
이거 연구하느니 차라리 그래픽 보충이나 하는게 더 바람직할 지도 모른다는 생각이 듭니다.
스타일 시트에 쓰이는 단위들은 크게 2가지가 있습니다.
절대 단위와 상대 길이가 바로 그것들 이죠.
절대 단위는 모니터의 해상도에 따라 그 길이가 달라지지 않습니다.
가령 예를들어 상대 단위인 px같은 경우, 모니터 해상도에 따라서 그 크기가 달라져 보입니다.
그러나 절대 단위인 cm같은 경우, 640*480에서 3cm였다면, 1024*768에서도 3cm인 것입니다.
그러니 이점을 잘 유의 하시며 사용 하시길 바랍니다 *^^*
[절대 단위]
in(인치), cm(센티미터), mm(밀리미터), pt(포인트), pc(피카)
[상대 단위]
em(현재 글자 크기), ex(현재 글자 크기중 x자의 크기), px(픽셀:모니터의 화면을 이루는 각점을 말함)
※ 알아두세여 ~ ♬
인터넷 웹사이트를 제작하다 보면, 어떤 글꼴을 사용하는게 멋있을까..
..라고 한번쯤은 생각해보신 경험이 있으실겁니다.
그러다 보면 자연스레 자기 컴퓨터에 깔린 가장 보기좋은 글꼴을 택하는건 당연한 결과겠죠.
하지만.. 이것이 다른 사용자에게 적용된다면? 그리고.. 만약, 그 좋은 글꼴이 없다면?
제작사 의도와는 다르게 표현된 웹문서 결과물을, 가장 중요한 방문자에게 보이게 되는 것 입니다.
게다가 서로 다른 웹브라우저나 운영체제를 쓰고 있다면 상황은 더욱 더 심각해 지겠죠..
아마도 그래서 만들어 진것이 "기본 글꼴"이 아닌가 싶습니다.
이것 역시 외국인이 만든것이기 때문에, 한글 글꼴은.. 없습니다.. (아~ 슬픈 현실이여..ㅜ.ㅜ)
따라서 모두 영문 글꼴이구요..
그 글꼴의 형태나 모양은 아래의 예제에서 보도록 하죠 ^^a
[영문 기본 글꼴]
serif
sans-serif
cursive
fantasy
monospace
네? 이걸로 끝이냐구요? ^^a
넵. 끝이예여.
뭐가 이렇게 썰렁하냐구요?
그게.. ㅡ.ㅡa 다음 강좌때 알게 되실겁니다..
그럼 여러분~ 건강 하세요 ^.^
- End -