글꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가 다르며, 적용되더라도 화면의 보여지는 모습이 다릅니다. 충분한 테스트 후 활용하도록 합니다. [ 글꼴의 굵기 지정 ] 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들을 정리해 놓았습니다
-
커서(cursor) 모양 정리
마우스 커서 모양에 대해 알아보겠습니다. 보통 cursor 작업을 하면 pointer 위주로 작업을 합니다. 하지만 pointer 외에 아주 많는 cursor 가 있습니다. 그종류에 대해 소스와 샘플을 올려봅니다. 적절한 cursor 지정을 통해 사용자 편의를 고려해보시기 바랄... -
webkit-animation 적용 방법
css3를 지원하는 브라우즈에서 이미지나 문구를 에니메이션 처럼 꾸미는 방법으로 webkit-animation을 많이 사용합니다. https://moonhouse.co.kr/423394 스케치북5 게시판에 댓글달기 추천 문구에 적용하는 방법을 소개합니다. 1. skin.xml 에 추가 <var name... -
각종 css3를 자동으로 만들어주는 사이트
{CSS3} animation / transform / transition 각종 css3를 자동으로 만들어주는 사이트 http://www.css3maker.com/index.html * animation 참고 사이트 http://daneden.github.io/animate.css/ - css3 animaion을 적용하기 위해선 속성 변화를 주기 위해 키프레... -
html에 사용되는 Character Entities(특수기호)
	 	 	 CHARACTER TABULATION 
 
 LINE FEED (LF) ! ! ! ! EXCLAMATION MARK " " " " " QUOTATION MARK # # # # NUMBER SIGN $ $ $ $ DOLLAR... -
이미지 마우스 hover시 좌우 기울이기
아래의 이미지와 같이 마우스 hover시 좌우로 기울이는 코드 img { border:1px solid #D4D4D4; padding:5px; } img:hover{ border:1px solid #666666; filter:alpha(opacity=70); opacity:.7; box-shadow:0 0 10px rgba(0,0,0,.2);filter:alpha(opacity=100);o... -
모바일웹에서 스마트폰으로 전화바로연결 코드
모바일웹(스마트폰)에서 자동으로 전화 걸기 태그 는 아주 간단합니다 아래 코드만 입력하면 끝입니다. 스마트폰에서 터치하면 자동으로 등록된 전화번호가 키패드로 바로 보이고 거기서 통화 버튼만 누르면 된다. <a href="tel:010-1234-1234">전화걸기 여기 ... -
반응형 CSS 테이블
이용 요금 안내 준성수기 : 7/1~7/14, 8/16~8/30 성 수 기 : 7/15~8/15 객실명 평형 입실인원 기준/최대 비수기 준성수기 7/1~7/14 8/16~8/30 성수기 7/15~8/15 101 20평 67m2 6인/10인 주중:20만 주말:23만 주중:23만 주말:26만 30만 102 10평 34m2 2인/4인 ... -
실시간 환율조회 html
환율위젯 https://kr.fxexchangerate.com/exchange-rates-widget.html 미국 달러 환율변환기 https://kr.fxexchangerate.com/currency-converter-widget.html 통화 변환기 아래는 베트남동을 참가한 위젯들 <!-- Currency Converter Script - FxExchangeRate.c... -
HTML 만으로 마우스오버 구현하는 방법
[URL링크시] <a href="#" onMouseOver="this.innerHTML='마우스오버시 변경되는 텍스트'" onMouseOut="this.innerHTML='마우스가 범위를 벗어날시 변경되는 텍스트'">기본적으로 표시되는 텍스트</a> a href = "#": 누를시 이동되는 주소를 작성하면 됩니다. ... -
No Image
<div> 와 같은 블록 요소를 가운데 정렬하는 방법
1. div안에 div가운데 정렬하는 방법 <div class="container" style="text-align: center; margin: 0 auto;" > <div style="border: 1px solid; display: inline-block;"> </div> </div> 바깥 쪽 div에는 text-align과 margin값을 준다. 안에 있는 div의 displ... -
float 속성을 가진 div 100% 설정하는 방법
css작업하다보면 간혹 곤욕스러운 경우가 많습니다. 대표적인게 float 속성인데요.. div, p 태그는 대표적인 block속성을 가지고 있는데요.. 이게 float을 만나면 inlin-block으로 속성이 변경됩니다. 만약 아래 그림처럼 레이아웃을 만들려고 하는데...box2는... -
No Image
배경이미지 슬라이드 스크립트
<script language='JavaScript'> document.write('<st'+'yle>'); document.write('body{ background-attachment:fixed; background-repeat: no-repeat;');//배경이미지고정/반복않음 document.write('background-position: 0 0;}'); // 배경이미지 위치 docume... -
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) - 장식과 자간 및 줄간
글꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가 다르며, 적용되더라도 화면의 보여지는 모습이 다릅니다. 충분한 테...
유용한 정보 감사합니다.^^