Middle-Homework/notweb.html at main · Interludeal/Middle-Homework · 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
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Middle_Homework_notweb</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1>NotWeb</h1>
    </header>

    <main>
      <section class="card-section">
        <div class="card">
          <div class="image-card">
            <img
              src="img/notweb_1.png"
              alt="Fire wall / Spoofing"
              class="card-img"
            />
            <p class="card-caption">
              Fire wall / Spoofing <br /><br />"방화벽으로 Dos 공격을 막고, 패킷
              스니핑과 스푸핑의 위험에 대하어 공부했습니다. HTTP, HTTPS, SSH
              포트의 역할과 VPN으로 네트워크를 보호하는 방법을 익혔습니다.
            </p>
          </div>
        </div>

        <div class="card">
          <div class="image-card">
            <img src="img/notweb_2.png" alt="LCA 알고리즘" class="card-img" />
            <p class="card-caption">
              LCA 알고리즘 <br /><br />트리 구조에서 두 노드의 최근 공통
              조상(LCA)을 찾는 알고리즘은 이진 리프팅을 사용해 쿼리당 O(log
              N)으로 효율적으로 계산됩니다. 이는 네트워크 경로 분석, 소셜
              네트워크의 공통 연결점 탐색, 데이터베이스 계층 구조 분석 등에
              활용됩니다.
            </p>
          </div>
        </div>

        <div class="card">
          <div class="image-card">
            <img
              src="img/notweb_3.png"
              alt="Abstract Data Type"
              class="card-img"
            />
            <p class="card-caption">
              Abstract Data Type <br /><br />push, pop연산을 통해 자료를
              관리하는 LIFO 구조의 스택을 이해하고, FIFO 구조의 큐를
              이해했습니다. 실제 배열과 연결 리스트를 사용해봤으며, 이는
              알고리즘 문제 해결과 시스템 설계(작업 스케줄링, 네트워크 큐)에
              용이합니다.
            </p>
          </div>
        </div>

        <div class="card">
          <div class="image-card">
            <img src="img/notweb_4.png" alt="Toy Project" class="card-img" />
            <p class="card-caption">
              Toy Project <br /><br />플레이어 관리, 턴 기반 진행, 매트릭스 기반
              게임 보드를 포함하여 게임 개발을 하였습니다. 평소보단 비교적
              장기간동안 진행하였으며, Python의 활용능력이 대폭 상승하는 계기가
              되었습니다.
            </p>
          </div>
        </div>
      </section>

      <section class="nav-links">
        <div class="nav-buttons">
          <div class="nav-item">
            <a href="index.html"
              ><img src="img/main.png" alt="main으로 돌아가기"
            /></a>
            <div class="nav-title">main으로 돌아가기</div>
            <div class="nav-caption">클릭하여 이동</div>
          </div>
        </div>
      </section>
    </main>

    <footer>
      <p>JJS's Portfolio</p>
    </footer>
  </body>
</html>