키스맥 - html강좌 매킨토시 전문 웹 매거진 웹진

  + 파일메이커 기초편
  + 4th Dimension
  + 리얼베이직
  + OS X 10.3
  + 홈페이지 만들기
  + 포토샵 강좌
  + 디카 완전정복
  + 실무로 배우는 Quark
  + MLayout
  + iPod 강좌
  + html 강좌
  + 간단매뉴얼&팁
  + 5세대 iPod 강좌
  + iTunes 한 컷 강좌
  + iPod 한컷강좌
            


4회. 글꼴관련 태그를 익히자


이번 시간부터는 차근차근 태그를 익혀나가겠다. 먼저 가장 기본적인 글꼴 표현방법에 대해 알아보자.
지난시간에 실습했던것 처럼 서버에 저장하여 확인해보겠다. 파일명은 font.html로 하였고 index.html과 같은 위치에 저장하였으며, 웹브라우저로 불러들일때 주소는 "계정/font.html"이 된다.
(예 : http://myhome.naver.com/kissmacftp/font.html)


html은 스페이스바로 아무리 공백을 표현하려해도 단 한칸만 공백이 표시될뿐 나머지는 무시된다.공백표현은 특수문자로 & nbsp;를 이용해 원하는 칸만큼 써 넣으면 된다.


(하늘색으로 칠해진 곳은 공백을 표현하기 위해 임의로 색을 입힌것이다.)


다음 줄로 넘어가려면,br을 사용한다. br은 단지 줄을 바꿀뿐이고, pre는 사용자가 입력한대로 공백이나 줄바꿈이 표현된다는 점에서 전혀 다른 용도이지만, 줄바꿈할때 많이 쓰이는 방법이기도하다. 지난시간에 잠깐 언급했듯 br은 한번 써주면 다음줄로 넘어가고 그 후에 닫음 태그를 쓰지 않는다.

pre태그는 html에디터에서 사용한 글꼴까지도 표현이 된것을 볼 수 있다. 필요에 따라 적절히 사용하도록 하자.


H1~H6태그는 제목을 표시할때 사용하여 주의를 집중시키는 효과를 지니며 뒤의 숫자가 커질수록 제목은 작아진다. 아래와 같이 타이핑한 후 자신의 ftp에 업로드하여 웹브라우저로 확인해보자.

(오른쪽의 녹색글자는 우리가 위에서 타이핑한 태그들을 보기편하라고 일부러 붙여놓은 이미지일뿐, 실제 웹브라우저상으로는 확인할 수 없다.)


폰트 태그로는 글자크기(size)를 조절하고 색상(color)을 변경할 수 있다.또한 사용하고자 하는 글꼴(face)도 여기에서 설정해줄 수 있다.

위의 H와는 반대로 size가 크면 글자 크기가 커지며, color값은 16진법, 컬러명 모두 가능하다.


html을 사용하다 보면 "" 혹은 ""을 표현하고 싶을때가 있다. 그러나 웹브라우저는 의 뒷부분, 의 앞부분을 태그로 인식하기 때문에 원치않는 결과가 출력된다. 이럴땐 html에서 특수문자로 처리하여 태그가 아님을 표현할수있는 방법이 있다.




이번 시간에 알아본 태그들도 유용하고 항상 쓰이는 것들이므로 눈으로만 훑어보고 '그렇구나' 하면서 넘기지 말고 하나하나 타이핑해서 몸에 익히도록 하자. 다음시간에는 이미지 삽입방법, 정렬방법에 대해 알아보겠다.



다음글 - 5회. 이미지 태그
현재글 - 4회. 글꼴관련 태그를 익히자
이전글 - 3회. html 기본문법
 번호 제 목등록일      
  8  8회. 테이블 -1- (1)  2004-09-17  
  7  7회. 링크 (0)  2004-09-10  
  6  6회. 동영상 태그 (0)  2004-08-27  
  5  5회. 이미지 태그 (0)  2004-08-20  
  4  4회. 글꼴관련 태그를 익히자 (0)  2004-08-13  
  3  3회. html 기본문법 (0)  2004-08-03  
  2  2회. ftp와 파일 업로드 (0)  2004-07-23  
  1  1회. html이란 (0)  2004-07-16  
 
1
 
이름 제목 내용


Copyright by kissmac