오궁 가족들이 쓴 글들을 모아둔 곳입니다.

 로그인

태그 강좌(5) - 글씨 태그
BOF   2005-01-17 18:35:57, 조회 : 1,571, 추천 : 56

태그강좌(5)

이번에는 글씨 태그입니다.

글씨태그는 사실 태그의 핵심이라고 할 수 있습니다. HTML문서를 다루는데 있어서 글씨를 어떻게 처리하느냐가 가장 중요합니다. 그래서 그 태크닉이 상당히 여러 가지인데 우선 쉬운 것부터 차근차근 배워 보도록 하겠습니다.

글자 태그는 몇 개의 단락으로 나누어야 할 것 같습니다.
먼저 이번 장에서는 글자의 크기와 모양, 색깔을 바꾸는 방법에 대해 말씀 드리겠습니다.

기본적으로 글자를 처리하는 태그는 내용입니다.
여기에서 font 뒤에 붙는 명령어의 종류에 따라서 '내용' 부분의 모양이 바뀌게 됩니다.
font 명령은 대부분의 태그 명령어처럼 시작과 끝이 있습니다. 시작은 이고 끝은 입니다. 따라서 이 두 개의 명령어 사이에 있는 내용은 모두 이 명령어의 지시대로 글자의 모양을 나타내 줍니다.

예를 들어
필우 동호회게시판

위와 같이 적어 넣는다면 그 결과는

필우동호회게시판

위와 같이 된다 이겁니다. 즉 'feel AV 동호회'라는 단어는 font 명령어의 명령에 따라 모양, 크기, 색깔이 바뀌었지만 게시판이라는 단어는 그 영향을 안받아서 기본값으로 나타나는 거지요.

자 그럼 어떤 명령어들이 있는지 한 번 볼까요?

1) 글자의 크기
글자의 크기를 나타내는 명령어는 size입니다. 그야말로 크기이죠. size="숫자" 라고 적으면 해당 숫자의 크기로 글씨가 나타납니다. 숫자가 커질수록 글자 모양도 커집니다.
한 번 볼까요?

필우 동호회 게시판 필우 동호회 게시판
필우 동호회 게시판
필우 동호회 게시판
필우 동호회 게시판
필우 동호회 게시판
필우 동호회 게시판
필우 동호회 게시판

필우 동호회 게시판
필우 동호회 게시판

필우 동호회 게시판

필우 동호회 게시판

필우 동호회 게시판


필우 동호회 게시판

요렇게 된다 이거지요.

 

글씨의 크기를 조절하는 데는 또 다른 방법이 있습니다. 스타일 명령어를 사용해서 글씨의 크기를 포인트 단위로 지정해 주는 것인데 아래와 같이 사용합니다.

<span style="font-size:8pt;">필우 동호회 게시판필우 동호회 게시판

<span style="font-size:10pt;">필우 동호회 게시판필우 동호회 게시판

<span style="font-size:12pt;">필우 동호회 게시판필우 동호회 게시판

<span style="font-size:14pt;">필우 동호회 게시판필우 동호회 게시판

<span style="font-size:18pt;">필우 동호회 게시판

필우 동호회 게시판

<span style="font-size:24pt;">필우 동호회 게시판

필우 동호회 게시판

<span style="font-size:36pt;">필우 동호회 게시판

필우 동호회 게시판

이 명령어는 글씨의 크기를 포인트 단위로 지정해 주는 형태를 취하고 있는데,  명령어를 사용하는 것과 명령어를 사용하는 것은 기본적으로 거의 같은 결과를 나타냅니다. 단지 크기를 나타내는 단위가 다를 뿐입니다. 위에서 두가지 명령어를 사용할 경우 보여지는 글자의 크기를 동일하게 배열해 두었습니다. 잘 살펴 보시면 같은 사이즈의 글씨를 얻을 수 있는 단위가 어떻게 대응하는지 알 수 있을 겁니다. 즉 font size가 1인 글씨는 font의 크기가 8포인트인 글씨와 같다는 것을 알 수 있습니다. 그렇게 보면 폰트 사이즈와 포인트의 상관 관계는 1-8pt, 2-10pt, 3-12pt, 4-14pt, 5-18pt, 6-24pt, 7-36pt와 같습니다.

그런데 포인트 시스템은 폰트 사이즈와 큰 차이점이 하나 있습니다. 그것은 바로 폰트 사이즈는 가장 큰 사이즈의 글이 '7'이고 그 이상의 숫자를 적어 넣더라도 사이즈 '7'의 글씨로밖에 보이지 않지만 포인트 시스템은 얼마든지 큰 글씨도 가능하다는 것입니다. 단지

아래와 같이 아주 큰 글씨도 가능합니다.


<
span style="font-size:150pt;">필우!!









필우!!



 

위와 같이 font-size에 적어주는 숫자에 따라 얼마든지 큰 글씨도 가능하다는 것입니다.

 

글씨의 크기를 바꾸는 데는 또 다른 방법도 있습니다.
내용라고 하는 방법이 있습니다. h는 header 즉 제목이란 뜻인데, 제목 글자로 사용할 때 이용하는 방법인데 이 것을 이용해서 글씨의 크기를 바꾸어 줄 수 있습니다.

그런데 size로 지정해 줄 경우는 font명령어의 조건에 속하기 때문에 반드시 내용의 형식을 갖추어야 하지만 h는 그 자체로 하나의 태그이므로 내용라고 적으면 됩니다. 그리고 h를 사용할 경우에는 숫자가 작을수록 크기가 커집니다. 즉 h1이 가장 큰 글씨체입니다.

예를 한 번 볼까요?

사랑해!

사랑해!

사랑해!

사랑해!

사랑해!

사랑해!

사랑해!

사랑해!

사랑해!
사랑해!

사랑해!
사랑해!

요렇게 됩니다. 손가락 바로 옆에 글자가 나타나지 않고 다음 줄에 글자가 나타나지요? 태그는 제목에 사용하는 태그이기 때문에 같은 줄에서 내용을 입력하더라도 저절로 줄바꿈이 됩니다. enter 키를 치고 입력하는 것과 동일하게 된다는 것이고 다음에 설명드리겠지만

태그를 앞에 덧붙힌 것과 동일한 효과가 나옵니다.


 

2) 글자의 모양
글자체를 바꾸려면 어떻게 할까요?
글자체를 나타내는 태그 명령어는 face입니다. 얼굴이 사람의 모양을 결정짓듯 글자의 모양을 나타내는 명령어는 face입니다.
face="글자체" 라고 적어 넣으면 해당하는 글자체로 글자가 보입니다.

한 번 볼까요?

필우 동호회 게시판

필우 동호회 게시판


필우 동호회 게시판

필우 동호회 게시판


필우 동호회 게시판

필우 동호회 게시판


필우 동호회 게시판

필우 동호회 게시판


필우 동호회 게시판

필우 동호회 게시판

요렇게 된다 이겁니다.
그런데 한 가지 유의할 것이 있습니다. 특별한 글씨체를 적용시켜도 보는 사람이 가지고 있는 컴퓨터에 해당 글씨체의 폰트가 없으면 그사람은 그 글씨체로 보지 못하고 그저 기본 글씨체로밖에 볼 수 없습니다. 따라서 너무 특별한 글씨체를 사용하게 되면 보는 사람이 그 효과를 느끼지 못할 수도 있다는 것이죠.

3) 글자의 색깔
글자의 색깔을 지정하는 태그 명령어는 color입니다. color="색깔명"을 집어 넣어 주면 해당 색깔로 색이 바뀝니다.
한 번 볼까요?

필우 동호회 게시판

필우 동호회 게시판

필우 동호회 게시판

필우 동호회 게시판

필우 동호회 게시판

필우 동호회 게시판

필우 동호회 게시판

필우 동호회 게시판

필우 동호회 게시판

필우 동호회 게시판

요렇게 됩니다.
그리고 색깔란에 색깔의 이름을 직접 적어 넣어도 되지만 해당 색깔의 번호를 적어 넣어도 됩니다. 웹문서상에 사용하는 색깔은 모두 번호를 붙혀 표시할 수 있는데 그 번호를 직접 적어 넣으면 좀더 다양한 색깔을 표현할 수 있습니다.
예를 들면
필우 동호회 게시판

필우 동호회 게시판

요렇게 할 수 있다는 것이죠.
이 색상표는 웹에디터 프로그램이나 포토샵 같은데서도 구할 수 있고 인터넷 상의 태그 관련 사이트에서도 구할 수 있습니다.
합창단 홈페이지에도 하나 만들어 놓으면 편리하게 쓸 수도 있겠군요.

4) CSS의 활용
CSS는 Cascading Style Sheet의 약자입니다. CSS는 웹 페이지를 구성하는 모든 요소들을 제어할 수 있어서 좀 더 자유롭게 세련된 페이지를 디자인할 수 있습니다. 조금 어려운 개념이고 저도 잘 모릅니다만 이 CSS명령어들을 이용하면 좀 더 다양한 효과를 낼 수 있습니다. 이 CSS는 원래 문서의 스타일을 규정해 주기 위해서 문서의 첫머리에 붙습니다만 이 명령어를 문서 내의 특정한 문자에 적용할 수 있습니다. 그럴 때 사용하는 명령어가  

나  과 같은 명령어입니다. 그 뒤에는 style= 이란 단어를 써서 해당 내용의 효과를 지정해 주게 됩니다. 약간 복잡한데 아래의 예제들을 한 번 보십시오.

 

테두리 글씨

이쁜글씨
이쁜글씨

이쁜글씨
이쁜글씨

이쁜글씨
이쁜글씨

이쁜글씨
이쁜글씨

이쁜글씨
이쁜글씨
파스텔 글씨

이쁜가여??

이쁜가여??


이쁜가여??

이쁜가여??

이쁜가여??

이쁜가여??



테두리와 파스텔의 중간 정도 되는 것 같네요

반가워요!
반가워요!

반가워요!
반가워요!

휴먼엽서체 바탕글씨

빨간 바탕
빨간 바탕

녹색 바탕
녹색 바탕


그림자 글씨

<SPAN style="FONT-SIZE: 12pt; FILTER: shadow(color=red,direction=135); WIDTH: 100%; COLOR: white; HEIGHT: 20px">빨간색 그림자 글씨
빨간색 그림자 글씨

녹색 그림자 글씨
녹색 그림자 글씨

보라색 그림자 글씨
보라색 그림자 글씨

핑크색 그림자 글씨
핑크색 그림자 글씨

오렌지색 그림자 글씨
오렌지색 그림자 글씨

겹치는 글씨

필우 동호회 게시판

필우 동호회 게시판

필우 동호회 게시판

필우 동호회 게시판



글씨를 투명하게...

필우 동호회 게시판

필우 동호회 게시판



글자가 뒤집히도록 해 볼까요??

돌아버리겠네~

돌아버리겠네~



다양한 글씨체와 색깔을 한 번 보시죠


핑크

빨간색

파란색

금색

오렌지색

연한녹색

투명한녹색

은색

보라색

녹색

연한 파란색

 

어떻습니까?

약간 어렵습니까? 기본적인 법칙만 잘 알고 있으면 별로 어려울 것은 없습니다.
CSS를 사용하는

또는이 약간 어려울 것입니다. 일단은 마음에 드는 명령어가 있으면 복사해서 시작과 끝 명령어 사이에 있는 내용만 변형시켜서 사용하시고 익숙해 지면 여러 가지로 변형해 보십시오.



  수정하기   추천하기   목록보기

번호 제목 작성자 작성일   추천 조회
215  제임스 이야기    BOF 2009/01/13 145 2119
214  부석사의 소국(小菊)    BOF 2008/11/17 176 2189
213  오궁 부부의 일본 여행기(2)  [2]  BOF 2008/09/12 136 2416
212  오궁 부부의 일본 여행기(1)  [2]  BOF 2008/09/11 133 1884
211  영주의 벚꽃    BOF 2008/04/21 157 1878
210  광양 매화 마을 꽃놀이  [1]  BOF 2008/04/17 227 2727
209  늦게 올리는 여름 휴가 사진 여행기(6) - 시드니 관광  [2]  BOF 2008/02/16 174 2295
208  늦게 올리는 여름 휴가 사진 여행기(5) - 헌터벨리,뉴카슬  [1]  BOF 2008/02/16 147 1998
207  늦게 올리는 여름 휴가 사진 여행기(4) - 헌터벨리  [1]  BOF 2008/02/15 173 2558
206  늦게 올리는 여름 휴가 사진 여행기(3) - 포트 스티븐스    BOF 2008/02/15 130 1964
205  늦게 올리는 여름 휴가 사진 여행기(2) - 뉴카슬 주변 배회하기  [2]  BOF 2008/02/13 135 1845
204  늦게 올리는 여름 휴가 사진 여행기(1) - 출발  [1]  BOF 2008/02/12 133 1946
203  가을 사진 몇 장 더...    BOF 2007/11/27 116 1727
202  가을이 깊어가는 부석사    BOF 2007/11/26 128 1749
201  하늘로 올라간 천상의 목소리    BOF 2007/09/07 201 1948
200  얼굴 큰 가족    BOF 2007/07/06 115 1654
199  최근의 재한이 집 사진들    BOF 2007/07/06 95 1515
198  여름 부석사, 그 넉넉함으로...    BOF 2007/06/25 102 1752
197  첨성대 야경    BOF 2007/04/24 104 1819
196  주말 형섭이 학교 방문    BOF 2007/04/11 106 3086
195  형섭이의 첫 귀가  [1]  BOF 2007/03/27 126 2784
194  민사고 입학식 참관기  [3]  BOF 2007/03/06 185 6582
193  오궁 패밀리의 홍콩 여행기 (3)  [1]  BOF 2007/01/05 107 2036
192  형섭이와 기타  [2]  BOF 2007/01/05 157 2054
191  홍콩 여행기 (2)  [1]  BOF 2007/01/03 103 1702
190  홍콩 여행기 (1)  [1]  BOF 2007/01/02 101 1707
189  민사고 학부모 간담회  [4]  BOF 2006/12/15 156 4936
188  윤섭이의 2006 GLPS 여름 캠프    BOF 2006/12/15 112 2617
187  눈이 왔네요 - 요즘 오궁 가족 소식    BOF 2006/11/07 169 1884
186  백암 나들이    BOF 2006/05/24 84 1004
185  윤섭이의 피아노 학원 발표회    BOF 2006/05/16 90 1410
184  주말 대게 먹기    BOF 2006/05/16 83 1630
183  오궁 가족 무비데이 '게이샤의 추억'    BOF 2006/05/05 81 1307
182  오궁 패밀리의 크리스마스 보내기    BOF 2006/02/21 141 1395
181  호주 여름 휴가기(6) - 마지막 날    BOF 2005/10/06 82 1089
180  호주 여름 휴가기(5) - 뉴카슬(Newcastle), 둘째날    BOF 2005/10/05 69 1030
179  호주 여름 휴가기(4) - 뉴카슬(Newcastle), 첫째날    BOF 2005/10/04 83 1129
178      소감: 후훗 ^^;    노윤섭 2005/10/04 119 975
177  호주 여름 휴가기(3) - 헌터 벨리(Hunter Valley)    BOF 2005/09/29 70 1034
176  호주 여름 휴가기(2) - 포트 맥쿼리(Port Macquarie)    BOF 2005/09/27 82 1138
175      소감: 호주 여름 휴가기(2) - 포트 맥쿼리(Port Macquarie)    crystal 2005/09/28 158 1134
174  호주 여름 휴가기(1)    BOF 2005/09/23 94 991
173      소감: 호주가 벌써 그리워지네요...    노윤섭 2005/09/24 143 1012
172  4자성어로 풀어본 17기 동기모임    BOF 2005/09/07 93 2138
171  잘된건지, 못된건지......    BOF 2005/07/15 135 1246
170  요즘 이런 것 드셔보셨는지?    BOF 2005/07/14 84 1305
169  제임스 가족과 함께 한 주말 이야기(2)    BOF 2005/07/08 76 1048
168  제임스 가족과 함께 한 주말 이야기(1)    BOF 2005/07/08 69 1075
167  주말에 비가 안와야 할텐데......    BOF 2005/06/30 149 1221
166  양평서 온 넥타이    BOF 2005/05/18 62 1356
165  오궁 가족 답사기 - 수원 화성    BOF 2005/04/22 71 1069
164  재흔이 돌잔치    BOF 2005/04/08 66 1399
163  광선총 오프    BOF 2005/03/29 80 1226
162  형섭이 겨울 캠프 면회 (2)    BOF 2005/01/24 121 1312
161  형섭이 겨울 캠프 면회 (1)    BOF 2005/01/24 66 1005
160  PA comment(3) from GLPS    BOF 2005/01/21 81 1327
159  형섭이 겨울 캠프 사진들(5)    BOF 2005/01/20 82 1153
158      Re: 형섭이 겨울 캠프 사진들(5)    큰외삼촌 2005/01/21 61 1037
157  Debate Comments from GLPS    BOF 2005/01/17 91 1102
156  Advisor letter from GLPS    BOF 2005/01/17 88 1200
155  PA comment(2) from GLPS  [1]  BOF 2005/01/17 80 1189
154  PA comment(1) from GLPS  [2]  BOF 2005/01/17 71 1288
153  형섭이 겨울 캠프 사진들(4)    BOF 2005/01/17 81 1099
152  형섭이 겨울 캠프 사진들(3)    BOF 2005/01/13 96 1120
151  형섭이 겨울 캠프 사진들(2)    BOF 2005/01/07 69 1237
150  형섭이 겨울 캠프 사진들(1)    BOF 2005/01/03 76 1262
149  백암 나들이    BOF 2006/05/24 96 1002
148  윤섭이의 피아노 학원 발표회    BOF 2006/05/16 89 1133
147  주말 대게 먹기    BOF 2006/05/16 95 1444
146  오궁 가족 무비데이 '게이샤의 추억'    BOF 2006/05/05 61 1476
145  오궁 패밀리의 크리스마스 보내기    BOF 2006/02/21 119 1075
144  호주 여름 휴가기(6) - 마지막 날    BOF 2005/10/06 79 1172
143  호주 여름 휴가기(5) - 뉴카슬(Newcastle), 둘째날    BOF 2005/10/05 84 1050
142  호주 여름 휴가기(4) - 뉴카슬(Newcastle), 첫째날    BOF 2005/10/04 82 1028
141      소감: 후훗 ^^;    노윤섭 2005/10/04 142 1159
140  호주 여름 휴가기(3) - 헌터 벨리(Hunter Valley)    BOF 2005/09/29 85 1139
139  호주 여름 휴가기(2) - 포트 맥쿼리(Port Macquarie)    BOF 2005/09/27 81 1159
138      소감: 호주 여름 휴가기(2) - 포트 맥쿼리(Port Macquarie)    crystal 2005/09/28 140 1181
137  호주 여름 휴가기(1)    BOF 2005/09/23 95 1056
136      소감: 호주가 벌써 그리워지네요...    노윤섭 2005/09/24 135 1053
135  4자성어로 풀어본 17기 동기모임    BOF 2005/09/07 80 1627
134  잘된건지, 못된건지......    BOF 2005/07/15 188 1328
133  요즘 이런 것 드셔보셨는지?    BOF 2005/07/14 218 1396
132  제임스 가족과 함께 한 주말 이야기(2)    BOF 2005/07/08 100 1150
131  제임스 가족과 함께 한 주말 이야기(1)    BOF 2005/07/08 79 1032
130  주말에 비가 안와야 할텐데......    BOF 2005/06/30 151 1179
129  양평서 온 넥타이    BOF 2005/05/18 77 1179
128  오궁 가족 답사기 - 수원 화성    BOF 2005/04/22 88 1350
127  재흔이 돌잔치    BOF 2005/04/08 92 1329
126  창원 집들이    BOF 2005/03/29 85 1209
125  광선총 오프    BOF 2005/03/29 89 1215
124  태그 강좌(10) - 맺는말    BOF 2005/01/17 80 1230
123  태그 강좌(9) - RGB 색상표    BOF 2005/01/17 86 1608
122  태그 강좌(8) - 테이블 태그    BOF 2005/01/17 133 1822
121  태그 강좌(7) - HTML 문서와 기본 태그    BOF 2005/01/17 79 1698
120  태그 강좌(6) - 마퀴 태그    BOF 2005/01/17 88 1256
 태그 강좌(5) - 글씨 태그    BOF 2005/01/17 56 1571
118  태그 강좌(4) - 그림태그    BOF 2005/01/17 101 1643
117  태그 강좌(3) - 어디서 연습할까요?    BOF 2005/01/17 87 1258
116  태그 강좌(2) - 음악 태그    BOF 2005/01/17 83 1090

    목록보기   이전페이지   다음페이지 [1] 2 [3][4]
       

Copyright 1999-2024 Zeroboard / skin by zero