• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
CSS

스타일 시트 활용(1) - 문서의 가독성을 높여 보자

오작교 17601

0
여기에서는 행간과 글자크기 그리고 폰트 조절로 홈페이지의 가독성을 높이는 방법을 알아볼까 합니다.
글의 행간을 조절하면 홈페이지에 가독성이 좋아집니다. 글이 따닥따닥 붙어 있는것 보다두 말이지요



        자 이부분의 글자 간격을 보세요
        너무 글이 딱딱 붙어 있지 않나요
        자 아무래도 이러면 방문자들이 글읽기가 힘들겠지요.



        이 부분은 어떻습니까

        자간이 벌어져서 글 읽기가 매우 좋지요

        이걸 어케 조정할까요?




그리구...
글자의 크기도 중요한 요소가 되고 있지여 보통 기본이 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%로 먹힙니다.
공유
0

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 290732 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349696 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 294330 +14
300
normal
오작교 23.12.10.09:32 14529 0
299 Script
normal
오작교 23.12.10.09:29 19851 0
298 CSS
normal
오작교 21.01.09.14:18 40782 0
297 HTML
normal
오작교 15.09.17.08:58 116371 0
296 HTML
normal
오작교 15.09.13.21:38 21657 0
295 HTML
normal
오작교 15.09.13.21:30 25238 0
294 HTML
normal
오작교 15.08.30.12:19 52839 0
293 Script
normal
오작교 15.05.12.14:06 21218 0
292 HTML
file
오작교 12.03.08.13:51 35990 0
291 HTML
normal
오작교 11.06.03.10:44 40812 0
290 CSS
normal
오작교 11.06.03.10:29 70709 0
289 Script
normal
오작교 11.03.22.11:19 43518 0
288 Script
normal
오작교 11.03.22.11:15 38291 0
287 Script
normal
오작교 11.03.22.11:07 37175 0
286 HTML
normal
오작교 11.01.25.10:27 36270 0
285 CSS
normal
오작교 11.01.24.10:40 35442 0
284 HTML
normal
오작교 11.01.24.10:39 37161 0
283 Script
normal
오작교 11.01.24.10:34 38171 0
282 CSS
normal
오작교 11.01.24.10:31 37809 0
281 CSS
normal
오작교 11.01.24.10:27 36269 0