글꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가 다르며, 적용되더라도 화면의 보여지는 모습이 다릅니다. 충분한 테스트 후 활용하도록 합니다. [ 글꼴의 굵기 지정 ] font-weight: normal (default value); 글꼴 그룹의 어떤 굵기의 글꼴을 사용할 것인지를 설정합니다. 초기값은 normal(400)이며, 굵은 글꼴은 bold(700) 키워드를 사용합니다. 설정값은 하위 요소로 상속됩니다. 다음은 Verdana 글꼴의 굵기 속성입니다. * normal, bold, 100~900
위와 같이, 일반적인 글꼴 그룹은 9종류의 굵기가 다른 글꼴이 준비되어 있지 않는 경우가 많습니다. 따라서, 일반적으로 100~900까지의 9단계의 굵기 지정보다는, 굵은 글꼴 표현을 위한, bold를 주로 사용합니다. 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다. * lighter, bolder 100~900의 굵기의 범위에서, 현재 굵기(디폴트값 또는 상위 요소에서 상속된 값)보다 각각 한 단계 가는 글꼴, 또는 굵은 글꼴을 지정합니다. [ 글꼴 스타일의 지정 ] font-style: normal (default value); 글꼴 그룹의 표준, 이탤릭, 기울임 글꼴을 지정하는 속성입니다. 설정 값은 하위요소로 상속됩니다. * normal, italic, oblique 글꼴 그룹의 종류에 따라, 이텔릭체 전용, 기울임 전용 글꼴이 디자인되어 있습니다. 해당 글꼴을 사용하도록 지정이 가능합니다. 해당 글꼴이 없는 경우에는 표준 글꼴을 기울인 글꼴이 이용됩니다. 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다. 다음은 Verdana 글꼴의 스타일 속성입니다.
[ 작은 대문자 지정 ] font-variant: normal (default value); 영어 알파벳의 표기방식입니다. 알파벳을 대문자료 표기하되, 소문자 크기로 작게한 종류의 글꼴인 small-caps를 지정할 수 있습니다. 설정 값은 하위 요소로 상속되며, 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다. * normal, small-caps
[ 대소문자 지정 ] text-transform: none (default value); 영어 알파벳의 표기방식입니다. 문장에 있는 단어의 첫글자만을 대문자로 표시하거나, 전체를 대문자 또는 소문자로 표기하게 할 수 있습니다. ID와 같이 대/소문자의 구분입력 단위요소에 사용할 수 있습니다. 설정 값은 하위 요소로 상속되며, 기본값은 none이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다. * none, capitalize, lowercase, uppercase
[ 글꼴 장식 ] text-decoration: none (default value); 글꼴 장식에 대한 속성입니다. 아래 예와 같이, 밑줄이나 윗줄, 취소선을 표시하거나 깜박이게 할 수도 있습니다. 이 속성은 상위 요소로부터 상속되지 않습니다. 다만, 블록 레벨 요소에 대하여 지정한 경우에는 해당 박스 안에 포함되는 인라인 요소에 모두 적용됩니다. 또한, 인라인 요소에 대하여 지정한 경우에는 해당 요소가 생성하는 모든 박스에 대하여 적용됩니다. * none, underline, overline, line-through, blink
위와 같이, blink옵션값은 IE에서는 적용되지 않습니다. (Firefox 2.0에는 적용됩니다) 또한, 첫번재 줄에 사용된 코드는 다음과 같습니다. 즉, 같은 레벨의 요소에는, text-decoration값이 상속되지 않습니다. <li style="text-decoration: none;">text-decoration: none <a href="#">a tag in li tag</a></li> [ 줄 간격 설정 ] line-height: normal (default value); 정확히는, 인라인 요소의 높이를 설정하는 값입니다. 만약 블록 레벨 요소에 값을 지정한 경우에는, 해당 박스에 포함될 인라인 요소 박스의 최소 높이를 지정하는 것이 됩니다. 설정 값은 하위 요소로 상속됩니다. * 인라인 요소에 대한 높이값 표현의 디폴트 값이 IE7과 Firefox2의 차이가 현격하기 때문에, 상위레벨(body, hemtl)에서 픽셀이나 포인트로 결정해 주는 것이 좋습니다.
기본값은 normal이며, 브라우저가 적절한 줄간격을 설정합니다. "실수값+단위 형태"로 지정할 수 있습니다. 전각(em)의 경우는, 해당 글꼴의 줄 간격을 1로 간주하고 퍼센티지(%)는 100%로 간주하고 계산되어 집니다. 즉, 상위레벨의 값을 1(em), 100(%)으로 계산하여 표현합니다. 픽셀(px) 및 포인트(pt)등과 같은 값을 지정할 수도 있습니다. 단, 인라인 레벨의 박스 높이인 만큼 음수값을 지정할 수 없습니다. [ 문자 간격 설정 ] letter-spacing: normal (default value); 글자와 글자의 간격을 설정하는 속성입니다. 주의할 점은 설정하는 값이 자간이 나타내는 것이 아니라, 기본 자간에 설정값이 추가(+)되는 것 입니다. 따라서, line-height와는 달리, letter-spacing값에는 음수값을 지정할 수 있습니다. 설정 값은 하위 요소로 상속됩니다. * 문단 정렬이 좌우 배분(text-align: justify)인 경우에는, 문단 정렬에 우선되어 간격값이 조정됩니다. [ font-family: Verdana, Gulim, Dotum, sans-serif; font-size: 9pt; ] 자간은 글꼴의 종류와 크기에 따라, 웹브라우저의 상이점이 발생합니다. 위 그림의 위의 것은 IE7에서 표현되는 스크린이며, 아래는 Firefox2에서 표현되는 모습입니다. 디폴트 상태(normal)에서는 별다른 차이가 없지만, 전각(em) 포인트(pt)등의 단위에서는 약간의 차이가 눈에 띄입니다. 픽셀(px)단위가 비교적 차이가 없어 보입니다.
[ 단어 간격 설정 ] word-spacing: normal (default value); 공백으로 구분되는 하나의 단어와 단어 사이의 간격을 설정하는 속성입니다. 자간과 마찬가지로 설정하는 값이 단어 간격을 나타내는 것이 아니라, 기본 간격에 설정값이 추가(+)되는 것 입니다. 따라서, line-height와는 달리, word-spacing값에는 음수값을 지정할 수 있습니다. 설정 값은 하위 요소로 상속됩니다. * 문단 정렬이 좌우 배분(text-align: justify)인 경우에는, 문단 정렬에 우선되어 간격값이 조정됩니다. [ font-family: Verdana, Gulim, Dotum, sans-serif; font-size: 9pt; ] 단어 간격 역시, 글꼴의 종류와 크기에 따라, 웹브라우저의 상이점이 발생합니다. 위 그림의 위의 것은 IE7에서 표현되는 스크린이며, 아래는 Firefox2에서 표현되는 모습입니다. 디폴트 상태(normal)에서는 별다른 차이가 없지만, 전각(em) 포인트(pt)등의 단위에서는 약간의 차이가 눈에 띄입니다. 픽셀(px)단위가 비교적 차이가 없어 보입니다.
[ 글꼴 크기의 보정 ] font-size-adjust: none (default value); 현재, IE7은 지원하지 않고 있으며, Firefox 2.0에서는 적용이 되는 속성으로 용도는 아래와 같습니다. 어떠한 이유로(사용자에게 글꼴이 없거나, 요소 하위에 다른 글꼴이 사용되는 등), 요소에 지정된 글꼴이 표시되지 않는 경우, 글꼴 기본 크기의 차이에 따른 이질감을 조정하기 위한 속성입니다. 해당 글꼴(지정한 글꼴) 크기에 대한 소문자 x의 높이의 비율을 지정해 두면, 다른 글꼴이 사용되더라도 소문자 x의 높이가 일정하게 유지되도록 하여 일관성을 유지하게 됩니다. 설정값은 하위요소로 상속됩니다. 아래는, Firefox 2.0에 font-size-adjust를 적용한 예입니다. <div style="font-family: Verdana; font-size: 14pt; font-size-adjust: 0.54;">Verdana 14pt <font style="font-family: 'Times New Roman';">Times New Roman 14pt</font></div> 그림의 위쪽은 font-size-adjust를 적용하지 않은 경우이며, 아래는 0.54값이 적용된 경우입니다.
주의할 점은, 해당 값에 따라 지정된 글꼴(위의 경우 Verdana)도 크기가 보정될 수 있다는 점입니다. 따라서, 충분한 테스트 및 검증을 해 준 후 사용하도록 합니다. 한가지 재미있는 점은, 영문 글꼴을 대표글꼴로 설정하여 사용하는 경우, 한글의 크기가 브라우저에 따라 같지 않은 문제를, 이 속성을 통해 어느정도 보완할 수가 있다는 점이 있습니다. (적어도, IE에서는 적용되지 않기 때문입니다) 위와 같이, 절절한 font-size-adjust값을 주어, 한글 글꼴을 조정해 줄 수 있습니다. 물론, IE에서는 적용되지 않기 때문에, IE에 맞춘 스타일시트에 Firefox의 한글크기 문제가 있는 경우 사용할 수 있습니다.
[ 장평 설정 ] font-stretch: norman (default value); 현재, IE7, Firefox 2.0모두 지원하지 않습니다. 총 9단계의 속성값이 있습니다. ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded이 있으며, 왼쪽에서 오른족으로 갈 수록 폭이 넓어집니다. [출처] CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간|작성자 거대토끼 |
조회 수 13,007 추천 수 0 댓글 1
Html Tips
홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다
-
CSS3 border-radius 이해하기
border-radius가 출현하면서 웹 디자이너들은 정말 열광했습니다 . 이전까지는 둥근모서리를 만들기 위해 엄청난 편법과 기법들이 난무했습니다. 이미지를 이용해서 둥근 모서리 만들기, 단순한 CSS만으로 둥근 모서리 만들기 등 둥근 모서리 박스를 만들기 위... -
IE 버젼별로 css 따로 적용하는 방법
웹이 널리 보급된 이유를 개발자 입장에서 찾으라면 html, css와 같은 비교적 간단한 문법과 jsp, php, asp 같은 server-side 언어의 발전을 들 수 있을것이다. 하지만 이 모든것의 배경에는 제작과 사용을 간단하게 만든 플랫폼이 있고, 이것이 바로 웹브라우... -
No Image
마퀴태그의 기본
- 기본속성들 설명 - marquee ☜ 마퀴태그의 기본입니다 앞에 꼭 넣어야 해요 scrollamount ☜ 빠르기지정.(숫자가 높을수록 절라빨라짐) scrolldelay ☜ 흔들리는 속성 direction ☜ 방향설정(left,right,up,down) behavior=alternate ☜ 좌우,상하왕복 loop ☜ 숫... -
No Image
이미지 바꾸기 소스
<table align="center" cellpadding="0" cellspacing="0" width="500"> <tr> <td> <SCRIPT> // "이미지는 바꾸어서 쓰세요" var slideshow=new Array( "http://pds12.egloos.com/pds/200906/06/18/a0102518_4a29fe104c7e8.jpg| 이미지... -
No Image
익스6에서만 작동되게하는 css구문
<!--[if lt IE 6]> <!--%import("css/default-ie.css")--> <![endif]--> 위의 문구는 ie6에서만 작동하는 css파일을 지정할때 사용하는 방법입니다. #gnb { position:absolute; top:0px; right:140px; _right:155px; font:11px arial, sans-serif; overflow:hi... -
No Image
CSS 기초 깨우치기
css 속성 설명 사용 예 font-family 글꼴을 설정합니다. {font-family:굴림,돋움} font-size 글꼴의 크기를 지정합니다 {font-size:12pt} font-style 글꼴의 스타일을 지정합니다 {font-style:ifalic} font-weight 글꼴의 두께를 지정합니다 {font-weight:bold... -
CSS 사용시 익스플로러 버그 해결하기
보통 CSS를 사용하면 파폭, 사파리, 오페라에서는 잘 보이는데 IE에서는 깨진다거나 IE7까지는 맞출 수 있지만 IE6까지 맞출 방법이 없다거나 그렇다고 IE6에다 맞추면 다른 브라우저에서 전부 깨져보인다던가 하는 난감한 일이 발생합니다. 그런 경우를 위한 ... -
CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간
글꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가 다르며, 적용되더라도 화면의 보여지는 모습이 다릅니다. 충분한 테... -
No Image
기본적인 태그 (링크걸기)|
<a href="주소">표시할 글자</a> 위처럼 태그를 넣으면 보이는건 표시할글자 내용이고 그글자를 누르면 써넣은 주소로 이동이 됩니다 예)글자색과 링크 시키는 방법(target)을 덧 붙이면 아래 방법으로 넣으면 되겠죠 <a href="주소" target="_blank">홈으로</... -
No Image
가장 기본적인 태그들
1. 홈페이지 태그 ※ 그림 관련 태그 <IMG> 그림을 삽입하기 위한 태그 <IMG SRC="파일명" BORDER=n> 그림을 나타나게함.테두리선은 n값 <IMG SRC="파일명" BORDER=0 WIDTH=n HEIGHT=n> 그림의 넓이와 높이를 지정 <IMG SRC="파일명" ALT="그림설명"ALIGN=LEFT,... -
No Image
자신의 홈에 프린트버튼을 넣자
원하는 페이지에 넣어주세요.... 상단에 아래의 소스를.... <script> function print_this() { window.print(); } </script> 원하는 위치에 다 아래의 소스를... <input type=button onclick="print_this(); return false;" value="Print This Page"> 무진장 ... -
No Image
테이블(셀) 깨지지 않는 CSS
css관련 태그 입니다. 일반적으로 테이블 크기를 정해놓고 나서 글을 공백없이 줄바꿈없이 쓰게되면.. 예) 사랑되찾기사랑되찾기사랑되찾기사랑되찾기사랑되찾기사랑되찾기사랑되찾기사랑되찾기사랑되찾기사랑되찾기 테이블 크기가 깨지기 마련입니다. 이걸 보... -
No Image
날짜 매개변수
a : "am" 또는 "pm" A : "AM" 또는 "PM" d : 두자리로 표현되는 날짜, 즉 "01"~"31" D : 세글자로 표현되는 요일, 즉 "Fri" F : 월을 긴 문장으로 나타냅니다. 즉 "January" h : 시간을 12시간 단위로 나타냅니다. "01"~"12" H : 시간을 24시간 단위로 나타냅... -
No Image
이미지 없이 그라데이션효과 주기
<table style="filter=progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#F352FF, EndColorStr=#FCEFFF)"> <tr> <td>내용</td> </tr> </table> 스타일시트의 필터기능만으로 html 문서 내에 그라데이션 효과를 넣을 수 있습니다. 이... -
No Image
자신의 홈페이지 단어를 더블클릭하면 네이버로 해당단어 검색을
제목 그대로 자신의 홈페이지 내에 올려진 글들중 단어를 더블클릭 네이버 새창이 뜨면서 그단어로 검색해 주는 스크립트입니다. /******************** never검색 **********************************/ var NS=(navigator.appName=='Netscape')?1:0; if (NS) ... -
No Image
뒤로..앞으로..새로고침 버튼 넣기
글자대신 이미지버튼을 사용하셔도 됩니다. ★뒤로가기 <a href="javascript:history.back()">뒤로</a> 혹은 <a href="javascript:history.go(-1)">뒤로</a> ★앞으로 <a href="javascript:history.go(1)">앞으로</a> ★새로고침 <a href="javascript:location.re... -
( align="absmiddle" ) 이미지와 글자 높낮이가 다를때 관해서
img align="속성" align="absmiddle" 에 대해서 몇가지 실험해봤어요 (익스와 파폭) 글자와 이미지의 세로 정렬 문제로.. 이글저글 읽어보다가 눈으로 확인하고 싶은 마음에 실험에 들어갔답니다 서투르신 분들께 도움이 되었으면 하는바램입니다...^^; 간단 ... -
붙어야 할 이미지가 붙지 않을때.
버턴과 버턴이나, 아님 이미지를 잘라서 웹상에서 붙여야 할때, 문법상으로는 아무 문제가 없는데. 아래이미지와 같이 딱 붙지를 않고 약간의 공백이 생길때 황당합니다. 그럴때는 css파일에서 해당 class를 찾아서 #top_index { position:absolute; top:0px; ... -
No Image
사각박스 코너를 이미지없이 둥글게 만드는법
http://www.zeroboard.com/16694989 사각박스의 코너를 이미지 처리없이 둥글게 구현하는 방법이 있더군요. 색깔도 다양하게 적용할 수 있구요. 아래 페이지의 적용 예(3개의 사각박스)를 보시면 알 수 있습니다. 스킨이나 레이아웃 등으로 만들지 못해서 그냥... -
No Image
CSS로 바꾸어 쓰는 HTML태그!.. [XHTML약간^^;]
박종훈 http://www.zeroboard.com/1498150 XHTML및 HTML 4.01부터 사용 불가능한 태그 : center, s, strike, u 등이 있습니다. center의 대책!.. CSS로 바꾸어 씁니다. text-align: center; s의 대책!..[strike 포함] CSS로 바꾸어 씁니다. text-decoration: l...
유용한 정보 감사합니다.^^