|
 |
 CSS 강좌
4. 스타일시트 특강4
|
 |
[1][2][3]
|
벌써 네번째 특강인가요? ^^
하루에 특강 하나씩 만들다 보니...벌써 업데이트
준비한지 나흘이 지났군요. 헉..-_- ;; 공부도 해야
되는디....... 공부 이야기가 나왔으니간 하는
말인데......요즘 대학에서의 학문의 의미는 단지
직업을 갖기 위한 하나의 수단으로 밖에 보여지질
않네요..... 진정한 학문으로서 탐구는 없고.....
조금이라도 좋은 먹고 살 자리를 갖기 위한 도구(?)라고
할 수 있을 까요? -_- ;;; 가끔씩은 대학에 가기위해
발버둥(?)을 치고 있는 고3생들을 보면 안타깝다는
생각이 들기도 하구........ 왜 그렇게 대학에
올려고 하는지.....--;;; 하긴 나도 그땐
그랬으니깐..... 오잉? o.0 ! 근뎅 무슨 이야기
하다가 옆길로 빠졌는지....핫핫^^> 스타일 시트
네번째 특강 시작하도록 하죠 ^^
☞ word-spacing , letter-spacing
word-spacing 속성은 단어사이의 여백을
조절해주는 기능을 하고, letter-spacing 속성은
글자사이의 여백을 조절해주는 기능을
합니다. 넘 간단한 거라 더 이상 말이 필요 없습니다.
예제 하나 보고 담으로 넘어가겠습니다.
<style type="text/css">
<!--
h1 { word-spacing:5px; }
h2 { letter-spacing:7px; }
-->
</style>
<body>
태그매니아 스타일 시트
<h1>word-spacing 속성은 단어사이의
여백 조정</h1>
<h2>letter-spacing 속성은 글자사이의
여백 조정 </h2>
</body> |
여기서 속성값의 수치단위는 픽셀, 포인트,
센치, 인치 등을 사용할 수 있습니다.
☞ line-height
직역해보면....선-높이가 되죠. 말 그대로
줄과 줄 사이의 수직 간격을 조절해주는
속성입니다. 이걸 뭐라그러더라???? 자간이라고
하나? 줄간? -_-;;; 갑자기 생각이 나지 않네.......
하여간 줄 간격 조절해주는 것이라고만 알고
있으면 됩니다. 역시 예제하나 보고 설명
드리겠습니다.
<style type="text/css">
<!--
p { font-size:13px;
line-height:2; }
h3 { font-size:20px; line-height:200%; }
.love { font-size:12px; line-height:10px; }
-->
</style>
<body>
<h3> LCD와 PDP의 인기</h3><br>
<p> 디스플레이의 경우 보다
부피가 적은 모니터와 선명하고 안정적인
화면이 동시에 요구되고 있어 LCD와 PDP제품의
개발 및 줄시가 증가하고 있다. LCD모니터는
일본시장에서 이미 테스크탑 모니터의 50%이상을
차지하는 등 빠른 성장세를 나타내고
있으며 가격도 지속적으로 하락하고 있어
국내에서도 올 하반기를 기점으로
시장점유율이 큰 폭으로 상승할 것으로
전망된다.</p>
<p class=love>PDP는 현재까지 40인치
이상의 대형화면을 표현하는 데 가장
적합한 매체로 알려져 대형화면을 요구하는
소비자를 대상으로 판매가 확대되고 있다.
PDP는 기존 모니터와 비교해 처박형이면서
완전평면으로 대형화면표시가 가능하며,
시야각이 160도 이상으로 넓어 차세대
디스플레이로 각광받고 있다....</p>
</body>
|
자~ 위에 예제를 태그연습장에서 실행시켜
보면 재미있는 결과가 나타날 것이다. <h3>태그에
적용된 스타일 시트의 경우 글자크기가 20px임에도
불구하고 line-height를 200%로 잡아주었기 때문에 그
두배인 40px 크기로 브라우져에 표현된죠. 또한
<p>태그에 적용된 스타일 시트의 경우
글자크기13px에 line-height를 수치단위 없이 2로만
적어 주었을 경우 마찬가지고 앞의 글자크기에 2배가
곱해지기 때문에 line-height의 값은 26px이 되는
것입니다. 또한 love class를 적용시킨 부분의 경우
오히려 앞의 글자크기12px보다 line-height의 값이
작기 때문에 예제에서 보시다 시피 줄끼리
겹쳐지는 상황이 나타나게 됩니다. 어때요?
이해되십니까? ^^ 아마 이 부분에서 막 헤갈릴려고
하시는 분들이 계실지도 모르나.....모를 경우에는
예제의 수치를 바꿔가면서 연습해보세요. 그럼
언젠가는 이해가 되실 겁니다. ^^ (헉..넘 무책임한
운영자 -_-;;;)
다음 페이지로 넘어가져^^
|
메인 페이지로 || 태그연습장 || 다음 페이지로
|
|
|
|
