THML/♣♣ html ♣♣

6.아름다운 글 올리는 방법(글자의 크기와 색상 font)

동네 사람들(통하니) 2009. 2. 13. 20:44
아름다운글 올리는 방법 6 신



오늘은 글자의 크기와 색상에 대하여 알아보겠습니다
글자의 명령은 모두가 font에서 이루어집니다
font 글자는 이렇게 하여라는 말
color 글의 색상을 지정하는 명령어
size  글의 크기를 지정하는 명령어
1. 글의 색부터 해보죠
 color="원하는 색상이름이나 색코드 넘버"

예
<font color="red">붉은색</font><br>
<font color="blue">푸른색</font><br>
<font color="yellow">이건 노란색</font><br>
<font color="a52a2a">a52a2a색</font><br>
<font color="8a2be2">8a2be2색</font><br>
<font color="8b008b">8b008b색</font><br>
결과보기

붉은색
푸른색
이건 노란색
a52a2a색
8a2be2색
8b008b색


2. 글자의 크기 지정입니다
    size="원하는 크기의 수"

예
<font color="red" size="1">붉은색</font><br>
<font color="blue" size="2">푸른색</font><br>
<font color="yellow" size="3">이건 노란색</font><br>
<font color="a52a2a" size="4">a52a2a색</font><br>
<font color="8a2be2" size="5">8a2be2색</font><br>
<font color="8b008b" size="6">8b008b색</font><br>
결과보기

 

붉은색
푸른색
이건 노란색
a52a2a색
8a2be2색
8b008b색
3. 그럼 지금까지 베운 모든걸 종합해 볼까요
   * 움직임의 명령 marquee는marquee 대로
     글자의 명령 font는 font 대로 따로 해야합니다
   * 마침 명령은 시작의 역순으로 마쳐야합니다
 이렇게 해보죠
명령 움직여라 방향은="위로" 속도는="1" 바탕색="푸른색" 넓이는="400" 높이는="200" 여기까지
명령 글자는 색을="흰색" 크기는="3으로" 여기까지이다

명령     ☞  <
움직여라 ☞  marquee
방향은   ☞  direction
속도는   ☞  scrollamount
바탕색   ☞  bgcolor
넓이는   ☞  width
높이는   ☞  height
여기까지 ☞  >
명령어로 번역하면 이렇게 되겠죠.
지금까지 익힌것을 다시한번 되세겨 보세요. 
   
<marquee direction="up" scrollamount="1" bgcolor="blue" width="400" height="200">
<font color="white" size="3">
키스의 의미 <br><br>
이마에 하는 Kiss는<br>
우정을 의미하고<br>
감은 눈 위에 하는 입맞춤은<br>
감사의 Kiss<br>
코 끝에 하는 Kiss는<br>
당신에게 행운이 함께 하길빈다는 뜻<br>
볼에 하는 Kiss는<br>
반가움을 뜻하고<br>
입술에 하는 것은<br>
사랑의 Kiss<br></font></marquee>
결과보기

 



키스의 의미



이마에 하는 Kiss는

우정을 의미하고

감은 눈 위에 하는 입맞춤은

감사의 Kiss

코 끝에 하는 Kiss는

당신에게 행운이 함께 하길빈다는 뜻

볼에 하는 Kiss는

반가움을 뜻하고

입술에 하는 것은

사랑의 Kiss

이밖에 글자의 크기를 지정하는게
여러가지 있지만
이것만 알아도 충분할것입니다
다음은 문단 정열에서 다시 뵙죠
아름다운글을 올려보세요
안녕히....



위로가기 ♠



Copyright 2001 Lee Yang Ho,Inc. All right reserved.
For more Information,mail to dimmerm@hanmail.net

그림자 글씨

<span style="font-weight:none; color:#ffcc66; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=orange,direction=135)"> 오렌지색 그림 자 글씨
오렌지색 그림자 글씨

<span style="font-weight:none; color:#AA8FBE; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=660099,direction=135)"> 보라색 그림자 글씨
보라색 그림자 글씨

<span style="font-weight:none; color:#FF9292; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=red,direction=135)">빨간색 그림자 글씨
빨간색 그림자 글씨

<span style="font-weight:none; color:#FA9BFE; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=magenta,direction=135)"> 핑크색 그림자 글씨
핑크색 그림자 글씨

<span style="font-weight:none; color:#51E179; width:100%; height: 20; font-size: 25pt; Filter: shadow(color=green,direction=135)"> 녹색 그림자 글씨
녹색 그림자 글씨

파 스텔 글씨

<DIV style="width:320; height:50; font-size:20pt; filter:glow(color=red, strength=8)">너랑나랑


너랑나랑

<DIV style="width:320; height:50; font-size:20pt; filter:glow(color=blue, strength=8)">너랑나랑


너랑나랑

<DIV style="width:320; height:50; font-size:20pt; filter:glow(color=pink, strength=8)">너랑나랑


너랑나랑

<span style=color:ffffff;filter:glow(color=#89E185);height:0px><font face= 고딕체 size=6>숨박꼭질
숨박꼭질

<span style=color:ffffff;filter:glow(color=ff99ff);height:0px><font face=고딕 체 size=6>숨박꼭질
숨박꼭질

바탕글씨 예제

<SPAN style=font:15pt휴먼엽서체;color:white;background-color=green> 녹색 바탕
녹색 바탕

<SPAN style=font:15pt휴먼엽서체;color:white;background-color=red>빨간 바탕
빨간 바탕

글씨체 및 색상예제

<font size=4 color=magente face=휴먼엽서체> 예쁜핑크

<font size=4 color=red face=샘물체> 예쁜빨강

<font size=4 color=blue face=매직체> 예쁜파랑

<font size=4 color=orange face=바탕체> 예쁜오렌지

<font size=4 color=break face=궁서체> 투명한녹색

<font size=4 color=663399 face=엽서체> 예쁜보라

<font size=4 color=redblue face=궁서체>연한 파란색

<font size=4 color=bluesky face=휴먼매직체> 연한녹색

<font size=4 color=silver face=고딕체> 예쁜은색

<font size=4 color=339933 face=굴림체> 예쁜녹색

marquee태그

기본속성들< /b> scrollamount 빠르기지정.(숫자가 높을수록 빨라집니다) scrolldelay 흔들리는 속성 direction 방향설정(left,right,up,down) loop 숫자지정(예:loop="3" 을 지정할경우 3번 실행) width 가로지정 height 높이지정

< marquee> 초간편마퀴</marquee> 초간편마퀴
마퀴의 사이즈 조정< marquee width="가로" height="세로">
마퀴의 스크롤방향 지정
<marquee direction="스크롤방향">

<marquee direction="right">오른쪽으로 움직임
오른쪽으로 움직임

<marquee direction="left">왼쪽으로 움직임
왼쪽으로 움직임

<marquee behavior="alternate">좌우로 움직임
좌우로 움직임

<marquee behavior="alternate" scrollamount="1000">좌우로 빠 르게
좌우로 빠르게

<marquee direction="up" scrolldelay="200">위로 올라감
위로 올라감

<marquee direction="down" scrolldelay="200">아래로 내려감
아래로 내려감

<marquee behavior="alternate" direction="up">두개이상 적용
두개이상 적용

<marquee behavior=alternate width=30>@^.^@) 도리도리~~깍꿍!

( @^.^@) 도리도리~~깍꿍!

<marquee direction=up height=40 behavior=alternate>)점프!점 프!에구에구~힘뎌~@

점프!점프!에구에구~힘뎌~@)

< marquee> WELCOME to 사랑과인생☆***< /marquee> WELCOME to 사랑과인생☆***

< MARQUEE behavior="alternate"> WELCOME to 사랑과인생☆* **</marquee> WELCOME to 사랑과인생☆***

<MARQUEE scrollAmount="1">WELCOME to 사랑과인생☆** *< /marquee> 천천히 WELCOME to 사랑과인생☆***

< MARQUEE scrollDelay="500">WELCOME to 사랑과인생☆*** < /marquee> 기계처럼 WELCOME to 사랑과인생☆***

< marquee> ″\@_ < /marquee> 달팽 이 ″\@_

<marquee width="300">←♡--< {> </marquee> 활쏘기
←♡- -<{>


글자크기 태그

<font size=7> 큰 글자
큰글자

<font size=6> 큰 글자
큰글자

<font size=5> 과수원 길
과수원 길

<font size=4> 과수원 길
과수원 길

<font size=3> 작아요
작아요

<font size=2> 작아요
작아요

<font size=1> 작아요
작아요

엄청 큰 글씨

<font style = font-size:150pt>사랑
사랑

글씨색상 태그

color는 코드나 영 어로만 기입하세요.

<font color="458B74">초록
초록

<font color="FFD700">노랑
노랑

<font color="red"> 빨강
빨강

<font color="blue"> 파랑
파랑

<font color="FF4500">주황
주황

<font color="FFC0CB">분홍
분홍

<font color="#FFFF00"> 노랑
노랑

글자변형 태그

<b>진하게 </b>
진하게

<i>이탤릭체 </i>
이탤릭체

<sup>위첨자 </sup>
위첨자

<sub>아래첨자 </sub>
아래첨자

<u>밑줄긋기 </u>
밑줄긋기

<center>중앙정렬</center>

<p>단락바꿈</p>

<br>단락바꿈 (종료태그 없음)

글자모양 태그

<font face="돋움체">돋움체
돋움체

<font face="바탕체">바탕체
바탕체

<font face="굴림체">굴림체
굴림체

<font face="궁서체">궁서체
궁서체

<font face="고딕체">고딕체
고딕체



<hr size=5, width=250 align=center>


<hr size=3, width=50% align=left noshade>



HTML

<html> HTML 문서의 시작과 끝을 나타냅니다.

HEAD

<head> HTML 문서의 머리말 부분에 해당합니다.

BODY

<body> HTML 문서의 실제적인 내용이 들어가는 부분으 로 본문에 해당하며 화면에 곧바로 나타나게 되는 부분이므로, head 태그가 끝난후에 지정해 줍 니다.

TITLE

<title> HTML 문서의 제목을 나타냅니다.

head 사이에 넣습니다.

배경그림 바꾸기

<body background="배경그림의 주소">

구름배경을 넣는다면 칼라만 바꾸면 됩니 다.

이미지 태그

<img src="그림주소">

이미지에 마우스 대면 내용 나오게 하기
<img src="그림주소"border="0"alt="내용">