web.book/index.html at main · junsujin/web.book · 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>고3</title>
    <style>
        h3.accent{
            background-color: rgb(232, 244, 255);
            color: rgb(35, 56, 70);
            padding: 5px;
            border-radius: 5px;
        }
        div{
            margin: 10px;
        }
        .manu{
            padding: 20px;
            border: 1px solid #ccc;
        }
        .box1{
            width: 220px;
            height: 350px;
            margin: 10px;
            padding: 15px;
            border: 2px solid red;
        }
        #fx{
            position: fixed;
            top: 15px;
            right: 30px;
            width: 400px;
            height: 50px;
            background: #ececec;
        }

        h2{
            margin-top: 30px;
            margin-bottom: 10px;
        }
        h3{
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="manu">
        <h1 style="display:inline;">←</h1>
        <h2 style="display:inline;">고3 추천도서</h2>
        <div id="fx">
            <p style="display:inline;">
                <a href="#문학" target="_top">문학</a>
                <a href="#사회과학" target="_top">사회과학</a>
                <a href="#자연과학" target="_top">자연과학</a>
                <a href="#기술과학" target="_top">기술과학</a>
                <a href="#예술" target="_top">예술</a>
            </p>
        </div>

    </div>

    <h2 id="문학">문학</h2>
    <div class="multi">
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/a.png" width="150" height="250" alt="">
            <h3 class="accent">죄와벌</h3>
            <p>표도르 도스토예프스키/민음사</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/b.png" width="150" height="250" alt="">
            <h3 class="accent">1984</h3>
            <p>조지 오웰/민음사</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/c.png" width="150" height="250" alt="">
            <h3 class="accent">백년의 고독</h3>
            <p>가브리엘 가르시아 마르케스/민음사</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/d.png" width="150" height="250" alt="">
            <h3 class="accent">나의 라임 오렌지나무</h3>
            <p>J.M. 바스콘셀로스/동녘</p>
        </div>
    </div>

    <div id="사회과학">
        <h2 id="사회과학">사회과학</h2>
        <div class="box1"style="display: inline-block; margin-right: 40px;">
            <img src="images/e.png" width="150" height="250" alt="">
            <h3 class="accent">총,균,쇠</h3>
            <p>제러드 다이아몬드/문학사상</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/f.png" width="150" height="250" alt="">
            <h3 class="accent">정의란 무엇인가</h3>
            <p>마이클 샌델/와즈베리</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/g.png" width="150" height="250" alt="">
            <h3 class="accent">제2의 성</h3>
            <p>시몬 드 보부아르/을유문화사</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/h.bmp" width="150" height="250" alt="">
            <h3 class="accent">국가는 왜 실패하는가</h3>
            <p>대런 애쓰모글루 & 제임스 A. 로빈슨/ 시공사</p>
        </div>
    </div>

    <div id="자연과학">
        <h2 id="자연과학">자연과학</h2>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/i.bmp" width="150" height="250" alt="">
            <h3 class="accent">코스모스</h3>
            <p>칼 에드워드 세이건/사이언스북스</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/j.png" width="150" height="250" alt="">
            <h3 class="accent">이기적 유전자</h3>
            <p>리처드 도킨스/을유문화사</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/k.png" width="150" height="250" alt="">
            <h3 class="accent">사피엔스</h3>
            <p>유발 하라리/김영사</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/l.png" width="150" height="250" alt="">
            <h3 class="accent">시간의 역사</h3>
            <p>스티븐 호킹/웅진지식하우스</p>
        </div>
    </div>

    <div id="기술과학">
        <h2 id="기술과학">기술과학</h2>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/m.png" width="150" height="250" alt="">
            <h3 class="accent">호모 데우스:미래의 역사</h3>
            <p>유발 하라리/김영사</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/n.png" width="150" height="250" alt="">
            <h3 class="accent">스티브 잡스</h3>
            <p>윌터 아이작슨/민음사</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/o.png" width="150" height="250" alt="">
            <h3 class="accent">제3의 물결</h3>
            <p>앨빈 토플러/홍신문화사</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/p.png" width="150" height="250" alt="">
            <h3 class="accent">구글은 어떻게 일하는가</h3>
            <p>에릭슈미트, 조나단 로젠버그/김영사</p>
        </div>
    </div>

    <div id="예술">
        <h2 id="예술">예술</h2>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/q.png" width="150" height="250" alt="">
            <h3 class="accent">방구석 미술관</h3>
            <p>조원재/블랙피쉬</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/r.png" width="150" height="250" alt="">
            <h3 class="accent">창조적 행위</h3>
            <p>릭 루빈/코쿤북스</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/s.png" width="150" height="250" alt="">
            <h3 class="accent">실용음악 기초 화성학</h3>
            <p>이채현/1458music</p>
        </div>
        <div class="box1" style="display: inline-block; margin-right: 40px;">
            <img src="images/t.png" width="150" height="250" alt="">
            <h3 class="accent">김락희의 인체 드로잉</h3>
            <p>김락희/성안당</p>
        </div>
    </div>
</body>
</html>