투케이2K

185. (TWOK/UTIL) [Web/JavaScript] AWS 관리자 대시 보드 만들기 기본 Web Template 템플릿 포맷 HTML 파일 본문

투케이2K 유틸파일

185. (TWOK/UTIL) [Web/JavaScript] AWS 관리자 대시 보드 만들기 기본 Web Template 템플릿 포맷 HTML 파일

투케이2K 2026. 4. 9. 19:28
728x90
반응형

[설 명]

​

프로그램 : Web / JavaScript

​

설 명 : [Web/JavaScript] AWS 관리자 대시 보드 만들기 기본 Web Template 템플릿 포맷 HTML 파일

​

 

[화면 첨부]

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : Web / JavaScript (자바스크립트) / AWS / Dashboard


- 사전) 👉 AWS 아마존 웹 서비스 간략 설명 : 

  >> Amazon Web Services (AWS) 는 전 세계적으로 분포한 데이터 센터에서 200개가 넘는 완벽한 기능의 서비스를 제공하는, 세계적으로 가장 포괄적이며, 널리 채택되고 있는 클라우드입니다.

  >> Amazon Web Services (AWS) 는 2006년에 공식 서비스를 시작했으며, 기타 웹 사이트나 클라이언트 사이드 애플리케이션을 위한 폭 넓은 온라인 서비스들을 제공합니다.

  >> Amazon Web Services (AWS) 의 각종 서비스는 REST 프로토콜 및 SOAP 프로토콜을 통해 접근, 이용 및 관리가 가능하며, 비용은 실제 사용량에 따라 결정됩니다.

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





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

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>AWS Admin Dashboard</title>

  <!-- ✅ Bootstrap CSS (정상) -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

  <style>
    :root {
      --bg-main: #000000;
      --bg-panel: #000000;
      --bg-content: #353535;
      --bg-input: #0a0a0a;
      --border-color: #000000;
      --text-main: #e5e7eb;
      --text-sub: #9ca3af;
      --primary: #2563eb;
    }

    body {
      background: var(--bg-main);
      color: var(--text-main);
    }

    .sidebar {
      width: 260px;
      background: var(--bg-panel);
      min-height: 100vh;
      padding: 16px 12px;
      border-right: 1px solid var(--border-color);
      transition: width 0.25s ease;
      overflow: hidden;
    }

    .sidebar.collapsed {
      width: 72px;
    }

    .sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .sidebar-header h4 {
      margin: 0;
      font-weight: 700;
      white-space: nowrap;
    }

    .sidebar.collapsed h4 {
      display: none;
    }

    .toggle-btn {
      background: none;
      border: none;
      color: #fff;
      font-size: 1.3rem;
      cursor: pointer;
    }

    .sidebar a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      color: var(--text-sub);
      border-radius: 6px;
      text-decoration: none;
      margin-bottom: 6px;
      cursor: pointer;
      white-space: nowrap;

      font-size: 0.875rem; /* ✅ 약 14px */
    }

    .sidebar a span {
      transition: opacity 0.2s;
    }

    .sidebar.collapsed a span {
      opacity: 0;
    }

    .sidebar a.active,
    .sidebar a:hover {
      background: #1f2937;
      color: #fff;
    }

    .content {
      background: var(--bg-content);
      padding: 24px;
      min-height: 100vh;
    }

    .panel {
      background: var(--bg-panel);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
    }

    .view-container {
      display: none;
    }

    .view-container.active {
      display: block;
    }
  </style>
</head>

<body>
<div class="d-flex">

  
  <aside class="sidebar" id="sidebar">

    <div class="sidebar-header">
      <h4>AWS Admin</h4>
      <button class="toggle-btn" onclick="toggleSidebar()">☰</button>
    </div>

    <!-- ✅ 상단 핵심 메뉴 -->
    <a class="active" onclick="showView('dashboard', this)">
      📊 <span>Dashboard</span>
    </a>

    <a onclick="showView('awsAuth', this)">
      🔐 <span>AWS Auth</span>
    </a>

    <a onclick="showView('mqtt', this)">
      📡 <span>AWS MQTT</span>
    </a>

  </aside>


  <main class="content flex-grow-1">

    <div id="dashboardView" class="view-container active">
      <div class="panel">
        <h5>Dashboard</h5>
      </div>
    </div>

    <div id="awsAuthView" class="view-container">
      <div class="panel">
        <h5>AWS Auth</h5>
      </div>
    </div>

    <div id="mqttView" class="view-container">
      <div class="panel">
        <h5>AWS MQTT</h5>
      </div>
    </div>
    
  </main>
</div>

<script>

  // ✅ 메뉴클릭에 따른 콘텐츠 영역 표시 스크립트 함수
  function showView(view, el) {
    document.querySelectorAll('.view-container')
      .forEach(v => v.classList.remove('active'));
    document.querySelectorAll('.sidebar a')
      .forEach(a => a.classList.remove('active'));
    document.getElementById(view + 'View').classList.add('active');
    el.classList.add('active');
  }

  function toggleSidebar() {
    document.getElementById('sidebar').classList.toggle('collapsed');
  }
</script>

</body>
</html>

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





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

▶️ [일상/스케줄] [참관] [2024-05-16] Aws Summit 코엑스 참관 후기

https://kkh0977.tistory.com/6181

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


▶️ [Aws Iot Core] Credential Provider Endpoint 크리덴셜 엔드포인트 임시 AWS 자격 증명 획득 URL 설명 정리

https://kkh0977.tistory.com/8364

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


▶️ [Amazon Region] Aws 리전 설명 정리 - 지리적 구분

https://kkh0977.tistory.com/7914

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

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

'투케이2K 유틸파일' 카테고리의 다른 글

186. (TWOK/UTIL) [Web/JavaScript] Toastify.js 라이브러리 사용해 웹 브라우저 토스트 메시지 표시 파일  (0) 2026.04.10
184. (TWOK/UTIL) [Android/Java] [기능 보완] Tcp Ip Socket 소켓 통신 클라이언트 모듈 - 데이터 송수신 중 서버 소켓 종료 대응  (0) 2026.03.30
183. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 img.src 및 fetch api 사용해 브라우저 실제 네트워크 사용 가능 상태 확인  (0) 2026.03.27
182. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 window.open 팝업창 새창 열기 수행 시 브라우저 팝업 차단 권한 체크 코드  (0) 2026.03.04
181. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 AWS IAM 계정 유효성 검증 및 최근에 사용 된 서비스 정보 확인  (0) 2026.02.01
'투케이2K 유틸파일' Related Articles more
Comments