홈페이지 상에서 글자는 간격을 아무리 많이 띄우더라도 결국 하나의 간격으로 밖에 처리되지 않는다. 따라서 글자사이에
공백을 만드는 방법이 필요하게 되었다. 따라서 몇가지 편법을 이용하여 글자와 글자사이에 공백을 넣어 내가 원하는
곳에 글자를 위치시키는 글자레이아웃의 기초를 익힐 수 있을것이다.
바탕색과
같은 색의 글자 사용하기
만약 바탕색과 같은 색으로 글자를 지정하게 되면 방문객은 같은 색이기 때문에 글자를 구분할 수없다는 점에 착안한
방법이다. 예를 들어 만일 홈페이지의 배경색이 하얀색일 경우 하얀색의 글자를 사용하면 아무리 많은 글자를 쳐넣더라도
결국 여백처럼 보인다. 여기서 주의해야 할 점은 반드시 배경의 색상과 일치를 시켜야 한다는 점이다.만일 배경이
파랑색이면 글자도 파랑색이 되어야 글자가 보이지 않게 된다. 하지만 단점으로 마우스로 영력선택시 입력시킨 글자가
보여 같은 색을 사용하여 공백을 만들었다는 것이 탄로가 난다.^^
태그
사용하기
이 태그를 사용하면 공백이 생긴다. 이 태그를 반복해서 사용함으로써 원하는 크기의 공백을 만들 수 있다. 주의할
점은 반드시 꺽쇠 표시와 함께 사용하지 말라는 것이다.
투명
GIF 넣기
한 픽셀짜리 투명한 GIF화일을 이용한 공백만들기는 두가지 방법이 있다.
첫째로 <IMG>태그에 WIDTH와 HEIGHT 속성을 이용하여 원하는 가로나 세로 크기 만큼의 GIF이미지를
늘린다. 이것은 투명이미지는 바탕색 또는 바탕그림을 그래도 보여주기 때문에 전체가 투명인 이미지를 삽입하면
절대 보여지지 않게 된다는 점에 착안한 방법이다. 따라서 가장 작은 단위의 투명이미지를 넣고 그 옆에 또는
아래에 원하는 글자를 놓으면 그 만큼의 공백이 생기게 되는 것이다. 공백의 크기는 그림의 크기나 높이를 변화시키면
마음대로 원하는 만큼의 공백을 만들 수 있는다점이 꽤 인상적인 방법이며 가장 많이 사용하는 방법이다. 따라서
1X1 단위의 투명이미지 하나쯤은 구비하여 원할때마다 사용하면 그림 이미지의 용량이 적은 관계로 로딩속도에
구여받지 않고 공백을 조절 해 줄 수있다. 줄 바꾸기에서도 이와 같이 응용할 수 있다. 재미있는 방법이라 추천하는
방법이다.
두번째로 방법은 <IMG>태그에 HSPACE나 VSPACE를 이용하는 것이다. 이 속성들은 이미지 주변에
수평 혹은 수직적 공간을 비워주게 (픽셀단위)된다는점에 착안한 방법이다. 차라리 투명이미지를 이용하는게 편할지도
모르겠다. hspace나 vspace는 자주 사용하지 않는 태그로 그 사용가치가 떨어지기 때문이다.
|
|
