Skip to content

Commit e353dc9

Browse files
yeonsu0327yeonsu0327
committed
[2주차 과제] HTML 핵심개념 과제
1 parent 8f7e2a4 commit e353dc9

File tree

12 files changed

+557
-0
lines changed

12 files changed

+557
-0
lines changed

‎week2/Global Navigation Bar.html‎

Whitespace-only changes.

‎week2/Signup.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>회원가입</title>
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
10+
rel="stylesheet"
11+
>
12+
<link rel="stylesheet" href="style.css">
13+
</head>
14+
<body>
15+
<form>
16+
<h1 class="login-title">회원가입</h1>
17+
<label for="username">아이디</label>
18+
<input id="username" name="username">
19+
<label for="password">비밀번호</label>
20+
<input id="password" name="password" type="password">
21+
<label for="password-repeat">비밀번호 확인</label>
22+
<input id="password-repeat" name="password-repeat" type="password">
23+
24+
25+
<input id="email" name="email">
26+
<label>성별</label>
27+
<label>
28+
<input name="sex" value="male" type="radio">
29+
남성
30+
</label>
31+
<label>
32+
<input name="sex" value="female" type="radio">
33+
여성
34+
</label>
35+
<label>
36+
<input name="sex" value="none" type="radio">
37+
밝히고 싶지 않음
38+
</label>
39+
40+
<label for="birthdate">생년월일</label>
41+
<input id="birthdate" name="birthdate" type="date">
42+
43+
<label for="interest">관심사</label>
44+
<label>
45+
<input name="interest" value="programming" type="checkbox">
46+
프로그래밍
47+
</label>
48+
<label>
49+
<input name="interest" value="sport" type="checkbox">
50+
스포츠
51+
</label>
52+
<label>
53+
<input name="interest" value="film" type="checkbox">
54+
영화
55+
</label>
56+
<label>
57+
<input name="interest" value="economy" type="checkbox">
58+
경제
59+
</label>
60+
61+
<label for="profession">직업</label>
62+
<select id="profession" name="profession">
63+
<option value="student">학생</option>
64+
<option value="office_worker">회사원</option>
65+
<option value="self_employed">자영업</option>
66+
<option value="educator">교사</option>
67+
<option value="athlete">운동 선수</option>
68+
<option value="musicien">음악가</option>
69+
<option value="painter">화가</option>
70+
</select>
71+
<label for="duration">프로그래밍 공부한 기간(년)</label>
72+
<input id="duration" name="duration" min="0" type="number">
73+
<input name="duration" min="0">
74+
<label for="profile">프로필 사진</label>
75+
<input id="profile" name="profile" type="file">
76+
77+
<input id="profile" name="profile">
78+
<label for="introduce">소개</label>
79+
<textarea id="introduce" name="introduce"></textarea>
80+
81+
<button>가입하기</button>
82+
</form>
83+
</body>
84+
</html>

‎week2/TechIT.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>이제 교육 컨텐츠도 몰입형이 대세 - TechIT</title>
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Noto+Sans+KR:wght@400;700&display=swap"
10+
rel="stylesheet">
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
<body>
14+
<div class="header">TechIT</div>
15+
<div class="info">
16+
<h1 class="title">이제 교육 컨텐츠도 몰입형이 대세</h1>
17+
<p class="date">2025년 4월 1일 화요일 8:01 AM</p>
18+
<img class="cover" src="vr.png">
19+
</div>
20+
<div class="content">
21+
<p class="headline">이제 교육 컨텐츠도 몰입형이 대세다.</p>
22+
<p>
23+
지난 31일 온라인 코딩 스쿨 <a href="https://codeit.kr">코드잇</a>은 서울
24+
보국동에 교육 컨텐츠 전문 VR 스튜디오 "코드잇 베리타스"를 오픈했다고
25+
밝혔다.
26+
</p>
27+
<p>
28+
수강생에게 영상 강의 뿐만 아니라 VR 기기를 통한 몰입형 콘텐츠를 통해
29+
보다 실감나는 교육 컨텐츠를 제공하겠다는 뜻으로 보인다.
30+
</p>
31+
<p>
32+
그동안 코드잇은 다양한 프로그래밍 언어를 활용한 1600개 이상의 레슨을
33+
무제한으로 제공하며, 수강생 사이의 질의응답을 주고받을 수 있는 커뮤니티
34+
환경과 별도의 프로그램 설치 없이 코딩을 실습할 수 있는 온라인 실습
35+
환경을 제공해왔다.
36+
</p>
37+
<p>
38+
이번 VR 스튜디오 도입으로 보다 한차원 높은 콘텐츠를 수강할 수 있다는
39+
점에서 수강생들의 편리함은 증대될 전망이다.
40+
</p>
41+
<p class="author">박재선 기자 @jasonpark83</p>
42+
</div>
43+
<iframe class="ads" width="750" height="135" src="banner/index.html"></iframe>
44+
45+
</body>
46+
</html>

‎week2/bigmac.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>영양 성분</title>
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<div class="nutrition-facts">
10+
<h1>영양 성분</h1>
11+
<div class="calorie">1 개당 390kcal</div>
12+
<table>
13+
<thead>
14+
<tr>
15+
<th></th>
16+
<th>1일 영양성분 기준치에 대한 비율(%)*</th>
17+
</tr>
18+
</thead>
19+
<tbody>
20+
<tr>
21+
<td>지방 16.00g</td>
22+
<td>21%</td>
23+
</tr>
24+
25+
<tr>
26+
<td>포화지방 6.000g</td>
27+
<td>0%</td>
28+
</tr>
29+
30+
31+
<tr>
32+
<td>트랜스지방 1.000g</td>
33+
<td></td>
34+
</tr>
35+
36+
<tr>
37+
<td>콜레스테롤 55mg</td>
38+
<td>18%</td>
39+
</tr>
40+
41+
<tr>
42+
<td>나트륨 620mg</td>
43+
<td>27%</td>
44+
</tr>
45+
46+
<tr>
47+
<td>탄수화물 40.00g</td>
48+
<td>15%</td>
49+
</tr>
50+
51+
<tr>
52+
<td>식이섬유 2.0g</td>
53+
<td>7%</td>
54+
</tr>
55+
56+
<tr>
57+
<td> 당류 6.00g</td>
58+
<td></td>
59+
</tr>
60+
61+
<tr>
62+
<td> 단백질 21.00g</td>
63+
<td></td>
64+
</tr>
65+
66+
<tr>
67+
<td> 비타민 D</td>
68+
<td></td>
69+
</tr>
70+
71+
<tr>
72+
<td> 칼슘</td>
73+
<td></td>
74+
</tr>
75+
76+
<tr>
77+
<td>아연</td>
78+
<td></td>
79+
</tr>
80+
81+
<tr>
82+
<td>칼륨</td>
83+
<td></td>
84+
</tr>
85+
86+
</tbody>
87+
</table>
88+
89+
<p class="note">
90+
* 1일 영양성분 기준치에 대한 비율(%)은 2,000kcal 기준이므로 개인의 필요
91+
열량에 따라 다를 수 있습니다.
92+
</p>
93+
</div>
94+
</body>
95+
</html>

‎week2/book.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>인터넷의 역사</title>
6+
</head>
7+
<body>
8+
<div>
9+
<h2>목차</h2>
10+
<a href="#인터넷의_역사">인터넷의 역사</a><br>
11+
<a href="#대한민국의_인터넷_역사">대한민국의 인터넷 역사</a><br>
12+
<a href="#인터넷_이용자_수">인터넷 이용자 수</a>
13+
</div>
14+
<h2>인터넷의 역사</h2>
15+
<p>
16+
인터넷의 유래는 1960~1970년대 미국 국방부 산하의 고등 연구국(Advanced
17+
Research Projects Agency, ARPA)의 연구용 네트워크가 시초이며, 군사용
18+
네트워크는 밀네트(MILNET)로 발전되었다. 동서냉전이 한창이던 때 미국 국방부
19+
고등계획국에서는 핵전쟁 등의 상황에서도 살아남을 수 있는 네트워크를
20+
연구하였다. 연구결과 기존의 회선 교환(circuit switching)방식보다는 패킷
21+
교환(packet switching)방식이 매우 견고하고 생존성이 높았다. 최초의 2
22+
노드간의 상호연결은 1969년 10월 29일 UCLA와 SRI연구소간에 연결되었다. 이
23+
통신망을 ARPANET이라고 하였으며 현재의 인터넷망의 시초이다.
24+
</p>
25+
<p>
26+
현재와 같이 TCP/IP 기반의 네트워크가 된 것은 1983년 1월 1일 ARPANET이 NCP
27+
패킷 송출을 중단한 것이 기점이다.
28+
</p>
29+
<p>
30+
ARPANET과 별도로 1986년 미국과학재단(National Science Foundation)은 5곳의
31+
슈퍼컴퓨터 센터를 연결하여 NSFnet을 만들었는데, 1980년대 말에 이르러
32+
ARPANET이 흡수통합되면서 대학, 연구소, 정부기관, 기업 등 세계 모든 곳을
33+
연결하는 국제 통신망으로 발전하게 되었다. NSFnet의 등장은 네트워크 기술이
34+
정부나 공공기관 중심이 아닌 민간부문에까지 확대되는 결과를 가져왔다.
35+
</p>
36+
<p>
37+
1989년에는 그래픽 환경이 개선되고 월드와이드웹이 등장하면서 네트워크
38+
기술에 한 단계 진일보한 기술이 부가되었다. 이를 통해 기존의 교육이나
39+
공공목적으로 주요 사용되던 네트워크 기술에 민간기업의 참여로 상업적 목적의
40+
온라인 서비스가 추가되고 이용자층 또한 사회 여러 계층으로 확산되면서
41+
바야흐로 인터넷은 콘텐츠 면에서나 이용자 면에서 모두 양적•질적 팽창을
42+
가져오게 되었다.
43+
</p>
44+
<p>
45+
인터넷의 상업적 이용이 허용되고, 인터넷을 보다 편리하게 사용할 수 있는
46+
브라우저로서 1993년 모자이크(Mosaic)가 출시되면서 사용자가 폭발적으로
47+
증가하였다. 1994년에는 대표적 검색서비스인 야후가 등장했고, 그 이듬해에는
48+
미국의 대표적 온라인 통신업체인 컴퓨서브(CompuServe), 아메리카
49+
온라인(America Online), 그리고 한때는 마이크로소프트사의 익스플로러와 양대
50+
웹브라우저로 간주되었던 넷스케이프(Netscape)가 선을 보였다.
51+
</p>
52+
<p>
53+
현재는 전 세계 146개국 5,000여 컴퓨터 네트워크와 900만대 이상의 호스트
54+
컴퓨터가 연결되어 있다.
55+
</p>
56+
<h2>대한민국의 인터넷 역사</h2>
57+
<p>
58+
한국 최초의 인터넷은 1982년 5월 15일 전길남 박사가 주도하여 서울대학교와
59+
한국전자기술연구소(현 ETRI) 사이에 구축한 네트워크 시스템이다. 한국은
60+
미국에 이어 세계에서 두 번째로 인터넷 연결에 성공한 나라가 되었다. 1993년
61+
인터넷 접속 서비스를 실시하였으며 1990년대 후반부터 PC와 초고속 인터넷이
62+
빠르게 보급되었고 이후 국민 거의 대부분이 초고속 인터넷을 이용하였는데,
63+
김대중 정부는 과감한 초고속 인터넷망 투자로, 미국이나 일본보다 앞선 인터넷
64+
문화를 만들었다. 김대중 정부는 1998년 6월에 초고속 인터넷 서비스를
65+
시작했고, 4년 만에 대한민국은 초고속 인터넷 가입자가 1000만 명을
66+
넘어섰었다.
67+
</p>
68+
<p>
69+
1999년 초고속 인터넷이 보급된 이후 포털사이트 붐이 일어났는데, 2000년대
70+
초반까지 인기를 끌었던 포털사이트는 야후, 다음, 네이버, 프리챌, 라이코스,
71+
아이러브스쿨, MSN, 드림위즈 등이었다. 기존 PC통신 업체였던 하이텔,
72+
나우누리, 천리안, 넷츠고, 유니텔 역시 전부 포털 진출을 선언했으며 이에
73+
따라 2000년대 초반에는 1세대 포털사이트와 PC통신이 IT 시장에서 공존하였다.
74+
2003년까지 대한민국 포털사이트 점유율 1위는 다음이었고, 이 후 2위로
75+
네이버, 야후! 코리아, 프리챌, 아이러브스쿨, 드림위즈 등이 나란히 경쟁을
76+
하는 구조였다.
77+
</p>
78+
<p>
79+
2000년대 중반, 대한민국 인터넷 시장은 한 차례 변화를 맞았다. 네이트와
80+
싸이월드의 급부상으로 인해 기존의 1세대 포털사이트들은 그 위상을 잃고
81+
쇠퇴하기 시작했다. 2002년 가입자 1,500만명을 보유하던 프리챌은 유료화
82+
선언으로 이용자들이 싸이월드로 대거 이전하였고 결국 다음 해인 2003년
83+
파산했다. 거대 포털이었던 다음과 야후코리아는 지식인, 블로그, 카페
84+
서비스로 급부상한 네이버에게 점유율 1위를 내어주며 쇠퇴했다. 또한 2000년대
85+
초반까지 1세대 포털과 공존했던 PC통신 역시 시장에서 완전히 퇴장당했다.
86+
2000년대 중~후반의 인터넷 포털은 디지털 카메라의 넓은 보급으로 이전과
87+
다르게 사진, 동영상 등을 개시하는 문화로 이루어졌으며 이에 따라 싸이월드의
88+
미니홈피 서비스가 4000만명이 넘는 가입자 수를 기록하며 큰 인기를 끌었다.
89+
</p>
90+
<p>
91+
2010년대에 들어서는 스마트폰의 보급으로 인해 인터넷 역시 모바일 문화와
92+
결합되어 시장의 형태가 바뀌게 되었다. 기존의 싸이월드와 네이트는 모바일
93+
서비스에 전혀 대비하지 못해 스마트폰의 대중화가 시작된 2011년부터 외국계
94+
모바일 SNS인 트위터에게 점유율을 뺏기고 시장에서 도태되었으며, 다음과
95+
야후!코리아 등의 기타 포털 사이트들도 스마트폰의 대중화에 위기를 맞았다.
96+
현재 2022년 대한민국의 PC 포털사이트는 모바일 시장에 밀려 대중성을
97+
잃었으며, 모바일 시장에 맞춘 구글과 네이버 등만이 대중적으로 사용되고
98+
있다.
99+
</p>
100+
<h2>인터넷 이용자 수</h2>
101+
<p>
102+
2002년 2월에 전 세계 인터넷 이용자의 수는 5억 4420만 명에 이르렀는데, 북미
103+
지역이 1억 8123만 명으로 가장 많았고, 그 다음이 유럽 지역으로 1억 7135만
104+
명에 달했으며, 중동과 아프리카 지역은 이용률이 매우 낮았다. 2001년에
105+
대한민국의 인구 100명당 인터넷 이용자의 수는 51명으로 세계 5위
106+
수준이었는데, 2000년에는 세계 6위였으나 미국과 캐나다를 추월하고
107+
싱가포르에는 추월 당해서 5위가 되었고, 이에 아이슬란드(68명),
108+
싱가포르(61명), 노르웨이(60명), 스웨덴(52명) 등은 인구 100명당 인터넷
109+
이용자의 수가 대한민국보다 많았고 미국(50명), 일본(45명) 등은 대한민국보다
110+
적었다. 2003년 6월에 대한민국의 인터넷 이용자수는 2861만 1000명이고,
111+
2006년 12월에 초고속 인터넷 서비스 가입자는 1401만 1419명이었다.
112+
</p>
113+
</body>
114+
</html>

‎week2/breadit.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<link rel="icon" href="favicon.ico">
3+
<html lang="ko">
4+
<head>
5+
<meta charset="utf-8">
6+
<title>브레드잇</title>
7+
</head>
8+
<body>
9+
<h1>
10+
을지로 최고의 빵집 브레드잇,<br>
11+
맛있는 빵을 세상 모두에게!
12+
</h1>
13+
</body>
14+
</html>

‎week2/codeitinstagram.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>코드잇</title>
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
12+
<div class="bio">
13+
<img class="profile" src="profile.png" alt="코드잇">
14+
<div class="username">코드잇</div>
15+
<div class="profession">Education website</div>
16+
<p>
17+
배움의 기쁨을 세상 모두에게.<br>
18+
👇🏻코드잇과 함께 코딩 공부 시작하기👇🏻<br>
19+
<a href="www.codeit.kr">www.codeit.kr</a>
20+
</p>
21+
</div>
22+
<div class="feeds">
23+
<img src="1.png" width="160" height="160" alt="코드잇 스마일 로고"
24+
><img src="2.png" width="160" height="160" alt="코드잇 텍스트 로고"
25+
><img src="3.png" width="160" height="160" alt="실습 화면"
26+
><video src="4.mp4" width="160" height="160" controls></video>
27+
28+
</div>
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)