[CSS] 글자 크기, 두께, 글꼴, 정렬

[CSS] 글자 크기, 두께, 글꼴, 정렬

2023. 6. 21. 23:33ㆍ기술 창고/CSS

728x90

SMALL

글꼴 크기 - font-size

#fontsize{
    font-size: 1px;
}

#fontsize{
    font-size: 1pt;
}

#fontsize{
    font-size: 2em;
}

#fontsize{
    font-size: 2rem;
}

[px]
1px은 1/96 inch의 크기를 나타냅니다. - 0.26mm 정도입니다.

[pt]
1pt는 1/72 inch의 크기를 나타냅니다. - 0.35mm 정도입니다.

[em]
1em은 부모 태그 글자 크기의 100프로(1em)라고 볼 수 있습니다.
예를 들어, body 태그 안에 h1 태그가 존재하고 body 태그 내의 글자 크기를 20px 로 지정했다면,
h1 태그의 1em은 부모 태그인 body 태그와 동일하게 20px 입니다.
만약 h1 태그에 2em 이라고 설정했다면, 부모태그의 2배인 40px 의 크기를 나타냅니다.

[rem]
1rem은 루트 태그 글자 크기의 100프로(1rem)이라고 볼 수 있습니다.
루트 태그는 보통 HTML 태그를 말합니다.
여기서 em 과 다른 점을 확인할 수 있습니다.
em은 바로 위의 부모 태그에 따라 상대적으로 크기가 변하지만 rem은 루트 태그인 html의 정해진 글자 크기에 따라
변하게 됩니다.

글자 두께 - font-weight

#fontweight{
    font-weight: 900;
}

#fontweight{
    font-weight: bold;
}

#fontweight{
    font-weight: bolder;
}

#fontweight{
    font-weight: lighter;
}

글자 두께를 지정해줄 수 있는 설정입니다.
bold를 지정하면 강조된 두꺼운 두께로 글자가 적용됩니다.
lighter를 지정하면 얇아지고, bolder를 사용하면 더욱 두꺼워집니다.
숫자를 기입하여 굵기의 정도도 지정해줄 수 있습니다.

글꼴 형식 - font-family

#fontfamily{
    font-family: 'Caveat', cursive;
}

font-family 설정으로 글꼴 형식을 지정해줄 수 있습니다.
고딕체, 맑은 고딕 등 다양한 글자 형식을 지정해줄 수 있습니다.

예시 코드의 font family 는 Caveat 글꼴로, 구글에서 만든 무료 폰트입니다.

또한, 사용자 지정 글꼴 양식을 link import 하여 적용시킬 수 있습니다.

<!-- 사용자 지정 글꼴 import -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Hind+Vadodara:wght@400;600&display=swap" rel="stylesheet">

<!-- css 글꼴 스타일 적용 -->
<style>
    #fontfamily{
        font-family: 'Caveat', cursive;
    }
</style>

텍스트 정렬 - text-align

#textalign{
    text-align: right;
}

#textalign{
    text-align: center
}

#textalign{
    text-align: left
}

텍스트를 가운데로 정렬시키거나 왼쪽에 정렬시키거나 오른쪽에 정렬 시키는 등,
정렬 해주는 설정입니다.

예시 코드

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Properties</title>

  <link rel="stylesheet" href="./style.css"/>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Caveat&family=Hind+Vadodara:wght@400;600&display=swap" rel="stylesheet">

  <style>
    body {
      background-color: cornflowerblue;
      color: white;
      font-size: 18px;
    }

  </style>
  
</head>

<body>
  <h1>Important CSS Properties</h1>
  <p id="color">Color</p>
  <p id="fontsize">Font Size</p>
  <p id="fontweight">Font Weight</p>
  <p id="fontfamily">Font Family</p>
  <p id="textalign">Text Align</p>
</body>

</html>

style.css

#color{
    color: coral;
}

#fontsize{
    font-size: 2rem;
}

#fontweight{
    font-weight: 900;
}

#fontfamily{
    font-family: 'Caveat', cursive;
}

#textalign{
    text-align: right;
}

html{
    font-size: 30px;
}

결과

728x90

LIST

'기술 창고 > CSS' 카테고리의 다른 글

[CSS] CSS 적용 순서 (0)	2023.06.22
[CSS] 박스 영역을 생성하는 div 태그 / 테두리, 안쪽 여백, 바깥쪽 여백, 박스 크기 CSS (0)	2023.06.22
[CSS] Color 설정 (0)	2023.06.20
[CSS] CSS Selectors (0)	2023.06.20
[CSS] CSS 추가하는 3가지 방법 (0)	2023.06.20

개발남발