javascriptWithStudy/index.html at main · Kimsj912/javascriptWithStudy · GitHub

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
      .list-group-item.active {
        background-color: #198754;
        border-color: #198754;
      }
    </style>
</head>
<body>
    <!-- header -->
    <div class="jumbotron text-center mb-0 bg-dark p-3 text-light">
        <h1 style="font-weight: bolder;">실제 페이지 구현 예시</h1>
        <p>그동안 만들었던 짬공부를 한눈에 살펴보세요!</p>
    </div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand fw-bold" href="#">📟텔토단📟</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Move To Page</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- content -->
    <!-- real contents -->
    <div class="container d-flex align-items-center">
      <div class="mtpContent row row-cols-sm-1 row-cols-2 row-cols-md-2 row-cols-lg-4 m-2">
      </div>
    </div>

    <!-- footer -->
    <div class="jumbotron text-center mt-5 mb-0 bg-light">
        <h3 calss="text-secondary">Javascript With Study </h3>
        <p>문의사항이 있으시다면 @Kimsj912에게 연락바랍니다 :)</p>
    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script>
    const mtpContent = document.querySelector(".mtpContent");
    const crew = [
    // << one unit
    {
      title : "대장의 플레이그라운드",
      projAdr : "./Kim_Sujeong/index.html",
      description : "👋안녕하세요👋<br> 자바스크립트 스터디 텔레토비조작단의 대장 김수정입니다! 제가 만든 짬공부를 확인해보세요 :)"
    },
    // one unit >>
    {
      title : "부대장의 플레이그라운드",
      projAdr : "./Han_Seunghoon/index.html",
      description : "👋안녕하세요👋<br>실질적인 리더 부대장 한승훈입니다!<br>저의 짬공부 페이지에 들어오셔서 한번 구경하시고 가세요"
    },
    {
      title : "예은님의 플레이그라운드",
      projAdr : "./Yun_Yeeun/index.html",
      description : "👋안녕하세요👋"
    },
    {
      title : "연준님의 플레이그라운드",
      projAdr : "./Park_Yeonjun/index.html",
      description : "👋안녕하세요👋"
    },
  ]

  init();
  function init(){
    mtpContent.innerHTML = "";
    let str = "";
    crew.forEach(function(info){str+=addChild(info);});
    mtpContent.innerHTML = str;
  }


  function addChild(info){
    return  `<!-- one unit -->
      <div class="col card p-3 m-3 col-2" style="width: 18rem;">
          <iframe src="${info.projAdr}" class="card-img-top" frameborder="0" scrolling="no"></iframe>
          <div class="card-body" style="text-align: center;">
            <p class="card-title font-weight-bold"><${info.title}></p>
            <hr>
            <small class="card-text" style="height : 40%">${info.description}</small>
            </div>
            <a role="button" class="btn btn-success" href="${info.projAdr}">페이지로 이동하기</a>
      </div>`;
  }

</script>

</html>