|
<font size="2" color="red" face="돋움"> 안녕하세요 </font> |
size="2" 부분은 글씨크기를 2로 지정한다는 뜻입니다.
color="red" 부분은 글씨색깔을 붉은색으로 지정한다는 뜻입니다.
face="돋움" 부분은 글씨체를 돋움으로 지정한다는 뜻이지요.
<font ... 는 폰트태그의 시작을 말하고 반대로 </font> 는 폰트태그의 끝을 말합니다.
그러므로 위와 마찬가지로<font>와</font>의 사이인 안녕하세요 부분이 실제 태그가 적용되는 부분이지요.
그럼 각 속성에 대해 간단히 알아보겠습니다.
a) 색상
사용소스 |
적용결과 |
<font color="red">안녕하세요</font> |
안녕하세요 |
<font color="green">안녕하세요</font> |
안녕하세요 |
<font color="#ff0000">안녕하세요</font> |
안녕하세요 |
<font color="#008000">안녕하세요</font> |
안녕하세요 |
위와 같이 색상은 red, green, blue 와 같이 영어로 입력해도 되고,
#ff0000 #008000 #0000cc 와 같이 색상코드를 입력해도 됩니다.
하지만 색상코드 쪽이 색이 더 다양함은 두말할 필요도 없겠죠 ^^
b) 크기
사용소스 |
적용결과 |
<font size="1">안녕하세요</font> |
안녕하세요 |
<font size="2">안녕하세요</font> |
안녕하세요 |
<font size="3">안녕하세요</font> |
안녕하세요 |
<font size="4">안녕하세요</font> |
안녕하세요 |
(size 2 는 아래에 나오는 span 태그에서 10pt와 동일하며 12px와 동일합니다)
c) 글씨체
사용소스 적용결과 <font face="돋움">안녕하세요</font> 안녕하세요 <font face="굴림">안녕하세요</font> 안녕하세요 <font face="바탕">안녕하세요</font> 안녕하세요
글씨체는 물론 궁서체 등의 다른 글씨체로 설정도 가능합니다.
2) <span> 태그
<font> 태그 외에 <span> 태그로도 글씨를 표현할 수 있습니다.
기본적으로 <font>태그 만으로도 표현에 거의 무리가 없지만, 나중에라도 <span>태그는
반드시 알아두어야 하는 태그입니다.
본 강좌에서는 좀더 다양한 글씨표현(글씨뿐만이 아닌)이 가능하다는 것 정도만 알고 계시면 되겠습니다.
(굳이 아직은 배울 필요가 없겠다 싶으신 분은 일단 "아직까지는!" 이런게 있구나 정도만 알아두어도 무방합니다.)
그럼 <span>을 이용해 글씨를 표현한 예제와 함께 간단한 부가설명을 하겠습니다.
사용소스 |
적용결과 |
<span style="FONT-FAMILY: Batang">뿌잉</span> |
뿌잉 |
<span style="FONT-FAMILY: 바탕">뿌잉</span> |
뿌잉 |
<span style="COLOR: #0075c8">뿌잉</span> |
뿌잉 |
<span style="COLOR: red">뿌잉</span> |
뿌잉 |
<span style="FONT-SIZE: 12px">뿌잉</span> |
뿌잉 |
<span style="FONT-SIZE: 16px">뿌잉</span> |
뿌잉 |
<span style="FONT-FAMILY: 돋움; COLOR: #0000cc; FONT-SIZE: 12px">뿌잉</span> |
뿌잉 |
a) font-family 는 <font>태그의 face속성과 동일합니다, "바탕" 으로 해도 되고 "Batang" 으로 영어로 입력해도 됩니다.
b) font-size 또한 <font> 태그의 size 속성과 동일합니다. 단, 크기의 의미가 다른데
<font> 태그의 size=2 와 <span>태그의 12px, 10pt 는 동일한 크기입니다.
c) color 또한 <font>태그의 color 속성과 마찬가지로 컬러색을 영어명으로 (blue)해도 되고 색상코드로 (#0000cc)해도 됩니다.