<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제2-4</title>
</head>
<body>
<h3>웹 프로그래밍 개요</h3>
<hr>
<!--details 태그로 보거나 숨길 수 있는 세부사항 생성-->
<details>
<!--summary 태그로 details 요소에서 화면에 보일 제목 설정-->
<summary>웹의 기본 목적</summary>
<p>웹의 기본 목적은 한 컴퓨터에서 만든 문서(document)를 다른 컴퓨터에서 쉽게 볼 수 있도록 하는 것이다.</p>
</details>
<!--details 태그로 보거나 숨길 수 있는 세부사항 생성-->
<details>
<!--summary 태그로 details 요소에서 화면에 보일 제목 설정-->
<summary>왜 Web인가?</summary>
<p>전 세계의 컴퓨터들을 인터넷으로 거미줄처럼 연결하고 웹 문서를 쉽게 주고받을 수 있도록 시스템을 만들고 WWW(World Wide Web), 간단히 줄여 웹(Web)이라고 부른다.</p>
</details>
<!--details 태그로 보거나 숨길 수 있는 세부사항 생성-->
<details>
<!--summary 태그로 details 요소에서 화면에 보일 제목 설정-->
<summary>웹 페이지를 구성하는 3 요소</summary>
<ul>
<li>HTML - 문서의 구조와 내용</li>
<li>CSS(Cascading Style Sheet) - 문서의 모양</li>
<li>Javascript - 행동 및 응용 프로그램</li>
</ul>
</details>
</body>
</html>
[실습 2-5]
홈페이지 화면
소스 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제2-5</title>
<style>
.container {
width: 600px; /* container 클래스에 너비 600px 설정 */
margin: 0 auto; /* container 클래스에 margin 여백 0, 중앙에 배치 설정 */
}
ul { list-style-type: none; } /* 불릿 제거 */
label.title { /* title 클래스인 label에 적용 */
font-weight: bold; /* 글자 굵게 */
width: 80px; /* 너비 80px */
float: left; /* 왼쪽부터 배치 */
}
div.centered { text-align: center; } /* centered 클래스인 div에 가운데 정렬 적용 */
fieldset { margin: 15px 10px; } /* fieldset 상하 여백 15px, 좌우 여백 10px */
fieldset legend { /* fieldset 제목 */
color: purple; /* 글자색 보라 */
font-weight: bold; /* 글자 굵게 */
font-size: 18px; /* 글자 크기 10px */
}
ul li { margin-bottom: 10px; } /* 목록에 아래 여백 10px 설정 */
</style>
</head>
<body>
<div class="container">
<h1>상품 주문서</h1>
<form>
<fieldset>
<legend>개인 정보</legend>
<!--이름과 연락처를 작성할 수 있는 폼 생성-->
<ul>
<li>
<label for="uname" class="title">이름</label>
<!--placeholder로 폼의 정보 입력-->
<input type="text" id="uname" placeholder="여백없이 입력" required>
</li>
<li>
<label for="tel1" class="title">연락처</label>
<!--placeholder로 폼의 정보 입력-->
<input type="tel" id="tel1" placeholder="연락가능한 번호">
</li>
</ul>
</fieldset>
<fieldset>
<legend>배송지 정보</legend>
<!--주소, 전화번호, 메모를 작성할 수 있는 폼 생성-->
<ul>
<li>
<label for="addr" class="title">주소</label>
<input type="text" size="40" id="addr" required>
</li>
<li>
<label for="tel2" class="title">전화번호</label>
<input type="tel" id="tel2" required>
</li>
<li>
<label for="comment" class="title">메 모</label>
<textarea cols="40" rows="3" id="comment"></textarea>
</li>
</ul>
</fieldset>
<fieldset>
<legend>주문 정보</legend>
<!--checkbox로 체크 가능하도록 설정, 숫자를 입력할 수 있는 폼 생성-->
<ul>
<li>
<label><input type="checkbox">과테말라 안티구아 (100g) </label>
<label><input type="number" value="0" min="0" max="5">개 </label>
</li>
<li>
<label><input type="checkbox">인도네시아 만델링 (100g) </label>
<label><input type="number" value="0" min="0" max="5">개 </label>
</li>
<li>
<label><input type="checkbox">탐라는도다(블렌딩) (100g) </label>
<label><input type="number" value="0" min="0" max="5">개 </label>
</li>
</ul>
</fieldset>
<!--주문하기 버튼과 다시 작성 버튼 생성-->
<div class="centered">
<input type="submit" value="주문하기">
<input type="reset" value="다시 작성">
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제2-7</title>
<style>
body { font-family: 굴림; } /* 전체 글꼴을 굴림으로 설정 */
h3 { font-weight: bolder; } /* h3 태그의 글자를 굵게 설정 */
.title {
color: blue; /* title 태그의 글자를 파란색으로 설정 */
text-decoration: underline; /* title 태그의 글자에 밑줄 설정 */
}
li { list-style-type: square; } /* 목록의 불릿을 사각형으로 변경 */
#sample {
float: left; /* 왼쪽에 배치 */
text-align: center; /* 텍스트 가운데 정렬 */
}
footer { clear: both } /* 푸터 영역이 이전 요소를 밀고 올라오지 않도록 설정 */
</style>
</head>
<body>
<h3>스마트폰</h3>
<p>스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.</p>
<h3>목차</h3>
<!--목록에 앵커를 설정하여 특정 위치로 이동하도록 설정-->
<li><a href="#history">역사</a></li>
<li><a href="#android">안드로이드폰</a></li>
<li><a href="#iphone">아이폰</a></li>
<li><a href="#sample">샘플</a></li>
<h3 class="title">역사</h3>
<!--id를 이용하여 앵커 위치를 설정-->
<p id="history">최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다.</p>
<h3 class="title">안드로이드</h3>
<p id="android">안드로이드(영어:Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS)등) 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.</p>
<h3 class="title">아이폰</h3>
<p id="iphone">아이폰(영어: iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다. 미국 샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표했다.</p>
<h3>샘플</h3>
<div id="sample">
<p>스마트폰샘플</p>
<input type="image" src="스마트폰 샘플.jpg" alt="스마트폰 샘플" width="200px">
</div>
<footer>
<br>
<!--설문지 링크 생성-->
<p><a href="과제2-7 설문지.html" target="_blank">설문조사</a></p>
<p>Copyright 2017 by Kitae</p>
</footer>
<!--배경음악 삽입 및 자동 재생-->
<audio src="bgm.mp3" autoplay></audio>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제2-7설문지</title>
<style>
h1 { font-weight: bolder; } /* h1 태그에 굵은 글자 적용 */
body { font-family: 굴림; } /* 전체 글꼴을 굴림으로 설정 */
select { width: 200px; } /* select 태그에 너비 200px 설정 */
textarea { width: 350px; height: 150px } /* textarea 태그에 너비 350px, 높이 150px 설정 */
</style>
</head>
<body>
<h1>설문지</h1>
<p>소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.</p>
<hr>
<!--폼 생성-->
<form>
학년
<!--하나만 선택이 가능한 radio button 생성-->
<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학년
<br><br>
성별
<!--하나만 선택이 가능한 radio button 생성-->
<input type="radio" name="성별" value="1">남
<input type="radio" name="성별" value="2">여
<br><br>
관심 분야
<!--옵션 메뉴를 제공하는 드롭다운 리스트를 생성-->
<select name="관심 분야">
<option value="1">모바일 소프트웨어</option>
<option value="2">임베디드 소프트웨어</option>
</select>
<br><br>
진로
<!--중복 선택 가능한 checkbox 생성-->
<input type="checkbox" name="진로" value="1">개발
<input type="checkbox" name="진로" value="2">기획
<input type="checkbox" name="진로" value="3">영업
<input type="checkbox" name="진로" value="4">창업
<br><br>
남기고 싶은 말
<!--textarea 태그로 입력 창 생성-->
<br>
<!--placeholder로 폼의 정보 입력-->
<textarea placeholder="글을 남겨주세요"></textarea>
</form>
<!--footer 태그 생성-->
<footer>
<p>Copyright 2017 by Kitae</p>
</footer>
</body>
</html>
댓글