CSS | Typography

7129 ワード
CSS テキストリンク

Typography


Typeopgraphyとは、文字の配列、文字のデザイン、文字の外形を修正する技術と芸術である.象形文字が作られ、様々なイラスト技法によって修正された.字の整理には、フォントの選択、点サイズ、線長、線間隔、文間隔、語間隔が含まれます.
Typeography-wiki百科事典

1.単位


単位はpx,em,rem,vw,vhである.

  • px:ほとんどのブラウザでは、1 pxを1/96インチ(0.01 cm)の絶対単位と見なしており、親の影響を受けずにpxのサイズに応じて独立して大きくなっています.

  • Em:相対単位として、親要素のfont-sizeが子要素に影響します.
    • (ex. font-size : 20px padding : 1px 이면 padding-left | right | top | bottom 이 모두 20px이 된다.)

  • rem:rootemの略称はrooteがhtmlを100%に保持し、サブ要素のfont-sizeが影響を受けます.

  • vw,vh:viewport width,heightの略で、viewportのwidth,heightを100 vw,100 v,1 vhに全画面高さの1%、50 vwに全画面幅の50%とする.

    • 2. line-height


     <p class="text">안녕하세요</p>
    * {
  margin: 0;
} 
.text {
  font-size: 30px;
  line-height: 4;
} --> line-height는 120px 이 된다.

  • 2-1
    line-heightプロパティを使用する場合、em単位をよく使用し、適用するyo showのfont-sizeを基準に、何倍にするかを指定します.また、em単位を使用する場合は省略できます.

  • 2-2
    line-heightがheight値を増やしてもfontの位置は行間の固定位置に従って配置されます.

    • 3. letter-spacing


     <p class="text">안녕하세요</p>
    * {
  margin: 0;
} 
.text {
  font-size: 30px;
  line-height: 4;
  letter-spacing 1em | 1rem | 10% | 1px | large ; 
}
  • 文字間隔とは、特定の要素またはテキストブロック内の各文字間の間隔を制御するプロパティで、ブラウザが持つデフォルトの間隔を有し、アルファベット間隔を使用してデフォルトの間隔の値に縮小または拡大できます.

    • 4. font-family

     <p class="text">안녕하세요</p>
    * {
  margin: 0;
} 
.text {
  font-size: 30px;
  line-height: 4;
  letter-spacing 1em | 1rem | 10% | 1px | large ; 
  font-family: "poppins" , sans-serif;
} 
    - font-family : "폰트서채"; --> 폰트서채를 적용해라
- font-family : "폰트서채" , sans-serif; --> 폰트서채를 적용하는데 폰트서체가 없다면 아무런 sans-serif를 보여줘라
- font-family : "폰트서채" , "Roboto" , sans-serif; --> 폰트서체 다음 roboto 까지 없다면 sans-serif 서체를 써라
    太字

    5. font-weight


  • font-weightはfontの太さを表し、100単位で中断します.値段が高ければ高いほど厚い.

    • 6.color


    cssフォントの色を変える3つの方法
    1. color : #0066ff ; == hex
2. color : rgb(0,102,255) ; == rgb
3. color : rgba(0,102,255,1) ; == rgba 맨 끝은 투명도
    
> 참고자료
[생활코딩 : line-height](https://opentutorials.org/course/718/3902)
    【データベース】同時制御
    白駿13985号:Equality