Middle-Homework/web.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
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Middle_Homework_web</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1>Web</h1>
    </header>

    <main>
      <section class="card-section">
        <div class="card">
          <div class="image-card">
            <img
              src="img/web_1.png"
              alt="webhacking.kr문제 풀이"
              class="card-img"
            />
            <p class="card-caption">
              "webhacking.kr"문제 풀이 <br /><br />"HTML과 JavaScropt의 기본을
              익히고, 각 태그의 역할을 이해하며, DOM 조작(innerHTML, style)과
              location.href 등을 활용한 문제 풀이를 통해 비정상적인 웹 구조를
              분석하고 해결하는 능력을 향상 시켰습니다."
            </p>
          </div>
        </div>

        <div class="card">
          <div class="image-card">
            <img src="img/web_2.png" alt="HTML Injection" class="card-img" />
            <p class="card-caption">
              HTML Injection <br /><br />"Reflected와 Stored 형태의 HTML
              Injection 문제를 풀이하며, 먼저 Injection에 대한 개념을 확실히
              이해하였고, 반복적인 문자열 패턴 등의 단서를 활용해 연습과
              테스트기를 성실히 수행하여 성공적으로 해결했습니다."
            </p>
          </div>
        </div>

        <div class="card">
          <div class="image-card">
            <img src="img/web_3.png" alt="Web CTF" class="card-img" />
            <p class="card-caption">
              Web CTF <br /><br />문제 풀이를 기반으로 문자열의 개념과
              인코딩/디코딩 (ASCII, Base64, 치환암호)을 학습할 수 있는 계기가
              되었습니다. 이후 React와 Tailwind CSS를 사용해 깔끔한 UI로
              구현하기 위해 노력했습니다.
            </p>
          </div>
        </div>

        <div class="card">
          <div class="image-card">
            <img src="img/web_4.png" alt="Web CTF" class="card-img" />
            <p class="card-caption">
              Web CTF <br /><br />문제 풀이를 기반으로 문자열의 개념과
              인코딩/디코딩 (ASCII, Base64, 치환암호)을 학습할 수 있는 계기가
              되었습니다. 이후 React와 Tailwind CSS를 사용해 깔끔한 UI로
              구현하기 위해 노력했습니다.
            </p>
          </div>
        </div>

        <div class="card">
          <div class="image-card">
            <img src="img/web_5.png" alt="URL Redirection" class="card-img" />
            <p class="card-caption">
              URL Redirection <br /><br />"Open Redirection 취약점이 피싱 공격과
              어떻게 연결되는지 공부하였습니다. HTTP 상태 코드의 역할과 반응,
              SEO 조작의 위험성을 알고, Flask 기반으로 공격과 방어 실습을
              진행하며 웹 보안의 핵심을 익혔습니다.
            </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>