이 함수는 본 블로그를 위해 chatGPT에게 의뢰하여 만든 함수이다. chatGPT가 없으면 만들어내기 힘든 함수인데, chatGPT 덕분에 너무 쉽게 만들 수 있었다.

본 블로그에 모바일 테마를 적용하면, 잃는 것이 더 많기 때문에, 특정 DIV(혹은 어떤 요소)의 폰트 사이즈를 변경해주는 자바스크립트 함수가 필요했다.

화면 너비가 1200 이하일 때, id가 very_special_content인 요소를 잡아서 그 안의 텍스트의 사이즈를 증가시켜주는 방식이다.
※ 여기서는 1200 이하를 모바일로 간주한 것이다. chatGPT는 768을 추천했었다.
※ 단, id가 exception인 요소의 경우에는 폰트 크기를 변경하지 말라는 코드도 함께 있다.

<script type="text/javascript">
function increaseFontSizesInDiv() {
  // 현재 화면 너비를 가져옵니다.
  var screenWidth = window.innerWidth;

  if (screenWidth < 1200) {  // 여기서는 가로 1200 이하일 때만 폰트 사이즈 변경
    // 대상 div 요소를 선택합니다.
    var divElement = document.getElementById("very_special_content");

    if (divElement) {
      // div 요소 안의 모든 텍스트 요소를 선택합니다.
      var textElements = divElement.querySelectorAll("p, span, h1, h2, h3, h4, 
                                          h5, h6, a, li, td, th, div, td, strong");

      // 각 텍스트 요소의 폰트 크기를 조절합니다.
      for (var i = 0; i < textElements.length; i++) {
        // 대상 div의 ID가 "exception"인 경우 폰트 크기 변경 제외(해당 div 안의 모든 객체 제외)
        if (textElements[i].closest("#exception")) {
          continue;
        }

        var currentFontSize = window.getComputedStyle(textElements[i]).fontSize;
        var currentFontSizeNumeric = parseFloat(currentFontSize);
        if (!isNaN(currentFontSizeNumeric)) {
          var unit = currentFontSize.endsWith("px") ? "px" : currentFontSize.endsWith("pt") ? "pt" : "px";
          var sizeIncrement = unit === "px" ? 6 : unit === "pt" ? 6 : 0;

          var newFontSize = currentFontSizeNumeric + sizeIncrement;
          textElements[i].style.fontSize = newFontSize + unit;
        }
      }
    }
  }
}

// 페이지 로드 시 폰트 크기 증가 함수를 호출합니다.
increaseFontSizesInDiv();

// 화면 크기가 변경될 때마다 폰트 크기를 조절하는 이벤트 리스너를 등록합니다.
//window.addEventListener("resize", increaseFontSizesInDiv); // 필요하면 넣을 것

</script>

chatGPT와 함께 하는 프로그래밍은 편하고 즐거우며 놀랍다. Good!