스타일 시트 활용(1) - 문서의 가독성을 높여 보자
여기에서는 행간과 글자크기 그리고 폰트 조절로 홈페이지의 가독성을 높이는 방법을 알아볼까 합니다.
글의 행간을 조절하면 홈페이지에 가독성이 좋아집니다. 글이 따닥따닥 붙어 있는것 보다두 말이지요
자 이부분의 글자 간격을 보세요
너무 글이 딱딱 붙어 있지 않나요
자 아무래도 이러면 방문자들이 글읽기가 힘들겠지요.
이 부분은 어떻습니까
자간이 벌어져서 글 읽기가 매우 좋지요
이걸 어케 조정할까요?
그리구...
글자의 크기도 중요한 요소가 되고 있지여 보통 기본이 12pt 인데 이렇게 놓구 쓰면 글꼴 크기가 너무 큽니다.
적당한 글꼴 크기는 제목등에선 10pt 이나 12pt 본문에서는 9pt 가 적당합니다 ^^
상당히 깔끔하게 보이거든요 .
아참 중요한거.
글꼴 크기를 스타일 시트로 정하면 익스플로러나 넷스케이프에서 글꼴 크기가 모두 같게 보인답니다.
<font size> 라는 태그를 써서 설정하면 같은 글꼴 크기라도 익스와 넷스에서 다르게 보이져.
또 한번 스타일시트의 좋은 점이 드러나는군요
font-size:15pt
font-size:12pt
font-size:10pt
font-size:9pt
그리구 스타일 시트에서는 글꼴을 바꾸는게 가능하답니다. ^^
근데 바꾸는 건 좋은데 되도록이면 사용자의 환경을 고려해서 시스템 기본글꼴로 하시는게 좋아요.
정하는 방식은 {font-family : 글꼴 이름} 입니다.
영문
Arial::: Times new Roman :::
san serif ::: Helvetica:::
Courier New
한글
굴림체::: 궁서체:::
돋움체:::바탕체
자 그럼 이것들을 종합해 볼까요?
<html>
<head>
<title> 가독성 높이자! </title>
<style type="text/css">
<!--
body{ color:blue; line-height:140%; font-family : 돋움체; font-size:9pt}
b{color:blue;line-height:140%; font-family : 바탕체; font-size:10pt}
-->
</style>
</head>
<body>
<b> 제목에 글자가 좀 크고 바탕체로 보이지요 </b>
<p>음냐리... 여기는 내용이 들어가는 부분입니다<br>
잘 보이면 좋겠는데,.. 잘 보이지요 ^^<br>
줄 간격 이정도면 됬나요<br></p>
</body>
</html>
이렇게 하시면 일정한 줄간격을 유지하고 제목은 굵고 10포인트라는 일정한 줄간격을 유지합니다.
여러분들이 적당히 바꾸셔서 이용하시길...
아 그리구 글꼴은 두개 이상 설정이 가능합니다.
두개 이상 쓰는 이유는 사용자의 시스템에 없는 글꼴을 대처하기 위한 것이구요, 영문글꼴이 앞에 놓여 있을경우 한글 글꼴을 표현하기 위해서 한글 글꼴을 써 넣는 경우도 있습니다.
또한 줄 간격에 퍼센트 대신 숫자로도 쓸수 있는데 만약 2로 쓰면 200%로 먹힙니다.
글의 행간을 조절하면 홈페이지에 가독성이 좋아집니다. 글이 따닥따닥 붙어 있는것 보다두 말이지요
자 이부분의 글자 간격을 보세요
너무 글이 딱딱 붙어 있지 않나요
자 아무래도 이러면 방문자들이 글읽기가 힘들겠지요.
이 부분은 어떻습니까
자간이 벌어져서 글 읽기가 매우 좋지요
이걸 어케 조정할까요?
그리구...
글자의 크기도 중요한 요소가 되고 있지여 보통 기본이 12pt 인데 이렇게 놓구 쓰면 글꼴 크기가 너무 큽니다.
적당한 글꼴 크기는 제목등에선 10pt 이나 12pt 본문에서는 9pt 가 적당합니다 ^^
상당히 깔끔하게 보이거든요 .
아참 중요한거.
글꼴 크기를 스타일 시트로 정하면 익스플로러나 넷스케이프에서 글꼴 크기가 모두 같게 보인답니다.
<font size> 라는 태그를 써서 설정하면 같은 글꼴 크기라도 익스와 넷스에서 다르게 보이져.
또 한번 스타일시트의 좋은 점이 드러나는군요
font-size:15pt
font-size:12pt
font-size:10pt
font-size:9pt
그리구 스타일 시트에서는 글꼴을 바꾸는게 가능하답니다. ^^
근데 바꾸는 건 좋은데 되도록이면 사용자의 환경을 고려해서 시스템 기본글꼴로 하시는게 좋아요.
정하는 방식은 {font-family : 글꼴 이름} 입니다.
영문
Arial::: Times new Roman :::
san serif ::: Helvetica:::
Courier New
한글
굴림체::: 궁서체:::
돋움체:::바탕체
자 그럼 이것들을 종합해 볼까요?
<html>
<head>
<title> 가독성 높이자! </title>
<style type="text/css">
<!--
body{ color:blue; line-height:140%; font-family : 돋움체; font-size:9pt}
b{color:blue;line-height:140%; font-family : 바탕체; font-size:10pt}
-->
</style>
</head>
<body>
<b> 제목에 글자가 좀 크고 바탕체로 보이지요 </b>
<p>음냐리... 여기는 내용이 들어가는 부분입니다<br>
잘 보이면 좋겠는데,.. 잘 보이지요 ^^<br>
줄 간격 이정도면 됬나요<br></p>
</body>
</html>
이렇게 하시면 일정한 줄간격을 유지하고 제목은 굵고 10포인트라는 일정한 줄간격을 유지합니다.
여러분들이 적당히 바꾸셔서 이용하시길...
아 그리구 글꼴은 두개 이상 설정이 가능합니다.
두개 이상 쓰는 이유는 사용자의 시스템에 없는 글꼴을 대처하기 위한 것이구요, 영문글꼴이 앞에 놓여 있을경우 한글 글꼴을 표현하기 위해서 한글 글꼴을 써 넣는 경우도 있습니다.
또한 줄 간격에 퍼센트 대신 숫자로도 쓸수 있는데 만약 2로 쓰면 200%로 먹힙니다.
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
