Skip to content

[3주차 과제] CSS 레이아웃 목록 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yeonsu0327 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[3주차 과제] CSS 레이아웃 목록 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e353dc9
[2주차 과제] HTML 핵심개념 과제
yeonsu0327 Jul 12, 2024
503ca13
[3주차 과제] CSS 레이아웃 목록
yeonsu0327 Jul 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
Empty file added week2/Global Navigation Bar.html
View file
Open in desktop
Empty file.
84 changes: 84 additions & 0 deletions week2/Signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원가입</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
rel="stylesheet"
>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<h1 class="login-title">회원가입</h1>
<label for="username">아이디</label>
<input id="username" name="username">
<label for="password">비밀번호</label>
<input id="password" name="password" type="password">
<label for="password-repeat">비밀번호 확인</label>
<input id="password-repeat" name="password-repeat" type="password">


<input id="email" name="email">
<label>성별</label>
<label>
<input name="sex" value="male" type="radio">
남성
</label>
<label>
<input name="sex" value="female" type="radio">
여성
</label>
<label>
<input name="sex" value="none" type="radio">
밝히고 싶지 않음
</label>

<label for="birthdate">생년월일</label>
<input id="birthdate" name="birthdate" type="date">

<label for="interest">관심사</label>
<label>
<input name="interest" value="programming" type="checkbox">
프로그래밍
</label>
<label>
<input name="interest" value="sport" type="checkbox">
스포츠
</label>
<label>
<input name="interest" value="film" type="checkbox">
영화
</label>
<label>
<input name="interest" value="economy" type="checkbox">
경제
</label>

<label for="profession">직업</label>
<select id="profession" name="profession">
<option value="student">학생</option>
<option value="office_worker">회사원</option>
<option value="self_employed">자영업</option>
<option value="educator">교사</option>
<option value="athlete">운동 선수</option>
<option value="musicien">음악가</option>
<option value="painter">화가</option>
</select>
<label for="duration">프로그래밍 공부한 기간(년)</label>
<input id="duration" name="duration" min="0" type="number">
<input name="duration" min="0">
<label for="profile">프로필 사진</label>
<input id="profile" name="profile" type="file">

<input id="profile" name="profile">
<label for="introduce">소개</label>
<textarea id="introduce" name="introduce"></textarea>

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

</body>
</html>
95 changes: 95 additions & 0 deletions week2/bigmac.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>영양 성분</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="nutrition-facts">
<h1>영양 성분</h1>
<div class="calorie">1 개당 390kcal</div>
<table>
<thead>
<tr>
<th></th>
<th>1일 영양성분 기준치에 대한 비율(%)*</th>
</tr>
</thead>
<tbody>
<tr>
<td>지방 16.00g</td>
<td>21%</td>
</tr>

<tr>
<td>포화지방 6.000g</td>
<td>0%</td>
</tr>


<tr>
<td>트랜스지방 1.000g</td>
<td></td>
</tr>

<tr>
<td>콜레스테롤 55mg</td>
<td>18%</td>
</tr>

<tr>
<td>나트륨 620mg</td>
<td>27%</td>
</tr>

<tr>
<td>탄수화물 40.00g</td>
<td>15%</td>
</tr>

<tr>
<td>식이섬유 2.0g</td>
<td>7%</td>
</tr>

<tr>
<td> 당류 6.00g</td>
<td></td>
</tr>

<tr>
<td> 단백질 21.00g</td>
<td></td>
</tr>

<tr>
<td> 비타민 D</td>
<td></td>
</tr>

<tr>
<td> 칼슘</td>
<td></td>
</tr>

<tr>
<td>아연</td>
<td></td>
</tr>

<tr>
<td>칼륨</td>
<td></td>
</tr>

</tbody>
</table>

<p class="note">
* 1일 영양성분 기준치에 대한 비율(%)은 2,000kcal 기준이므로 개인의 필요
열량에 따라 다를 수 있습니다.
</p>
</div>
</body>
</html>
114 changes: 114 additions & 0 deletions week2/book.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>인터넷의 역사</title>
</head>
<body>
<div>
<h2>목차</h2>
<a href="#인터넷의_역사">인터넷의 역사</a><br>
<a href="#대한민국의_인터넷_역사">대한민국의 인터넷 역사</a><br>
<a href="#인터넷_이용자_수">인터넷 이용자 수</a>
</div>
<h2>인터넷의 역사</h2>
<p>
인터넷의 유래는 1960~1970년대 미국 국방부 산하의 고등 연구국(Advanced
Research Projects Agency, ARPA)의 연구용 네트워크가 시초이며, 군사용
네트워크는 밀네트(MILNET)로 발전되었다. 동서냉전이 한창이던 때 미국 국방부
고등계획국에서는 핵전쟁 등의 상황에서도 살아남을 수 있는 네트워크를
연구하였다. 연구결과 기존의 회선 교환(circuit switching)방식보다는 패킷
교환(packet switching)방식이 매우 견고하고 생존성이 높았다. 최초의 2
노드간의 상호연결은 1969년 10월 29일 UCLA와 SRI연구소간에 연결되었다. 이
통신망을 ARPANET이라고 하였으며 현재의 인터넷망의 시초이다.
</p>
<p>
현재와 같이 TCP/IP 기반의 네트워크가 된 것은 1983년 1월 1일 ARPANET이 NCP
패킷 송출을 중단한 것이 기점이다.
</p>
<p>
ARPANET과 별도로 1986년 미국과학재단(National Science Foundation)은 5곳의
슈퍼컴퓨터 센터를 연결하여 NSFnet을 만들었는데, 1980년대 말에 이르러
ARPANET이 흡수통합되면서 대학, 연구소, 정부기관, 기업 등 세계 모든 곳을
연결하는 국제 통신망으로 발전하게 되었다. NSFnet의 등장은 네트워크 기술이
정부나 공공기관 중심이 아닌 민간부문에까지 확대되는 결과를 가져왔다.
</p>
<p>
1989년에는 그래픽 환경이 개선되고 월드와이드웹이 등장하면서 네트워크
기술에 한 단계 진일보한 기술이 부가되었다. 이를 통해 기존의 교육이나
공공목적으로 주요 사용되던 네트워크 기술에 민간기업의 참여로 상업적 목적의
온라인 서비스가 추가되고 이용자층 또한 사회 여러 계층으로 확산되면서
바야흐로 인터넷은 콘텐츠 면에서나 이용자 면에서 모두 양적•질적 팽창을
가져오게 되었다.
</p>
<p>
인터넷의 상업적 이용이 허용되고, 인터넷을 보다 편리하게 사용할 수 있는
브라우저로서 1993년 모자이크(Mosaic)가 출시되면서 사용자가 폭발적으로
증가하였다. 1994년에는 대표적 검색서비스인 야후가 등장했고, 그 이듬해에는
미국의 대표적 온라인 통신업체인 컴퓨서브(CompuServe), 아메리카
온라인(America Online), 그리고 한때는 마이크로소프트사의 익스플로러와 양대
웹브라우저로 간주되었던 넷스케이프(Netscape)가 선을 보였다.
</p>
<p>
현재는 전 세계 146개국 5,000여 컴퓨터 네트워크와 900만대 이상의 호스트
컴퓨터가 연결되어 있다.
</p>
<h2>대한민국의 인터넷 역사</h2>
<p>
한국 최초의 인터넷은 1982년 5월 15일 전길남 박사가 주도하여 서울대학교와
한국전자기술연구소(현 ETRI) 사이에 구축한 네트워크 시스템이다. 한국은
미국에 이어 세계에서 두 번째로 인터넷 연결에 성공한 나라가 되었다. 1993년
인터넷 접속 서비스를 실시하였으며 1990년대 후반부터 PC와 초고속 인터넷이
빠르게 보급되었고 이후 국민 거의 대부분이 초고속 인터넷을 이용하였는데,
김대중 정부는 과감한 초고속 인터넷망 투자로, 미국이나 일본보다 앞선 인터넷
문화를 만들었다. 김대중 정부는 1998년 6월에 초고속 인터넷 서비스를
시작했고, 4년 만에 대한민국은 초고속 인터넷 가입자가 1000만 명을
넘어섰었다.
</p>
<p>
1999년 초고속 인터넷이 보급된 이후 포털사이트 붐이 일어났는데, 2000년대
초반까지 인기를 끌었던 포털사이트는 야후, 다음, 네이버, 프리챌, 라이코스,
아이러브스쿨, MSN, 드림위즈 등이었다. 기존 PC통신 업체였던 하이텔,
나우누리, 천리안, 넷츠고, 유니텔 역시 전부 포털 진출을 선언했으며 이에
따라 2000년대 초반에는 1세대 포털사이트와 PC통신이 IT 시장에서 공존하였다.
2003년까지 대한민국 포털사이트 점유율 1위는 다음이었고, 이 후 2위로
네이버, 야후! 코리아, 프리챌, 아이러브스쿨, 드림위즈 등이 나란히 경쟁을
하는 구조였다.
</p>
<p>
2000년대 중반, 대한민국 인터넷 시장은 한 차례 변화를 맞았다. 네이트와
싸이월드의 급부상으로 인해 기존의 1세대 포털사이트들은 그 위상을 잃고
쇠퇴하기 시작했다. 2002년 가입자 1,500만명을 보유하던 프리챌은 유료화
선언으로 이용자들이 싸이월드로 대거 이전하였고 결국 다음 해인 2003년
파산했다. 거대 포털이었던 다음과 야후코리아는 지식인, 블로그, 카페
서비스로 급부상한 네이버에게 점유율 1위를 내어주며 쇠퇴했다. 또한 2000년대
초반까지 1세대 포털과 공존했던 PC통신 역시 시장에서 완전히 퇴장당했다.
2000년대 중~후반의 인터넷 포털은 디지털 카메라의 넓은 보급으로 이전과
다르게 사진, 동영상 등을 개시하는 문화로 이루어졌으며 이에 따라 싸이월드의
미니홈피 서비스가 4000만명이 넘는 가입자 수를 기록하며 큰 인기를 끌었다.
</p>
<p>
2010년대에 들어서는 스마트폰의 보급으로 인해 인터넷 역시 모바일 문화와
결합되어 시장의 형태가 바뀌게 되었다. 기존의 싸이월드와 네이트는 모바일
서비스에 전혀 대비하지 못해 스마트폰의 대중화가 시작된 2011년부터 외국계
모바일 SNS인 트위터에게 점유율을 뺏기고 시장에서 도태되었으며, 다음과
야후!코리아 등의 기타 포털 사이트들도 스마트폰의 대중화에 위기를 맞았다.
현재 2022년 대한민국의 PC 포털사이트는 모바일 시장에 밀려 대중성을
잃었으며, 모바일 시장에 맞춘 구글과 네이버 등만이 대중적으로 사용되고
있다.
</p>
<h2>인터넷 이용자 수</h2>
<p>
2002년 2월에 전 세계 인터넷 이용자의 수는 5억 4420만 명에 이르렀는데, 북미
지역이 1억 8123만 명으로 가장 많았고, 그 다음이 유럽 지역으로 1억 7135만
명에 달했으며, 중동과 아프리카 지역은 이용률이 매우 낮았다. 2001년에
대한민국의 인구 100명당 인터넷 이용자의 수는 51명으로 세계 5위
수준이었는데, 2000년에는 세계 6위였으나 미국과 캐나다를 추월하고
싱가포르에는 추월 당해서 5위가 되었고, 이에 아이슬란드(68명),
싱가포르(61명), 노르웨이(60명), 스웨덴(52명) 등은 인구 100명당 인터넷
이용자의 수가 대한민국보다 많았고 미국(50명), 일본(45명) 등은 대한민국보다
적었다. 2003년 6월에 대한민국의 인터넷 이용자수는 2861만 1000명이고,
2006년 12월에 초고속 인터넷 서비스 가입자는 1401만 1419명이었다.
</p>
</body>
</html>
14 changes: 14 additions & 0 deletions week2/breadit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="icon" href="favicon.ico">
<html lang="ko">
<head>
<meta charset="utf-8">
<title>브레드잇</title>
</head>
<body>
<h1>
을지로 최고의 빵집 브레드잇,<br>
맛있는 빵을 세상 모두에게!
</h1>
</body>
</html>
30 changes: 30 additions & 0 deletions week2/codeitinstagram.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>코드잇</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bio">
<img class="profile" src="profile.png" alt="코드잇">
<div class="username">코드잇</div>
<div class="profession">Education website</div>
<p>
배움의 기쁨을 세상 모두에게.<br>
👇🏻코드잇과 함께 코딩 공부 시작하기👇🏻<br>
<a href="www.codeit.kr">www.codeit.kr</a>
</p>
</div>
<div class="feeds">
<img src="1.png" width="160" height="160" alt="코드잇 스마일 로고"
><img src="2.png" width="160" height="160" alt="코드잇 텍스트 로고"
><img src="3.png" width="160" height="160" alt="실습 화면"
><video src="4.mp4" width="160" height="160" controls></video>

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