투케이2K

498. (javaScript) 자바스크립트 forEach 사용해 태그 공통 스타일 지정 및 p , h1 , div 태그에 json 데이터 pretty 정렬 출력 수행 본문

JavaScript

498. (javaScript) 자바스크립트 forEach 사용해 태그 공통 스타일 지정 및 p , h1 , div 태그에 json 데이터 pretty 정렬 출력 수행

투케이2K 2026. 3. 1. 09:55
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

[소스 코드]

 

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / JSON / forEach / JSON.stringify


- 사전) JSON.stringify 함수 간단 설명 : 

  >> JSON.stringify 는 자바스크립트 객체를 사람이 읽기 좋은 문자열(JSON 문자열)로 변환하는 함수입니다.

  >> JSON.stringify 기본 형태 : JSON.stringify(value, replacer, space)

    - value : 변환할 자바스크립트 데이터
    - replacer : null (아무것도 걸러내지 않고 모든 데이터 그대로 변환) / 배열로 사용 (포함하고 싶은 key만 선택)
    - space : 들여쓰기(indent)를 몇 칸으로 할지 결정 (숫자 2 → 2칸 들여쓰기 / 숫자 4 → 4칸 들여쓰기)

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">

        // --------------------------------------------------------------------------------------------------------------

        // [html 최초 로드 및 이벤트 상시 대기 실시]
        window.onload = async function() {
          console.log("");
          console.log("=========================================");
          console.log("[window onload] : [start]");
          console.log("=========================================");
          console.log("");

          try {

            // -------------------------------------
            // JSON 데이터 만들기                  
            // ------------------------------------- 
            const json = {
              name: 'TWOK',
              addr: 'seoul',
              sex: true
            };

            console.log("default json : ", JSON.stringify(json));


            // -------------------------------------
            // ✅ JSON.stringify(data, null, 2) 방식 사용해 JSON 데이터 들여쓰기 수행
            // -------------------------------------            
            const pretty = JSON.stringify(json, null, 2);

            console.log("pretty json : ", pretty);


            // -------------------------------------
            // h1, p, div 태그 객체 정의
            // -------------------------------------
            const h1Tag = document.getElementById('h1Tag');
            const pTag = document.getElementById('pTag');
            const divTag = document.getElementById('divTag');


            // -------------------------------------
            // h1, p, div 태그 공통 스타일 동적 지정
            // -------------------------------------
            // whiteSpace = "pre-wrap" : 요소 안의 텍스트에서 줄바꿈(\n)과 연속 공백을 보존하면서도, 줄이 너무 길면 자동 줄바꿈합니다.
            // -------------------------------------
            // fontFamily = 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace' : 텍스트를 고정폭(모노스페이스) 폰트로 표시. JSON/코드 출력은 가독성이 좋아집니다.
            // -------------------------------------
            // lineHeight = "1.35" : 줄 간격을 설정합니다. 가독성과 밀도의 균형을 잡는 핵심 속성
            // -------------------------------------
            // margin = "0 0 12px 0" : 바깥 여백 (상·우·하·좌) 을 지정합니다
            // -------------------------------------
            [h1Tag, pTag, divTag].forEach(el => {
              el.style.whiteSpace  = "pre-wrap";
              el.style.fontFamily  = 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace';
              el.style.lineHeight  = "1.35";
              el.style.margin      = "0 0 12px 0"; // 필요 시
            });


            // -------------------------------------
            // h1, p, div 태그에 pretty json 데이터 지정
            // -------------------------------------
            // textContent 는 문자열을 순수 텍스트로만 넣습니다.
            // -------------------------------------
            /*
            pretty json :  {
              "name": "TWOK",
              "addr": "seoul",
              "sex": true
            }
            */
           // -------------------------------------
            h1Tag.textContent  = pretty;
            pTag.textContent  = pretty;
            divTag.textContent  = pretty;

          }
          catch (exception) {
            console.error("");
            console.error("=========================================");
            console.error("[window onload] : [Exception] : 예외 상황 발생");
            console.error("-----------------------------------------");
            console.error(exception);
            console.error("=========================================");
            console.error("");

          }

        };

        // --------------------------------------------------------------------------------------------------------------

    </script>


</head>


<body>

  <h1 id="h1Tag"></h1>
  <p id="pTag"></p>
  <div id="divTag"></div>


  <!-- [태그에 즉시 추가하는 방법] -->
  <!-- <div id="divTag" style="white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; line-height: 1.35; margin: 0 0 12px 0;"></div> -->

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[동적으로 div 레이아웃 생성 및 스타일 속성 지정 실시]

https://kkh0977.tistory.com/833

https://blog.naver.com/kkh0977/222390679369?trackingCode=blog_bloghome_searchlist


[body 클릭 이벤트 감지, 동적 div 레이아웃 생성 및 클릭 이벤트 확인 - document body onclick]

https://kkh0977.tistory.com/848

https://blog.naver.com/kkh0977/222392829774?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

500. (javaScript) 자바스크립트 동적 html 코드 및 style 코드 작성 후 window open 동작 테스트  (0) 2026.03.01
499. (javaScript) 자바스크립트 동적 html 코드 작성 및 Script 스크립트 코드 작성 후 window open 동작 테스트  (0) 2026.03.01
497. (javaScript) 자바스크립트 sql-formatter 라이브러리 사용해 기본 SQL 코드 자동 정렬 및 출력 수행  (0) 2026.03.01
496. (javaScript) 자바스크립트 AWS CloudWatch 특정 로그 스트림에서 로그 이벤트 (Log Events) 를 조회 수행 - GetLogEvents  (0) 2026.02.27
495. (javaScript) 자바스크립트 AWS CloudWatch 특정 로그 그룹안에 존재하는 로그 스트림 목록 조회 수행 - DescribeLogStreams  (0) 2026.02.24
'JavaScript' Related Articles more
Comments