mozilla
검색 결과

    텍스트 스타일

    중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.

    CSS 시작하기 안내서 7번째 장; 여기서는 텍스트 스타일에 대해 좀더 많은 예를 살펴 보자. 예제 Stylesheet를 다른 글씨체로 바꿔 보자.

    정보: 텍스트 스타일

    CSS는 몇가지 텍스트 스타일에 대한 속성이 있다.

    여러가지에 대해 한번에 편리하게 사용할 수 있는 font라는 속성에 대해 알아보자. 예를 들면

    • 굵게, 이텔릭, 작은 대문자체
    • 크기
    • 라인 높이
    • 글씨체
    예제
    p {font: italic 75%/125% "Comic Sans MS", cursive;}
    

    위의 규칙은 모든 단락내용을 italic폰트로 설정 하는 등의 다양한 설정을 한다.

    폰트 크기를 부모 element의 단락 크기의 3/4크기로 하고 라인 크기를 보통보다 좀 큰 125%크기로 한다.

    글자체는 Comic Sans MS이다. 하지만 이 글씨체가 유효하지 않다면 브라우저는 기본 글씨체인 손글씨체를 사용 할 것이다.

    이 규칙에는 굵기와 작은 대문자 속성을 무력화 하는 오류를 포함하고 있다.

    글씨체

    보통 Document에서 가용한 글씨체에는 어떤 것이 있는지 알고 작성할 수는 없다. 대체 가능한 글씨체를 같이 설정 해 주는 것도 좋은 방법이다.

    맨 마지막에는 기본 글씨체(serif, sans-serif, cursive, fantasy or monospace)를 추가 설정 해 주는 것이 좋다.

    만약 document에서 지원 하지 않는 글씨체라면 브라우저가 다른 글씨체로 대체 할 것이다. 예를 들면, Document내에는 설정된 글씨체에서 지원 되지 않는 특수 문자를 포함 하는 경우 같은 것을 말한다. 브라우저는 자동적으로 다른 글씨체에서 위의 특수문자를 지원 한다면 그 글씨체를 사용하여 표시 할 것이다.

    글씨체를 설정 하기 위해서는 font-family속성을 사용 하라.

    글씨 크기

    브라우저는 보여지고 있는 페이지의 기본 글씨체의 크기와 텍스트의 크기를 바꿀 수 있어서 사용자에 맞는 것을 사용 할 수 있게 해준다.

    폰트 크기는 small, medium, large등 정해진 사이즈도 사용할 수 있다. 또한 부모 글씨체 크기와 비교된(smaller, larger, 150%, 1.5 em) 값으로 설정 가능하다. 'em'은 'm'자의 폭을 말한다. 따라서 부모 element보다 1.5배 크기의 글씨크기를 말한다.

    14px (14 pixels)와 같이 표시장치나 출력장치의 실체 크기로 지정 할 수도 있다. 이 경우는 크기를 바꿀수 없으므로 시각장애인들에게 불편할 수 있다. 이런 경우를 위해서는 document의 최 상위 element에서부터 정해진 크기 값중 하나인 'medium'으로 해 놓으면 하위 element는 그와 비교해 상대적인 값으로 크기를 설정 할 수 있다.

    글씨 크기를 설정 하려면 font-size를 사용하라.

    줄 높이

    Line height는 줄간 높이를 말한다. 단락이 여러줄로 구성되었다면 보통보다 큰(larger-than-normal) 간격이 특히 작은 글씨라면 읽기 편하다.

    줄 높이 설정은 line-height속성을 사용하라.

    치장(Decoration)

    별도의 text-decoration 속성으로 밑줄, 취소선 같은 다른 스타일 설정 할 수 있다. 설정된 치장(Decoration)속성을 없애기 위해서 값을 none을 쓸 수 있다.

    다른 속성

    이텔릭 속성font-style: italic;
    굵은 속성 font-weight: bold;
    작은 대문자 font-variant: small-caps;

    위의 속성을 해제하려면 normal 또는 inherit로 설정하라.

    좀더 자세히

    텍스트 스타일은 다양한 방법으로 설정 가능하다.

    예를 들면, 위에 언급한 속성들에 다른 사용 가능한 값들이 더 있다.

    복잡한 stylesheet에서는, 원치 않는 오류(설정 값이 다르게 나타나는 오류) 방지를 위해 약칭 font 속성 사용을 피하라.

    글씨체에 관한 모든 속성을 보려면, CSS 사양서의 Fonts부분을 보라. 다양한 텍스트 효과를 위해서는 Text 부분을 참고 하라.

    사용자 시스템 환경에 설치된 폰트 외에 다른 폰트를 설정하려면 @font-face로 온라인에 있는 폰트 설정 할 수 있다. 이를 위해서는 브라우저에서 해당 규칙을 지원해야 한다.

    액션: 글씨체 설정

    간단한 document에서는, <body> element의 글씨체를 설정 할 수 있으며, 그 이후에서는 이 속성을 상속한다.

    1. 예제 CSS 편집 해 보자.
    2. 예제의 Document에 아래 규칙을 추가 하라. CSS파일의 위쪽은 논리적인 곳(?)이다. 하지만 어디에 추가하든 그 속성은 적용 될 것이다.
      body {font: 16px "Comic Sans MS", cursive;}
      
    3. 주석을 탭이나 공백과 함께 잘 배치해 보라.
    4. 저장하고 브라우저를 다시 읽어보라. 해당 기기에 italic 스타일이 지원되지 않는 Comic Sans MS나 손글씨체 글씨체가 있다면 브라우저는 다음 예제의 첫출과 같이 italic이 지원되는 다른 글씨체로 바꿔서 보여 줄 것이다.
      Cascading Style Sheets
      Cascading Style Sheets
    5. 브라우저 메뉴에서 View > Text Size > Increase (or View > Zoom > Zoom In)을 선택 해 보라. 위에 16 pixels로 스타일 속성을 주었더라도, 화면에는 그 글씨 크기가 바뀔 것이다.
    도전

    다른것은 그대로 두고, 단어 앞 첫 글자 6개만 기본 sarif글씨체로 바꾸고 브라우저 기본 사이즈의 2배 크기로 변경 해 보라.

    Cascading Style Sheets
    Cascading Style Sheets
    Possible solution

    Add the following style declaration to the strong rule:

      font: 200% serif;
    
    If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden.

     

    Hide solution
    정답 확인

    다음에는?

    이미 예제에서 몇가지 색상을 사용 해 왔다. 다음 장에서는 기본 색생과 다른 색상 표현 법에 대해 알아본다.

    문서 태그 및 공헌자

    Contributors to this page: SpikeYou, teoli
    최종 변경: teoli,