박코딩

박코딩

공부기록 블로그

타이포그래피 속성

1 minute read

많이 사용되는 속성

마이크로소프트에서 수집한 통계를 확인해 볼 수 있다.

USAGE CSS PROPERTY

빈도수가 높은 속성은 타이포그래피, 박스모델, 칼러가 있다.


폰트 사이즈

font-size

가장 많이 사용되는 속성이다.

단위

px, em, rem 의 단위가 사용된다.
px는 항상 고정된 크기를 유지하지만 em, rem은 크기가 바뀔 수 있다.

  • px

    pixel 모니터 상의 화소 하나의 크기에 대응되는 단위이다. 고정된 값이기 때문에 이해하기 쉽지만 사용자가 글꼴의 크기를 조정할 수 없기 때문에 사용하지 않는것이 좋다.

  • rem

    html 태그에 적용된 폰트 사이즈의 영향을 받는다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉬우며 사이즈가 유동적이기 때문에 가장 권장되는 단위이다.

  • em

    부모 태그의 영향을 받는 상대적인 크기이다. 그렇기 때문에 파악하기가 어려워 rem이 나온후에는 사용되지 않는다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #px{font-size:16px;}
      #rem{font-size:1rem;}
    </style>
  </head>
  <body>
    <div id="px">PX</div>
    <div id="rem">REM</div>
  </body>
</html>

브라우저의 설정으로 폰트의 크기를 변경해보면 PX는 고정되어있지만 REM은 크기에 맞춰서 변하게된다.


색상

색상을 지정하는 방법에는 세가지가 있다.

  • color name

    이름의로 색을 지정한다.

  • hex

    16진수로 색상을 표현한다.

  • rgb

    red, green, blue 각 각을 0 ~ 255사이의 숫자로 지정한다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1{color:red}
      h1{color:rgb(255, 0, 0)}
      h1{color:#ff0000}
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

이름을 사용하면 색상을 직관적으로 표현할 수 있지만 모든 색상에 이름을 정하는것은 불가능하기 때문에 rgb나 hex 방식을 사용하기도 한다.

색상에 대한 정보를 볼 수 있는 사이트

w3schools


정렬

text-align 속성

속성값

  • left

    왼쪽에 정렬시킨다.

  • right

    오른쪽에 정렬시킨다.

  • center

    가운데 정렬시킨다.

  • justify

    텍스트를 양쪽 균등하게 정렬시킨다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p{
        text-align:center;
        /*테두리*/
        border:1px solid gray;
      }
    </style>
  </head>
  <body>
    <p>
      text
    </p>
  </body>
</html>


글꼴

  <!DOCTYPE html>
  <html>
    <head>
      <style>
        p{
          font-size:5rem;
          font-family:arial, verdana, "Helvetica Neue", serif;
          font-weight:bold;
          font-height:2;
        }
      </style>
    </head>
    <body>
      <p>
        Hello World
      </p>
    </body>
  </html>

  • font-family

    서체를 지정하는 속성이다.

    서체의 이름을 적어주면 먼저 작성된 서체부터 적용하여 없는 경우 다음 서체로 적용시키게 된다.

    서체 이름에 띄어쓰기가 들어가 있는 경우 반드시 큰 따옴표로 묶어준다.

    마지막으로 서체의 스타일과 관련된 설정이 있다.

    • serif (장식이 있는 폰트)

    • sans-serif (장식이 없는 폰트)

    • cursive (흘림체)

    • fantasy

    • monospace (고정폭)

  • font-weight

    폰트의 두께를 나타낸다. 일반적으로 bold만 사용된다.

  • line-height

    행과 행 사이의 간격을 지정한다. 기본 값은 normal이고 수치로는 1.2이다.

    px 단위로 값을 사용하면 사용자가 폰트를 조절할때 부자연 스럽게 된다.

  • font

    폰트와 관련된 여러 속성을 축약형으로 표현하는 속성이다.

    순서를 반드시 지켜서 작성해야한다.

    font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; 

    <!DOCTYPE html>
<html>
  <head>
    <style>
      p{
        font:bold 5rem/2 arial, verdana, "Helvetica Neue", serif
      }
    </style>
  </head>
  <body>
    <p>
      Hello World
    </p>
  </body>
</html>

많이 사용되는 폰트를 알아본다.

폰트랭킹

You may also enjoy