티스토리 뷰

Front-end/Basic

HTML+CSS+자바스크립트 웹 표준의 정석 16장 마무리 문제

poopooreum 2024. 7. 2. 21:41
반응형

✏️ 16장 마무리 문제 - 1번

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>16-1 마무리 문제</title>
    <style>
      p {
        margin-top: 20px;
        font-size: 1.2em;
        text-align: center;
      }
      .display {
        color: blue;
        font-size: 1.5em;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p>현재 시각 <span id="current" class="display"></span></p>
    <script>
      setInterval(displayNow, 1000);

      function displayNow() {
        var now = new Date();
        var currentTime = now.toLocaleTimeString();

        document.querySelector("#current").innerHTML = currentTime;
      }
    </script>
  </body>
</html>

✏️ 16장 마무리 문제 - 2번

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>16-2 마무리 문제</title>
    <style>
      #container {
        width: 200px;
        margin: 50px auto;
      }
      button {
        border: 1px solid black;
        background: #fff;
        padding: 20px 30px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <button id="btn">현재 시간 보기</button>
    </div>

    <script>
      document.getElementById("btn").onclick = displayTime;

      function displayTime() {
        var left = (screen.availWidth - 400) / 2;
        var top = (screen.availHeight - 200) / 2;
        var opt =
          "left=" + left + ",top=" + top + ",width=" + 400 + ",height=" + 200;
        window.open("current.html", "", opt);
      }
    </script>
  </body>
</html>

// current.html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>현재 시각</title>
  <style>
    * {
      margin:0;
      padding:0;
      overflow:hidden;
    }
    #container{
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:100vh;
    }
    p {
      font-size:1.2em;
    }
    .display {
      font-size:1.5em; 
      font-weight:bold;
      color:blue;
    }
  </style>
</head>
<body>
  <div id="container">
    <p>현재 시각 <span id="current" class="display"></span></p>
  </div>

  <script>
    setInterval(displayNow, 1000);  // 1초마다 시간 계산 함수 실행

    function displayNow() {  // 시간 계산 함수
      var now = new Date();     // Date 객체의 인스턴스를 만듦      
      var currentTime = now.toLocaleTimeString();     //  toLocaleTmeString() 메서드를 사용해 지역에 맞는 시간을 가져옴

      document.querySelector("#current").innerHTML = currentTime;   // id="current" 인 요소에 현재 시간 표시
    }
  </script>
</body>
</html>
반응형
저작자표시 비영리 변경금지

'Front-end > Basic' 카테고리의 다른 글

HTML+CSS+자바스크립트 웹 표준의 정석 15장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 12장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 11장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 10장 마무리 문제  (0) 2024.07.02
HTML+CSS+자바스크립트 웹 표준의 정석 9장 마무리 문제  (0) 2024.07.02
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함