JavaScript_Study/gallery.html at main · Seaya-do/JavaScript_Study · 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!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>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
        *{ box-sizing:border-box;}
        body{
            /* font-family: 'Gothic A1', sans-serif; */
            font-family: 'Poppins', sans-serif;
            font-size:16px;
            color:#333;
            margin:0;
        }
        a,a:link{
            text-decoration:none;
            color:#333;
        }
        a:hover{
            color:#000;
            text-decoration: underline;
        }
        nav{
            background:rgb(255 255 255 /80%);
            padding:10px;
            font-size:40px;
            font-weight:800;
            position:fixed;
            top:0;
            left:0;
            width:100%;
            text-align:center;
            font-variant: small-caps;
        }
        .container{
            max-width:1330px;
            margin:80px auto 40px;
        }
        .row{
            margin-left:-15px;
            margin-right:-15px;
            display:flex;
            flex-wrap: wrap;
        }
        .col{

            padding:15px;
        }
        .col img{
            max-width:100%;
        }
        .col h1{
            white-space:nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
        }
        .popup{
            width: 540px;
            height: 540px;
            background: #eff5e9;
            position: fixed;
            z-index: 100;
            left: 50%;
            transform: translateX(-50%);
            top: 150px;
            box-shadow: 0 0 25px 0 rgba(0,0,0,0.3);
            display: none;


        }
        popup img{
            max-width: 540px;
        }
        /*
        position:absolute 나 position:fixed를 정가운데 놓는 공식
       1. calc(50% - 가로넓이의 절반);
       2. left:50%
          transform: translateX(-50%);
        */


        @media screen and(max-width:1200px){
            .col img{
            width:33.333334%;
        }
        @media screen and(max-width:600px){
            .col img{
             max-width:100%;
        }

        }
    }

    </style>
    <script src="../jquery/jquery.min.js"></script>
    <script>
        $(function(){
        /*
        대입연산 `0${n}.gif` -백틱태그


        */
           let str='';
           let n;
           for(let i=0; i < 12; i++){
              if(i < 9){
                 n = '0'+(i+1);  //01 02 03 04  09
              }else{
                 n = (i + 1); //10 11 12
              }
              str += '<div class="col">';
              str += '<img src="../image/0'+n+'.gif" alt="001">';
              str += '<h1>Ruffled Flock Dot Lace</h1>';
              str += '<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>';
              str += '</div>';
           }
           $('.row').html(str);
           /* html로 row를 보냄 */
           $('.col').click(function(){
            const img = $(this).find('img').attr('src');
            $('.popup').html(`<img src="${img}" alt="${img}"/>`);
            $('.popup').fadeIn(300);

           });
           $('.popup').click(function(){
            $(this).fadeOut(200);
           });


        });
    </script>
</head>
<body>
    <nav>Gallery</nav>
    <div class="container">
        <div class="row">
            <!-- loop -->
            <div class="col">
                <img src="../image/001.gif" alt="001">
                <h1>Ruffled Flock Dot Lace</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            <!--./ loop -->
        </div>
    </div>
    <div class="popup">
        TEXT

    </div>
</body>
</html>