<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="5.css" type="text/css" rel="stylesheet">
<title>컴퓨터 기술 소개</title>
</head>
<body>
<audio src="media/EmbraceableYou.mp3" autoplay loop></audio>
<header>
<h1>스마트폰</h1>
<p>
스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를
탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두
갖추고 있다.
</p>
</header>
<nav>
<h2>목차</h2>
<ul>
<li><a href="#chap1">역사</a></li>
<li><a href="#chap2">안드로이드폰</a></li>
<li><a href="#chap3">아이폰</a></li>
<li><a href="#chap4">샘플</a></li>
</ul>
</nav>
<section>
<article>
<h2 id="chap1"><a href="https://ko.wikipedia.org/wiki/역사">역사</a></h2>
<p>최초의 스마트폰은 사이먼(Symon)으로 추정된다.
IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서
열린 컴댁스에서 컨셉 제품으로 전시되었다</p>
<article>
<article>
<h2 id="chap2"><a href="https://ko.wikipedia.org/wiki/안드로이드">안드로이드</a></h2>
<p>
안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어,
사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS),
멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.
</p>
</article>
<article>
<h2 id="chap3"><a href="https://ko.wikipedia.org/wiki/아이폰">아이폰</a></h2>
<p>
아이폰(영어: iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다.
미국 샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표했다
</p>
</article>
<article>
<h2 id="chap4">샘플</h4>
<table>
<caption>스마트폰샘플</caption>
<tbody>
<tr>
<td><img src="media/galaxys7.png"></td>
<td><img src="media/iphone6.png"></td>
<td><img src="media/tizen.png"></td>
<td><img src="media/windowphone.png"></td>
<td><img src="media/nokia.png"></td>
</tr>
</tbody>
</table>
<article>
</section>
<footer>
<p><a href="survey5.html" target="_blank">설문조사</a></p>
<p>Copyright 2017 by Kitae</p>
</footer>
</body>
</html>
파일명 : 5.css
html, body {
padding: 0;
margin: 0;
height: 100%;
}
header {
background-color: yellow;
height : 15%;
}
nav {
background-color: orange;
width : 25%;
float : left;
height : 75%;
}
section {
background-color: skyblue;
width : 75%;
float : right;
height : 75%;
}
footer {
background-color: violet;
clear : both;
height : 10%;
padding-left : 5px;
padding-top : 10px;
}
img {
width : 100px;
}
h1 {
text-align : center;
margin : 0px;
}
p {
font : "휴먼 편지체", "Sans-Serif";
font-size : 1em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="survey5.css" type="text/css" rel="stylesheet">
<title>소프트웨어</title>
<script>
function func1() {
if (frm.grade[0].checked == false
&& frm.grade[1].checked == false
&& frm.grade[2].checked == false
&& frm.grade[3].checked == false ) {
alert("학년을 선택하세요");
frm.grade[0].focus();
return false;
}
if (frm.gender[0].checked == false && frm.gender[1].checked == false ) {
alert("성별을 선택하세요");
frm.gender[0].focus();
return false;
}
if (frm.interest.selectedIndex == 0 ) {
alert("관심분야를 선택하세요");
frm.interest.focus();
return false;
}
if (frm.job[0].checked == false
&& frm.job[1].checked == false
&& frm.job[2].checked == false
&& frm.job[3].checked == false ) {
alert("진로를 한개 이상 선택하세요");
frm.job[0].focus();
return false;
}
if (frm.msg.value == "") {
alert("남기고 싶은 말을 입력하세요");
frm.msg.focus();
return false;
}
}
</script>
<style>
</style>
</head>
<body>
<header>
<h1>설문지</h1>
<p>소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.</p>
</header>
<section>
<article>
<form action="a.jsp" method="post" name="frm" onsubmit="return func1()">
<span>학년</span>
<input type="radio" name="grade" value="1">1학년
<input type="radio" name="grade" value="2">2학년
<input type="radio" name="grade" value="3">3학년
<input type="radio" name="grade" value="4">4학년
<br />
<span>성별</span>
<input type="radio" name="gender" value="남">남
<input type="radio" name="gender" value="여">여
<br />
<span>관심 분야</span>
<select name="interest">
<option value="">관심분야 선택</option>
<option value="1">모바일 소프트웨어</option>
<option value="2">웹 서비스</option>
<option value="3">빅데이터</option>
<option value="4">디지털 콘텐츠 및 가상 현실</option>
</select>
<br />
<span>진로(다중선택)</span>
<input type="checkbox" name="job" value="개발">개발
<input type="checkbox" name="job" value="기획">기획
<input type="checkbox" name="job" value="영업">영업
<input type="checkbox" name="job" value="창업">창업
<br />
<span>남기고 싶은 말</span>
<textarea name="msg" cols="50" rows="10">글을 남겨주세요</textarea>
<br />
<input type="submit" value="전송">
<input type="button" value="초기화" onclick="frm.reset()">
</form>
</article>
</section>
<footer><p>Copyright 2017 by Kitae</p></footer>
</body>
</html>
파일명 : survey5.css
html, body {
padding: 0;
margin: 0;
height: 100%;
}
h1 {
text-align : center;
margin : 0;
}
p {
font : "맑은고딕", "Sans-Serif";
}
section {
background-color: pink;
margin : 10px;
font : "맑은고딕", "Sans-Serif";
}
header {
background-color: yellow;
}
footer {
background-color: violet;
padding-top : 10px;
padding-bottom : 10px;
}
'IT > Css' 카테고리의 다른 글
| css3 - 레이아웃 배치 header, nav, section, footer, float (0) | 2018.08.28 |
|---|---|
| css3 - float 배치, 변환(transform rotate), 전환(transition), 리스트로 수직 메뉴 만들기, list float 응용, 애니메이션 응용 keyframes (0) | 2018.08.22 |
| css3 - :hover 활용, 이미지 테두리 만들기, text-shadow와 box-shadow (0) | 2018.08.21 |
| css3 - 배치, 리스트 꾸미기, 표 꾸미기, 폼 꾸미기 (0) | 2018.08.20 |
| css3로 웹 페이지 꾸미기 (0) | 2018.08.17 |