ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 명품 웹 프로그래밍 3장 과제
    웹프로그래밍 2019. 5. 14. 18:32

    3장과제.zip
    5.02MB

     

    1.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>버튼</title>
    </head>
    <body>
    <h3>버튼을 만들자</h3>
    <hr>
    <table>
    	<tbody>
    		<tr><td><input type="button" value="1"></td><td><input type="button" value="2"></td><td><input type="button" value="3"></td></tr>
    		<tr><td><input type="button" value="4"></td><td><input type="button" value="5"></td><td><input type="button" value="6"></td></tr>
    		<tr><td><input type="button" value="7"></td><td><input type="button" value="8"></td><td><input type="button" value="9"></td></tr>
    	</tbody>
    </table>
    </body>
    </html>

    2.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>웹 브라우저</title>
    	<style>
    		.section { width:50%;  float:left; }
    		/*.aside {width:50%; float:right;}*/
    	</style>
    	</style>
    </head>
    <body>
    <h3>웹 브라우저 소개</h3>
    <hr>
    <section class="section">
    	브라우저라고 불리기도 하는 웹브라우저(Web Browser)는, 사용자에게 웹 서버 컴퓨터에 접속하고 웹 페이지, 이미지, 동영상, 음악 등 다양한 데이터 다운받아 보여주는 소프트웨어이다. <strong>그림1-2</strong>는 대표적인 Chrome 웹 브라우저를 보여준다.
    </section>
    <section class="section">
    	<figure>
    		<img src="media/img1-2.png" alt="그림1-2" width="200" height="200">
    		<figcaption><striong>그림 1-2 구글 Chrome</striong></figcaption>
    	</figure>
    </section>
    <section class="section">
    	웹 페이지는 브라우저에 HTML% 문서임을 알리기 위해 <strong>그림 1-3</strong>과 같은 코드를 첫 라인에 삽입하여야 한다.
    </section>
    <section class="section">
    	<figure>
    		<code>
    		<strong>&lt;&#33;doctype html&gt;</strong><br>
    		&lt;html&gt;<br>
    		&hellip;<br>
    		&lt;&#47;html&gt;<br>
    		</code>
    		<figcaption><strong>그림 1-3 HTML5 문서 구성</strong></figcaption>
    	</figure>
    </section>
    </body>
    </html>

    3.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>로그인 폼 만들기</title>
    </head>
    <body>
    <h3>로그인 폼</h3>
    <hr>
    <form>
    	<fieldset>
    		<legend>Login</legend>
    		<label>
    			Username <input type="Username">
    		</label>
    		<label>
    			Passward <input type="Passward">
    		</label>
    	</fieldset>
    </form>
    </body>
    </html>

    4.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>웹 프로그래밍 개요	</title>
    </head>
    <body>
    <h3>웹 프로그래밍 개요</h3>
    <hr>
    <details>
    	<summary>웹의 기본 목적</summary>
    	<p>웹의 기본목적은 한 컴퓨터에서 만든문서(document)를 다른 컴퓨터에서 쉽게 볼 수 있도록 하는 것이다</p>
    </details>
    <details>
    	<summary>왜 Web인가?</summary>
    	<p>전 세계의 컴퓨터들을 인터넷으로 거미줄처럼 연결하고 웹 문서를 쉽게 주고받을 수 있도록 시스템을 만들고 WWW(World Wide Web), 간단히 줄여 웹(Web)이라고 부른다.</p>
    </details>
    <details>
    	<summary>웹 페이지를 구성하는 3 요소 </summary>
    	<ul>
    		<li>HTML - 문서의 구조와 내용</li>
    		<li>CSS(Cascading Style Sheet) - 문서의 모양</li>
    		<li>Javascript - 행동 및 응용 프로그램</li>
    	</ul>
    </details>
    </body>
    </html>

    5.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>도형 서식 폼 만들기</title>
    </head>
    <body>
    <h3>도형 서식 폼 만들기</h3>
    <hr>
    <form>
    	<fieldset>
    		<legend>도형 서식 입력</legend>
    		<label>
    			선 종류<select size="3">
    				<option>선없음</option>
    				<option>실선</option>
    				<option>점선</option>
    			</select>
    		</label><br><br>
    		<label>
    			선 두께 <input type="number" step="1"  min="1" max="50">
    		</label> 
    		<label>
    			선색 <input type="color" value="#00BFFF" onchange="document.body.style.color=this.value">
    		</label><br><br>
    		<label>
    			투명도(0~100) : <input type="range" min="0" max="100" list="transparency">
    			<datalist id="transparency">
    				<option value="0" label="Low">
    				<option value="50" label="Medium">
    				<option value="100" label="high">
    			</datalist>
    				
    		</label>
    	</fieldset>
    </form>
    
    </body>
    </html>

    오픈챌린지

    left3.html

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>목차</title>
    </head>
    <body>
    	<nav>
    		<h3>목차</h3>
    		<ul>
    			<li><a href="right.html#terran" target="right">테란</a></li>
    			<li><a href="right.html#zerg" target="right">저그</a></li>
    			<li><a href="right.html#protoss" target="right">프로토스</a></li>
    			<li><a href="right.html#scs" target="right">스크린샷</a></li>
    		</ul>
    	</nav>
    </body>
    </html>

    right3.html

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>스타크래프트</title>
    </head>
    <body>
    <section>
    <article>
    <h3 id="terran"><a href="https://namu.wiki/w/%ED%85%8C%EB%9E%80" target="_blank">테란</a></h3>
    <p>
    	Terran. 스타크래프트 시리즈에 등장하는 종족. 가장 허약하고 약한 군사력과 낮은 수준의 문명을 가졌으며모성을 포함하여 다른 종족에게 천대를 받았지만 끈기와 놀라운 지혜로 압도적인 적들과 싸우고 마지막에 전 우주를 파멸시키려 했던 암흑의 신을 쓰러뜨린 세 종족 중 하나.
    	코프룰루 구역에 정착한 인류를 가리키는 말. 엄밀히 말해서 '테란'은 종족이 아니라 테란 연합, 테란 자치령 같은 특정 세력명을 부르는 말이었다. 그러나 저그, 프로토스들이 인류의 '세력'이라면 연합이던 자치령이던 켈모리안이건 심지어 UED라도 테란이라고 부르며 코프룰루 사람들도 자신들을 테란이라고 부른다. 즉, 보통명사가 된 고유명사들의 한 케이스라고 볼 수 있다. 또한, 스토리 상으로는 저그와 프로토스라는 막강한 두 외계인 사이에 끼인 새우처럼 쩌리 종족 취급받는 느낌이 강하지만 사실상 지배하고 있는 행성이나 세력은 제일 크고 많다. 고향인 태양계는 물론이고, 코프룰루 안에서만 해도 여러 분파로 나뉘어져 있다. 저그처럼 엄청난 적응력과 힘도, 프로토스처럼 강력한 초능력과 뛰어난 기술력도 없지만 이를 의지와 단결, 그리고 근성과 적응력으로 극복한 전투종족. 테란을 상징하는 색깔은 인류가 가장 많이 쓰는 금속인 철의 회색, 가장 거대한 테란 세력인 테란 자치령의 상징인 빨간색이다. 자유의 날개의 주인공 세력인 레이너 특공대에 한해서는 파란색을 쓰고 있다. 또한 프로토스나 초월체 휘하 저그 처럼 자체적으로는 젤나가를 신봉하지 않는다. 하지만 테란은 결과적으로는 젤나가를 배출한 종족이 되었다.
    </p>
    </article>
    <article>
    <h3 id="zerg"><a href="https://namu.wiki/w/%EC%A0%80%EA%B7%B8" target="_blank">저그</a></h3>
    <p>
    	Zerg. 게임 스타크래프트 시리즈에 등장하는 외계 종족.
    	젤나가(Xel'naga)가 창조한 두 번째 생명체이자 스타크래프트 세계관의 공공의 적.테란에게는 바이러스 감염과 행성 침공으로 뼈아픈 피해를 준 괴물들이자, 프로토스에게는 자신의 고향행성을 강탈하고 수많은 영웅과 전사들을 전사시킨 원수들이자, 사라 케리건이 죽은 미래에서는 우주를 파멸시킬 아몬의 꼭두각시이며 저그 자신들도 군체의식의 지배권을 놓고 전 은하계에서 피 터지게 싸운다.
    	소설 스타크래프트에서는 벌레를 뜻하는 Bug에 최종 진화 단계라는 설정으로 Z자를 맨 앞에 집어넣어 Zug라는 이름이 탄생했고, 이후 Zerg로 바뀌었다고 적혀 있지만 어디까지나 비공식 설정이다. 초창기 알파 버전에서의 이름은 악몽의 침략군(Nightmarish Invaders)이라는 센스없는 이름이었다. 이후 스타크래프트 본편 직전 차우 사라에 코랄의 후예들을 제압하려고 파견 나온 알파 전대 장교의 이야기를 다루는 데모에선 테란측에서 수수께끼의 Xenomorph와 Nightmare Invader라 불렀다.
    	본래 저그는 제루스 행성에 살던 작은 애벌레형 종족이었다. 태초의 저그는 다른 동물의 신경계에 파고들어 지배권을 빼앗는 기생 능력을 가지고 있었다. 이 에벌레들은 제루스 토착 동물의 신경계에 파고들어 숙주의 DNA를 흡수하여 진화했고, 수천년 동안 같은 저그를 비롯한 다른 생명체를 잡아먹고 그들의 정수를 흡수하며 진화하는 과정을 통해 원시 저그의 형태를 띄게 되었다.
    	이러한 약육강식을 통한 진화를 반복하던 중, 육체적 완전성을 목표로 인공적으로 진화된 첫번째 생명체 프로토스와 마찬가지로 저그도 프로토스처럼 아몬에 의해 순수한 정수를 목표로 인공적으로 진화되었다. 이렇게 저그를 조작한 아몬은 자신의 하수인으로 초월체를 창조했고, 이에 따라 몇몇 원시 저그 무리를 제외한 모든 저그는 하나의 생명체 처럼 하나의 목표를 위해 움직이는 집단 지성의 형태를 띄게 되었다.
    </p>
    </article>
    <article>
    <h3 id="protoss"><a href="https://namu.wiki/w/%ED%94%84%EB%A1%9C%ED%86%A0%EC%8A%A4" target="_blank">프로토스</a></h3>
    <p>
    	Protoss. 스타크래프트 시리즈에 나오는 세 종족 중 하나. 우주 문명의 척도에서 제II유형(모 항성의 모든 에너지와 항성계의 모든 자원을 사용)에 해당하는 문명 수준을 이룬 종족이다. 이름은 그리스어로 '최초', '처음'을 뜻하는 프로토스(πρῶτος, protos)에서 유래했다. '첫 번째 자손(The Firstborn)'이라는 의미.
    	그래서 '첫 번째 자손'이라는 명칭도 본인들이나 다른 종족들이나 자주 쓰는 편. 그리고 우리가 익히 알고 있는 프로토스의 유닛, 건물, 직위에 관한 명칭은 저그처럼 프로토스가 코프룰루 구역에 나오면서 테란이 임의로 붙인 것이다. 내적으로는 로마 제국에 프레데터를 섞은 듯한 구성을 가진다. 그래서 지구 역사에서 고대에 없어진 관직들이 아직도 존속하면서도 기술력이나 정신 수준은 지구인을 아득히 뛰어넘는 신비한 종족이다.
    	평소에 연상할 수 있는 외계인의 모습과는 좀 많이 다르지만, 어쨌든 보면 '아, 외계인이다' 하고 생각할 수 있다. 외견상, 그리고 실제로도 저그와 테란에 비해 초월적인 기술력을 보유한 것에 반해 상당히 종교적인 성향을 띠고 있는 데다 판타지에 나올 법한 각종 초능력, 압도적인 신체 능력, 화려하고 아름다운 병기와 갑옷 등에서 뿜어져 나오는 포스는 그야말로 간지폭풍. 스토리상 저그에게 크게 당하고 테란에게 애를 먹지만, 그 전에는 은하계에서 맞설 적수가 없는 종족이었다. 다만, 탈다림이 기존의 이미지와는 다른 특징과 행보를 보여준다. 자세한건 노바 비밀 작전 참고.
    	또한 프로토스는 종교적이나 여러 윤리적인 이유로 자신들의 고도화된 기술을 활용을 하지 않을 때가 많다.
    	각 프로토스 세력들이 상징하는 색깔은 서로 다르다. 칼라이 프로토스는 특유의 금색을 입힌 파란색을 쓰고 수정으로는 케이다린 수정을, 네라짐 프로토스는 은색을 입힌 초록색을 쓰고 수정으로는 케이다린 수정을 개량한 아르거스 수정을, 정화자 프로토스는 하얀색을 입힌 노란색을 쓰고 수정으로는 기사단 프로토스와 마찬가지로 케이다린 수정을 사용하거나 태양석을 사용하며, 탈다림 프로토스는 검정색을 입힌 빨간색을 쓰고 수정으로는 혈석 수정을 사용한다.
    </p>
    </article>
    <article>
    <h3 id="scs">스크린샷</a></h3>
    <table>
    	<caption>스타크래프트의 스크린샷</caption>
    	<tr>
    		<td><img src="media/scs1.jpg" width="300" height="200"></td>
    		<td><img src="media/scs2.jpg" width="300" height="200"></td>
    		<td><img src="media/scs3.jpg" width="300" height="200"></td>
    	</tr>
    </table>
    </article>
    </section>
    <footer>
    <h5><a href="survey3.html" target="_blank">설문조사</a></h5>
    <strong>Copyright 2018 by Numerok</strong>
    </footer>
    </body>
    </html>

    openchallenge3.html

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>스타크래프트와 종족 소개</title>
    </head>
    <body>
    <header>
    <h1>스타크래프트</h1>
    <p>
    	블리자드 엔터테인먼트에서 제작한 RTS 게임으로, 스타크래프트 오리지널은 1998년 3월 31일에 출시하였고, 확장팩인 스타크래프트: 브루드 워는 1998년 11월 30일에 출시하였다. 다른 게임들처럼 원래 유료였지만, 2017년 3월 26일에 스타크래프트: 리마스터와 함께 무료화를 발표하였고, 2017년 4월 19일에 1.18 패치를 내놓으면서 무료로 전환하였다
    </p>
    </header>
    <iframe src="left3.html" name="left" width="300" height="500"></iframe>
    <iframe src="right3.html" name="right" width="1000" height="500"></iframe>
    <audio src="media/bgm.mp3" loop autoplay ></audio>
    </body>
    </html>

    survey3.html

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>스타크래프트 설문조사</title>
    </head>
    <body>
    <header>
    	<h3>설문지</h3>
    	<p>
    		스타크래프트 플레이에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.
    	</p>
    </header>
    <hr>
    <section>
    	<article>
    		<form>
    			<label id="학년">
    				학년 
    				<input type="radio" name="학년" value="1">1학년
    				<input type="radio" name="학년" value="2">2학년
    				<input type="radio" name="학년" value="3">3학년
    				<input type="radio" name="학년" value="4">4학년
    			</label>
    		</form>
    	</article><br>
    	<article>
    		<form>
    			<label id="성별">
    				성별
    				<input type="radio" name="성별" value="1">남성
    				<input type="radio" name="성별" value="2">여성
    			</label>
    		</form>
    	</article><br>
    	<article>
    		<form>
    			<label id="종족">
    				주종족
    				<select>
    					<option value="1">테란</option>
    					<option value="2">저그</option>
    					<option value="3">프로토스</option>
    					<option value="4">랜덤</option>
    				</select>
    			</label>
    		</form>
    	</article><br>
    	<article>
    		<form>
    			<label id="맵">
    				선호 맵 : 
    				파이썬 <input type="checkbox" value="1">
    				투혼 <input type="checkbox" value="2">
    				써킷브레이커 <input type="checkbox" value="3">
    				단장의 능선 <input type="checkbox" value="4">
    
    			</label>
    		</form>
    	</article><br>
    	<article>
    		<form>
    			<label id="남기고 싶은 말">
    				남기고 싶은 말<br>
    				<textarea cols="20" rows="5">글을 남겨주세요</textarea>
    			</label>
    		</form>
    	</article><br>
    </section>
    <footer>
    	<strong>Copyright 2018 by NumeroK</strong>
    </footer>
    </body>
    </html>

    댓글

© 2018 TISTORY. All rights reserved.