git_self/seungwon.html at main · seungwon-yu/git_self · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css_sw.css" />
    <title>자기소개</title>
    <script>
      // 로딩될때 pages와 container받아오기 > container에서 overflow되기때문에
      document.addEventListener('DOMContentLoaded', function () {
        let pages = document.querySelectorAll('.pages');
        let container = document.getElementById('container');

        function checkVisibility() {
          pages.forEach((page) => {
            let visable = page.getBoundingClientRect();
            if (visable.top < window.innerHeight * 0.75 && visable.bottom > 0) {
              page.classList.add('visible');
            } else {
              page.classList.remove('visible');
            }
          });
          // 각 파일이 읽어올때 getboundingclientrect함수로 위치정보를 받아와서 visible 클래스 추가,제거
        }
        checkVisibility();
        container.addEventListener('scroll', checkVisibility);
      });
    </script>
  </head>
  <body>
    <div id="container">

      <div class="pages">
        <div class="cover">
          <img src="./444.jpg" alt="" width="450px" height="500px" />
          <h3 class="intext_left">
            자기소개 : 안녕하세요 IT`s your life 14회차 유승원입니다
            <br />
            개발 공부를 차근차근 다시 해나가기 위해 지원하게 되었습니다!
            <br />
            취미 - 농구 볼링 축구 야구등 구기종목을 다 좋아합니다
            <br />
            직접 하는것도 좋아하고 경기를 보는것도 좋아합니다
            <br />
            물론 게임하는것도 좋아하고 다양한 게임에 관심이 많이 웬만한 게임은 다 해본것 같습니다 :)
            <br />
            음악 - 인디음악과 팝송을 좋아합니다 주로 듣는 가수는 경제환, Myles Smith, Teddy Swims등등 자주듣습니다
          </h3>
          <h3 class="intext_left">
            이름 : 유승원
            <br />
            나이 : 97년생
            <br />
            MBTI : infp
            <br />
            전공 : 정보통신공학과
            <br />
            거주지 : 서초구
          </h3>
        </div>
      </div>

      <div class="pages">
        <div class="cover">
          <img src="./555.jpg" width="60%" height="60%" />
          <h3 class="intext_right">


             여행을 다니는 것도 좋아합니다

             해외여행을 주로 갔는데,

             미국 일본 캐나다 베트남 태국 중국 등등 다양한 나라를 다녀 왔습니다

             그중에 미국 LA에서 찍은 사진이 이뻐서 보여드릴게요 😀
          </h3>
        </div>
      </div>

      <div class="pages">
        <div class="cover">
          <div class="sort_img">
            <div class="imgs">
              <img class="list_img" src="./123.jpg" alt="" />
            </div>

            <div class="imgs">
              <img class="list_img2" src="./234.jpg" alt="" />

            </div>
            <h3 class="intext_right">마지막으로 제가 키우는 반려견 라떼를 보여드릴게요

                제가 낯을 좀 가려서 조용히 다니지만 말 걸어주시는건 언제나 환영입니다 :)

                앞으로 6개월 함께 힘내봐요
            </h3>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>