사용자의 화면 크기에 따라 글자 크기 조절하기 (html, css, js)

웹프로그래밍

사용자의 화면 크기에 따라 글자 크기 조절하기 (html, css, js)

kongsberg 2022. 12. 30. 21:58

<head>
  <link rel="stylesheet" href="path/to/styles.css">
</head>

먼저 글자 크기를 조절하는 일반적인 방법입니다.

1. 웹 페이지의 <body> 요소에 style 속성을 추가하고 font-size 속성을 적용합니다. 예를 들어, 웹 페이지 전체의 글자 크기를 16px로 설정하려면 아래와 같이 작성할 수 있습니다.

<body style="font-size: 16px;">
  ...
</body>

2. 웹 페이지의 <style> 요소를 사용해 전체 스타일을 지정합니다. 이를 위해서는 <head> 요소 안에 <style> 요소를 추가하고, font-size 속성을 적용할 요소의 선택자(selector)와 함께 작성합니다. 예를 들어, 웹 페이지 전체의 글자 크기를 16px로 설정하려면 아래와 같이 작성할 수 있습니다.

<head>
  <style>
    body {
      font-size: 16px;
    }
  </style>
</head>

3. 웹 페이지의 글자 크기를 조절할 수 있는 자바스크립트 코드를 추가할 수도 있습니다. 예를 들어, 웹 페이지 전체의 글자 크기를 16px로 설정하려면 아래와 같이 작성할 수 있습니다.

<body>
  ...
  <script>
    document.body.style.fontSize = "16px";
  </script>
</body>

4. 또는 외부 자바스크립트 파일을 추가할 수도 있습니다. 이를 위해서는 <script> 요소의 src 속성에 자바스크립트 파일의 URL을 지정합니다. 자바스크립트 파일에서는 앞서 작성한 코드와 같이 document.body.style.fontSize 속성을 사용해 글자 크기를 조절할 수 있습니다.

<body>
  ...
  <script src="path/to/script.js"></script>
</body>

사용자의 화면 크기에 따라 글자 크기 조절하는 방법입니다.

1. 웹 페이지의 글자 크기를 조절할 수 있는 CSS 미디어 쿼리(media query)를 사용할 수도 있습니다. CSS 미디어 쿼리는 웹 페이지의 스타일을 특정 조건(예를 들어 화면 크기)에 따라 적용할 수 있게 해줍니다. 예를 들어, 웹 페이지의 글자 크기를 화면 크기가 800px 이상인 경우에만 16px로 설정하고 싶다면 아래와 같이 작성할 수 있습니다.

@media screen and (min-width: 800px) {
  body {
    font-size: 16px;
  }
}

이를 위해서는 스타일 시트에 위와 같은 코드를 작성하거나, 웹 페이지의 <head> 요소 안에 <style> 요소를 추가해 작성할 수 있습니다.

<head>
  <style>
    @media screen and (min-width: 800px) {
      body {
        font-size: 16px;
      }
    }
  </style>
</head>

또는 외부 스타일 시트를 추가해 사용할 수도 있습니다.

2. 웹 페이지의 글자 크기를 조절할 수 있는 CSS 단위로 vw(viewport width)를 사용할 수도 있습니다. vw 단위는 웹 페이지의 가로 길이의 1%를 의미합니다. 이를 이용해 웹 페이지의 글자 크기를 조절할 수 있습니다.

예를 들어, 웹 페이지 전체의 글자 크기를 화면 가로 길이의 10%로 설정하고 싶다면 아래와 같이 작성할 수 있습니다.

div {
  width: 50vw;
}

이렇게 작성한 스타일은 웹 페이지의 가로 길이가 커질수록 글자 크기가 커지게 됩니다.

vw 단위는 웹 페이지의 글자 크기 조절에만 사용할 수 있는 것은 아닙니다. 예를 들어, 웹 페이지의 요소의 너비를 화면 가로 길이의 50%로 설정하고 싶다면 아래와 같이 작성할 수 있습니다.

3. 웹 페이지의 글자 크기를 조절할 수 있는 CSS 단위로 vh(viewport height)를 사용할 수도 있습니다. vh 단위는 웹 페이지의 세로 길이의 1%를 의미합니다. 이를 이용해 웹 페이지의 글자 크기를 조절할 수 있습니다. 예를 들어, 웹 페이지 전체의 글자 크기를 화면 세로 길이의 10%로 설정하고 싶다면 아래와 같이 작성할 수 있습니다.

body {
  font-size: 10vh;
}

vh 단위는 웹 페이지의 글자 크기 조절에만 사용할 수 있는 것은 아닙니다. 예를 들어, 웹 페이지의 요소의 높이를 화면 세로 길이의 50%로 설정하고 싶다면 아래와 같이 작성할 수 있습니다.

div {
  height: 50vh;
}

4. 웹 페이지의 글자 크기를 조절할 수 있는 CSS 단위로 vmin을 사용할 수도 있습니다. vmin 단위는 웹 페이지의 가로 길이와 세로 길이 중 작은 값의 1%를 의미합니다. 이를 이용해 웹 페이지의 글자 크기를 조절할 수 있습니다. 예를 들어, 웹 페이지 전체의 글자 크기를 화면 가로 길이와 세로 길이 중 작은 값의 10%로 설정하고 싶다면 아래와 같이 작성할 수 있습니다.

body {
  font-size: 10vmin;
}

웹 페이지의 글자 크기를 조절할 수 있는 CSS 단위로 vmin을 사용할 수도 있습니다. vmin 단위는 웹 페이지의 가로 길이와 세로 길이 중 작은 값의 1%를 의미합니다. 이를 이용해 웹 페이지의 글자 크기를 조절할 수 있습니다. 예를 들어, 웹 페이지 전체의 글자 크기를 화면 가로 길이와 세로 길이 중 작은 값의 10%로 설정하고 싶다면 아래와 같이 작성할 수 있습니다. Copy code body { font-size: 10vmin; } 이렇게 작성한 스타일은 웹 페이지의 가로 길이와 세로 길이 중 작은 값이 커질수록 글자 크기가 커지게 됩니다.

5. vmin 단위는 웹 페이지의 글자 크기 조절에만 사용할 수 있는 것은 아닙니다. 예를 들어, 웹 페이지의 요소의 크기를 화면 가로 길이와 세로 길이 중 작은 값의 50%로 설정하고 싶다면 웹 페이지의 글자 크기를 조절할 수 있는 CSS 단위로 vmax를 사용할 수도 있습니다. vmax 단위는 웹 페이지의 가로 길이와 세로 길이 중 큰 값의 1%를 의미합니다. 이를 이용해 웹 페이지의 글자 크기를 조절할 수 있습니다. 예를 들어, 웹 페이지 전체의 글자 크기를 화면 가로 길이와 세로 길이 중 큰 값의 10%로 설정하고 싶다면 아래와 같이 작성할 수 있습니다.

body {
  font-size: 10vmax;
}

6. 웹 페이지의 글자 크기를 조절할 때 유용한 기술 중 하나가 자바스크립트를 이용한 글자 크기 조절입니다. 이를 위해서는 자바스크립트로 웹 페이지의 글자 크기를 조절할 수 있는 요소의 참조값을 얻어야 합니다. 예를 들어, 아래와 같은 웹 페이지가 있다고 가정해봅시다.

<html>
  <body>
    <div id="content">
      이곳의 글자 크기를 조절하고 싶습니다.
    </div>
  </body>
</html>

이 경우, 자바스크립트로 웹 페이지의 글자 크기를 조절하고 싶다면 아래와 같은 코드를 작성할 수 있습니다.

const content = document.getElementById("content");
content.style.fontSize = "20px";