성준영 / webservice-practices

Go to a project
Toggle navigation Toggle navigation pinning
성준영
fca1099d 1 parent e515a55c

quiz_3

Inline Side-by-side
Showing 9 changed files with 501 additions and 0 deletions
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +<head>
4 + <meta charset="UTF-8">
5 + <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
6 + <title>Title</title>
7 +
8 + <link rel="stylesheet" type="text/css" href="./style.css">
9 +</head>
10 +<body>
11 +<h1>레드벨벳</h1>
12 +<div class="img">
13 + <img id="velvet-image" src="./velvet.jpg">
14 +</div>
15 +
16 +<ul id="content">
17 + <li>구성원</li>
18 + <ul id="members">
19 + <li class="member">아이린</li>
20 + <li class="member">슬기</li>
21 + <li class="member">웬디</li>
22 + <li class="member">조이</li>
23 + <li class="member">예리</li>
24 + </ul>
25 + <br>
26 + <br>
27 + <br>
28 +
29 + <li id="description">설명</li>
30 + <blockquote id="description-content">
31 + SM엔터테인먼트 소속의 5인조 걸그룹.2014년 8월에 4인조로 데뷔했으며 2015년 3월 예리가 합류해 5인조가 되었다. SM엔터테인먼트에서 2012년 4월 초 데뷔한 EXO 이후로 2년 4개월만에,
32 + 걸그룹으로서는 2009년 9월 초 f(x)가 데뷔한 이후 5년만에 데뷔했다. 그리고 데뷔 앨범은 2014년 8월 4일 발매되었다. 데뷔 무대는 2014년 8월 1일 뮤직뱅크에서 가졌다.
33 + </blockquote>
34 + <br>
35 + <br>
36 + <li>소속사 : <a href="http://www.smtown.com/">SM 엔터테이먼트</a></li>
37 + <br>
38 + <li>앨범</li>
39 + <ol>
40 + <li>디지털 싱글</li>
41 + <ol>
42 + <li><a href="https://namu.wiki/w/%ED%96%89%EB%B3%B5(Happiness)">행복 (Happiness)</a></li>
43 + <li><a href="https://namu.wiki/w/Be%20Natural">Be Natural</a></li>
44 + </ol>
45 + <li>미니 앨범</li>
46 + <ol>
47 + <li><a href="https://namu.wiki/w/Ice%20Cream%20Cake">Ice Cream Cake</a></li>
48 + <li><a href="https://namu.wiki/w/The%20Velvet">The Velvet</a></li>
49 + <li><a href="https://namu.wiki/w/Russian%20Roulette">Russian Roulette</a></li>
50 + <li><a href="https://namu.wiki/w/Rookie">Rookie</a></li>
51 + </ol>
52 + <li>정규 앨범</li>
53 + <ol>
54 + <li><a href="https://namu.wiki/w/The%20Red">The Red</a></li>
55 + </ol>
56 +
57 + </ol>
58 +</ul>
59 +</body>
60 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +body {
2 + background-color: deeppink;
3 +
4 +}
5 +
6 +h1 {
7 + text-align:center;
8 + color: #f2f2f2;
9 + font-size: 60px;
10 +}
11 +
12 +blockquote {
13 + border-left: 10px solid pink;
14 + margin: 1.5em 10px;
15 + padding: 0.5em 10px;
16 +}
17 +
18 +#content {
19 + color: #f2f2f2;
20 +}
21 +
22 +#velvet-image {
23 + width : 70%;
24 + margin-left: 15%;
25 + margin-right: 15%;
26 +}
27 +
28 +#members {
29 + list-style:none;
30 + margin:0;
31 + padding:0;
32 +}
33 +
34 +.member {
35 + padding: 10px 20px 10px 20px;
36 + background-color: hotpink;
37 + margin: 5px 10px 5px 10px;
38 + border : 0;
39 + float: left;
40 +}
41 +
42 +#description {
43 + margin : 5px 10px 10px 0;
44 +}
45 +
1 +body {
2 + background-color: whitesmoke;
3 +}
4 +
5 +#container {
6 + margin: 10%;
7 +}
8 +
9 +#image-wrapper {
10 + text-align: center;
11 + margin-bottom: 30px;
12 +}
13 +
14 +#introduce-intro {
15 + margin: 30px 30px 60px 30px;
16 + text-align: center;
17 +}
18 +
19 +.introduce-description {
20 + margin: 5px 0 5px 0;
21 +}
22 +
23 +#experiment-table {
24 + width: 90%;
25 + margin: 5%;
26 + border-collapse: collapse;
27 + border-left: 0;
28 + border-right: 0;
29 +}
30 +
31 +td {
32 + padding: 10px 5px 10px 5px;
33 + border-left: 0;
34 + border-right: 0;
35 + text-align: center;
36 +}
37 +
38 +.left-header {
39 + background-color: whitesmoke;
40 +}
41 +
42 +th {
43 + padding: 10px 5px 10px 5px;
44 + border-left: 0;
45 + border-right: 0;
46 + background-color: gainsboro;
47 +}
48 +
49 +.maintitle {
50 + margin: 0 0 0 0;
51 + padding : 10px;
52 + color:white;
53 + background-color: #404040;
54 + width: 100%;
55 + position: fixed;
56 + bottom: 0;
57 + left: 0;
58 + text-align: center;
59 +}
60 +
61 +.subtitle {
62 + color: #404040;
63 +}
64 +
65 +li {
66 + margin: 5px 0 5px 0;
67 +}
68 +
69 +a {
70 + text-decoration: none;
71 + font-weight: bold;
72 +}
73 +
74 +a:hover, a:visited {
75 + color: indianred;
76 +}
77 +
78 +div {
79 + font-size: 18px;
80 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 + <meta charset="UTF-8">
5 + <title>성준영 소개페이지</title>
6 + <link rel="stylesheet" type="text/css" href="./2012104095.css">
7 +</head>
8 +<body>
9 +
10 +<div id="container">
11 + <div id="image-wrapper">
12 + <img id="introduce-image" src="profileImage.png"/>
13 + </div>
14 +
15 + <div id="introduce-intro">
16 + <h1 class="maintitle">성준영 소개페이지</h1>
17 + <div class="introduce-description"> 경희대학교 컴퓨터 공학과를 재학중인 평범한 개발자입니다.</div>
18 + <div class="introduce-description">주로 백엔드 개발에 관심이 있다고는 하지만 사실은 프론트엔드도 많이 궁금합니다.</div>
19 + </div>
20 +
21 + <div id="introduce-content">
22 + <h2 class="subtitle">이름</h2>
23 + <ul>
24 + <li>
25 + 성준영
26 + </li>
27 + </ul>
28 +
29 + <h2 class="subtitle">경력</h2>
30 + <ol>
31 + <li>경희대학교 컴퓨터공학과 - 2012.3 ~ NOW</li>
32 + <li>노마드스타 서버개발 인턴 - 2016.8 ~ 2017.3</li>
33 + </ol>
34 + <h2 class="subtitle">발표</h2>
35 + <ol>
36 + <li>경희대학교 주최 소프트콘 - <a href="http://www.slideshare.net/SungJunyoung/ss-69345868">서버의 ㅅ 자도 몰랏던 스타트업 인턴의 아마존 웹
37 + 서비스
38 + 서버 이전기</a></li>
39 + <li>네이버 D2 Campus Seminar- <a href="https://www.slideshare.net/deview/ss-72527503">텀 프로젝트에서 제품 프로젝트로</a>
40 + </li>
41 + </ol>
42 + <h2 class="subtitle">경험</h2>
43 + <table border="1px" id="experiment-table">
44 + <tr>
45 + <th><b>구분</b></th>
46 + <th><b>경험</b></th>
47 + <th><b>경험정도</b></th>
48 + </tr>
49 + <tr>
50 + <th class="left-header" rowspan="5">AWS</th>
51 + <td>EC2</td>
52 + <td rowspan="5">Medium Level</td>
53 + </tr>
54 + <tr>
55 + <td>S3</td>
56 + </tr>
57 + <tr>
58 + <td>RDS</td>
59 + </tr>
60 + <tr>
61 + <td>dynamodb</td>
62 + </tr>
63 + <tr>
64 + <td>lambda</td>
65 + </tr>
66 + <tr>
67 + <th class="left-header">PHP</th>
68 + <td>Codeigniter</td>
69 + <td>Low Level</td>
70 + </tr>
71 + <tr>
72 + <th class="left-header" rowspan="2">Javascrpt</th>
73 + <td>Frontend React.js</td>
74 + <td rowspan="2">Medium Level</td>
75 + </tr>
76 + <tr>
77 + <td>Backend Node.js</td>
78 + </tr>
79 + <tr>
80 + <th class="left-header">Java</th>
81 + <td>Spring</td>
82 + <td>Medium Level</td>
83 + </tr>
84 + </table>
85 + </div>
86 +</div>
87 +</body>
88 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +
2 +body {
3 + background-color: whitesmoke;
4 +}
5 +
6 +#container {
7 + margin: 10%;
8 +}
9 +
10 +#image-wrapper {
11 + text-align: center;
12 + margin-bottom: 30px;
13 +}
14 +
15 +#introduce-image {
16 + width: 300px;
17 + height: 300px;
18 +}
19 +
20 +#introduce-intro {
21 + margin: 30px 30px 60px 30px;
22 + text-align: center;
23 +}
24 +
25 +.introduce-description {
26 + margin: 5px 0 5px 0;
27 +}
28 +
29 +#experiment-table {
30 + width: 90%;
31 + margin: 5%;
32 + border-collapse: collapse;
33 + border-left: 0;
34 + border-right: 0;
35 +}
36 +
37 +td {
38 + padding: 10px 5px 10px 5px;
39 + border-left: 0;
40 + border-right: 0;
41 + text-align: center;
42 +}
43 +
44 +.left-header {
45 + background-color: whitesmoke;
46 +}
47 +
48 +th {
49 + padding: 10px 5px 10px 5px;
50 + border-left: 0;
51 + border-right: 0;
52 + background-color: gainsboro;
53 +}
54 +
55 +.maintitle {
56 + margin: 0 0 0 0;
57 + padding: 10px;
58 + color: white;
59 + background-color: #404040;
60 + width: 100%;
61 + position: fixed;
62 + bottom: 0;
63 + left: 0;
64 + text-align: center;
65 +}
66 +
67 +.subtitle {
68 + color: #404040;
69 +}
70 +
71 +li {
72 + margin: 5px 0 5px 0;
73 +}
74 +
75 +a {
76 + text-decoration: none;
77 + font-weight: bold;
78 +}
79 +
80 +a:hover, a:visited {
81 + color: indianred;
82 +}
83 +
84 +div {
85 + font-size: 18px;
86 +}
87 +
88 +/*모바일*/
89 +@media screen and (max-width: 768px) {
90 +
91 + #introduce-image {
92 + width: 40%;
93 + height: 40%;
94 + }
95 +
96 + div {
97 + font-size: 14px;
98 + }
99 +
100 + h2 {
101 + font-size: 18px;
102 + }
103 +
104 + li {
105 + margin: 2px 0 2px 0;
106 + }
107 +
108 + #container {
109 + margin: 3% 3% 10% 3%;
110 + }
111 +
112 + th {
113 + padding: 5px 2px 5px 2px;
114 + border-left: 0;
115 + border-right: 0;
116 + background-color: gainsboro;
117 + }
118 +
119 + td {
120 + padding: 5px 2px 5px 2px;
121 + border-left: 0;
122 + border-right: 0;
123 + text-align: center;
124 + }
125 +
126 + a:hover, a:visited {
127 + color: dodgerblue;
128 + }
129 +
130 + .maintitle {
131 + margin: 0 0 0 0;
132 + padding: 5px;
133 + font-size: 16px;
134 + width: 100%;
135 + position: fixed;
136 + bottom: 0;
137 + left: 0;
138 + text-align: center;
139 + }
140 +}
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 + <meta charset="UTF-8">
5 + <title>성준영 소개페이지</title>
6 + <link rel="stylesheet" type="text/css" href="./2012104095.css">
7 +</head>
8 +<body>
9 +
10 +<div id="container">
11 + <div id="image-wrapper">
12 + <img id="introduce-image" src="profileImage.png"/>
13 + </div>
14 +
15 + <div id="introduce-intro">
16 + <h1 class="maintitle">성준영 소개페이지</h1>
17 + <div class="introduce-description"> 경희대학교 컴퓨터 공학과를 재학중인 평범한 개발자입니다.</div>
18 + <div class="introduce-description">주로 백엔드 개발에 관심이 있다고는 하지만 사실은 프론트엔드도 많이 궁금합니다.</div>
19 + </div>
20 +
21 + <div id="introduce-content">
22 + <h2 class="subtitle">이름</h2>
23 + <ul>
24 + <li>
25 + 성준영
26 + </li>
27 + </ul>
28 +
29 + <h2 class="subtitle">경력</h2>
30 + <ol>
31 + <li>경희대학교 컴퓨터공학과 - 2012.3 ~ NOW</li>
32 + <li>노마드스타 서버개발 인턴 - 2016.8 ~ 2017.3</li>
33 + </ol>
34 + <h2 class="subtitle">발표</h2>
35 + <ol>
36 + <li>경희대학교 주최 소프트콘 - <a href="http://www.slideshare.net/SungJunyoung/ss-69345868">서버의 ㅅ 자도 몰랏던 스타트업 인턴의 아마존 웹
37 + 서비스
38 + 서버 이전기</a></li>
39 + <li>네이버 D2 Campus Seminar- <a href="https://www.slideshare.net/deview/ss-72527503">텀 프로젝트에서 제품 프로젝트로</a>
40 + </li>
41 + </ol>
42 + <h2 class="subtitle">경험</h2>
43 + <table border="1px" id="experiment-table">
44 + <tr>
45 + <th><b>구분</b></th>
46 + <th><b>경험</b></th>
47 + <th><b>경험정도</b></th>
48 + </tr>
49 + <tr>
50 + <th class="left-header" rowspan="5">AWS</th>
51 + <td>EC2</td>
52 + <td rowspan="5">Medium Level</td>
53 + </tr>
54 + <tr>
55 + <td>S3</td>
56 + </tr>
57 + <tr>
58 + <td>RDS</td>
59 + </tr>
60 + <tr>
61 + <td>dynamodb</td>
62 + </tr>
63 + <tr>
64 + <td>lambda</td>
65 + </tr>
66 + <tr>
67 + <th class="left-header">PHP</th>
68 + <td>Codeigniter</td>
69 + <td>Low Level</td>
70 + </tr>
71 + <tr>
72 + <th class="left-header" rowspan="2">Javascrpt</th>
73 + <td>Frontend React.js</td>
74 + <td rowspan="2">Medium Level</td>
75 + </tr>
76 + <tr>
77 + <td>Backend Node.js</td>
78 + </tr>
79 + <tr>
80 + <th class="left-header">Java</th>
81 + <td>Spring</td>
82 + <td>Medium Level</td>
83 + </tr>
84 + </table>
85 + </div>
86 +</div>
87 +</body>
88 +</html>
...\ No newline at end of file ...\ No newline at end of file