|
문단의 세세한 속성을 조절해주는 기능입니다.
우리가 아래 한들같은 워드 프로세서로 문서를 작성할 때, 글자 사이의 간격을 조절한다던지 줄바꿈의 길이를 조절한다던지, 배치를 오른쪽으로 떠는 중앙으로 할 것인지 이런 것을 선택하는데 스타일시트도 바로 이러한 기능을 지원해 줍니다.
물론 embeded와 inline의 미세한 차이는 여기서도 있죠. 다 아시다시피 적용되는 범위의 차이.
바로 설명에 들어가겠습니다
① 줄바꿈의 간격 조절 line-height
이 속성을 적용하지 않은 문서는 장문을 쓸때 좀 답답한 감이 없지않아 있을수도 있습니다. 줄 간격이 너무 없어서 문장이 다닥다닥 붙는다는 느낌을 주기 때문이죠. 따라서 이 줄간격을 조절하고픈 생각이 들 수가 있죠. 이것을 line-height가 가능하게 해줍니다.
line-height란 바로 윗줄의 글자와 아래줄의 글자 사이의 간격을 수치로 조절하는 것이므로 그 값은 수치로도 나타낼 수 있고 퍼센티지로 나타낼수 있고 픽셀등의 단위로도 나타낼 수 있습니다.
따라서
line-height:숫자
line-height:숫자%
line-height:숫자px
이런 세가지 방법이 존재한다는 것이죠. 물론 숫자는 자기 마음대로 주면됩니다.
하나씩 살펴봅시다.
(1)숫자로만 주는 방법
| embeded방식 |
inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
font {line-height:3}
</style>
</head>
<body>
<font>공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</font>
</body>
</html>
|
<font style="line-height:3">공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</font> |
|
|
<FORM> 실행화면</FORM>여기서 'line-height:3'의 뜻은 글씨크기의 3배만큼 띄우라는 뜻입니다. 단, 윗줄의 글자 윗부분에서 시작해서 3배이죠.
 |
보시다시피 첫줄의 글자 윗부분부터 해당글자의 배수를 잰다는 뜻이죠 따라서 3배라고 하면 저만큼 띄워서 나타내게 된답니다.
이는 HTML기본태그의 <p>나 <br>보다도 훨씬 세세한 조정이 가능하다는 뜻이죠. 꼭 2,3 같은 자연수만 쓰라는 법은 없습니다 0.2도 좋고 0.02도 좋죠. |
(2)퍼센티지로 주는 방법
| embeded방식 |
inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
font {line-height:150%}
</style>
</head>
<body>
<font>공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</font>
</body>
</html>
|
<font style="line-height:150%">공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</font> |
|
|
<FORM>실행화면</FORM>여기서 'line-height:150%'의 뜻은 글씨크기의 150%만큼 띄우라는 뜻입니다. 역시 윗줄의 글자 윗부분에서 시작해서 150%이죠.
 |
첫줄의 글자 윗부분부터 해당글자의 퍼센티지 만큼 띄웁니다. 따라서 150%배라고 하면 글씨크기의 1.5배 만큼 띄워서 나타내게 된답니다.
이 역시 세세한 조절이 가능하죠 |
(3)단위로 주는 방법
| embeded방식 |
inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
font {line-height:50px}
</style>
</head>
<body>
<font>공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</font>
</body>
</html>
|
<font style="line-height:50px">공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</font> |
|
|
<FORM>실행화면</FORM>여기서 'line-height:50px'의 뜻은 윗줄 글씨의 윗부분부터 50px의 크기만큼 띄우라는 뜻입니다.
 |
첫줄의 글자 윗부분부터 해당하는 단위만큼 띄워줍니다. 따라서 만약 클씨 크기가 30px라면 실제로 비는 공간은 20px이죠
만약 글자는 30px인데 띄우는 크기를 20px로 줬다면?! 윗줄에 일부분이 겹치겠죠.. |
이제 다른 옵션을 공부해 볼까요
② 글자 간격 조절 letter-spacing
말 그대로 글자와 글자 사이의 간격을 조절할 수 있는 옵션입니다. letter-spacing이죠.
그 값은 위의 line-height와는 달리 단위적 표현만이 가능합니다. 즉, 몇 픽셀만큼 띄울지만 가능하다는 얘기죠 2배크기로 띄운다던가 200%크기로 띄운다던가 하는 속성은 없습니다.
예제를 보죠.
| embeded방식 |
inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
font {letter-spacing:5px}
</style>
</head>
<body>
<font>공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</font>
</body>
</html>
|
<font style="letter-spacing:5px">공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</font> |
|
|
<FORM>실행화면</FORM>
값을 다르게 변형시켜 보세요. 0px로 준다면 글자사이의 간격은 없어지게 되겠죠.
③ 문단의 정렬 조절 text-align
HTML태그의 align에 해당하는 옵션입니다. 어떤 내용을 어느 방향으로 배치 시킬건지 정하는 것이죠. 옵션값은 left, center, right가 존재합니다.
그런데 애석하게 이 옵션은 <font>태그에 적용되지 않습니다. 정렬시키는 옵션이므로 범위를 잡아주는 <p>나 <div>같은 태그에 적용되죠. 따라서 예제로 그쪽 태그로 적용한 것을 보여줘야 겠네요
left는 일반적으로 우리가 보는 왼쪽으로 정렬하는 방식, center는 중앙으로 right는 오른쪽으로..
text-align:center의 예제를 볼까요
| embeded방식 |
inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
p {text-align:center}
</style>
</head>
<body>
<p>나는 할 수 있다<br>
나를 믿어</p>
</body>
</html>
|
<p style="text-align:center">나는 할 수 있다<br>
나를 믿어</p> |
|
|
<FORM>실행화면</FORM>
따로 설명이 필요있나요? 그럼 다음으로 갑시다.
④ 문단 첫글자의 들여쓰기 조절 text-indent문서를 작성할 때 문단 첫 글자는 약간 띄워줍니다. 그것을 얼마만큼 띄워주는지 조절하는 옵션이죠.
이 역시 <font>태그에는 쓰이지 않습니다.
text-indent:값이런 식이죠. px등의 단위로 나타내는 방법과 퍼센티지로 나타내는 방법이 있습니다. text-indent:10px 라면 10픽셀만큼 들여쓰는것이고 text-indent:10% 라면 전체화면의 10%만큼 들여쓰는 것이죠.
| embeded방식 |
inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
p {text-indent:30px}
</style>
</head>
<body>
<p>공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</p>
</body>
</html>
|
<p style="text-indent:30px">공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</p> |
|
|
<FORM>실행화면</FORM>다음 옵션으로 갑시다.
⑤ 문단의 여백 조절 margin-left, margin-right, margin-top, margin-bottom
margin이란 남는다는 뜻입니다. 따라서 공간을 얼만큼 남길것인지 정해줍니다. <table>태그나 <frame>태그 <body>태그를 열심히 공부하신분은 margin에 대한 개념이 잡혀있을테죠 거기에도 margin에 관련된 옵션이 있으니. 그것을 스타일시트 방식으로 표현한 것에 지나지 않는답니다.
margin의 종류는 margin-left, margin-right, margin-top, margin-bottom이 있습니다.
margin-left:값 왼쪽의 여백을 조절합니다
margin-right:값 오른쪽의 여백을 조절합니다
margin-top:값 윗쪽의 여백을 조절합니다
margin-bottom:값 아래쪽의 여백을 조절합니다
저기 값에는 픽셀등의 단위를 줄수도 있고 퍼센티지를 줄 수도 있습니다. 따라서 10px라면 10픽셀만큼 여백을 준다는 말이고 10%라면 화면(아, 꼭 화면 크기라는 보장은 없군요. 예를 들어 테이블의 셀에서 이것을 적용했다면 기준은 화면이 아닌 테이블전체의 크기입니다)크기의 10%만큼 여백을 준다는 말이죠 따라서 퍼센티지는 화면의 크기에 따라 같은 값이라도 여백이 달라질 수 있겠죠. 개념이 약간 다르죠?
 |
저런 개념입니다. margin-left는 left이고 margin-right 는 right부분, margin-top은 top부분, margin-bottom은 bottom부분의 여백을 지정하죠 |
물론 저것들을 다 지정해줄 필요는 없습니다. 필요한것만 직접 정해주고 나머지는 브라우져가 알아서 기본값으로 돌린답니다.
예제를 들어보죠...이번엔 embeded방식만으로 들어보겠습니다.
왼쪽이 margin-left와 margin-top을 각각30 씩, 오른쪽은 margin-left와 margin-top을 각각10 씩 잡은 예제입니다.
| margin-left:30 margin-top:30 |
margin-left:10 margin-top:10 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
p {margin-left:30;margin-top:30}
</style>
</head>
<body>
<p>공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</p>
</body>
</html>
|
<html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
p {margin-left:10;margin-top:10}
</style>
</head>
<body>
<p>공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</p>
</body>
</html>
| |
<FORM>실행화면</FORM> |
<FORM>실행화면</FORM> |
|
|
어렵나요? 그렇지 않죠? 태그 연습장으로 수치를 좀 변화시켜 가면서 연습하시면 금방 개념이 잡힐겁니다. 마지막으로 이것들을 좀 섞어 볼까요?
줄간격을 140%로 주고 글자 간격을 1px로 주면서 문단을 오른쪽으로 정렬, 첫 들여쓰기는 20px 그리고 윗쪽여백을 30%로 주는 문단을 작성해 봅시다. <font>로는 안먹히는 옵션들이 일부 있으니 적용 태그는 <div>로 해볼까요?
| embeded방식 |
inline방식 | <html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">
div {line-height:140%;letter-spacing:1px;text-align:right;text-indent:20px;margin-top:30%}
</style>
</head>
<body>
<div>공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</div>
</body>
</html>
|
<div style="line-height:140%;letter-spacing:1px;text-align:right;text-indent:20px;margin-top:30%">공대 화장실에 엽기적인 삼행시가 있었다. 간:간단히 말해서 미:미분가능하면 연:연속이다</div> |
|
|
<FORM>실행화면</FORM>이것으로 문단제어 옵션은 설명이 끝났습니다.
|
