1. 구조화
<before>
스마트폰
스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.
역사
최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다
안드로이드
안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.
아이폰
아이폰(영어: iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다. 미국 샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표했다
샘플
![]() |
![]() |
![]() |
![]() |
![]() |
<html><head>
<meta charset="UTF-8">
<title>컴퓨터 기술 소개</title>
<meta name="description" content="컴퓨터 기술 중 스마트폰에 대한 간단한 소개">
<meta name="keywords" content="컴퓨터, 소프트웨어, 스마트폰">
<meta name="viewport" content="width=device-width">
<meta name="robots" content="index,follow">
</head>
<body>
<audio src="media/housemusic.mp3" autoplay="" loop=""></audio>
<div id="header">
<h1>스마트폰</h1>
<p>스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를
탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두
갖추고 있다.</p>
</div>
<div class="navigation">
<h2>목차</h2>
<ul>
<li><a href="#history">역사</a></li>
<li><a href="#android">안드로이드폰</a></li>
<li><a href="#iphone">아이폰</a></li>
<li><a href="#sample">샘플</a></li>
</ul>
</div>
<div id="container">
<div>
<h2 id="history"><a href="https://ko.wikipedia.org/wiki/스마트폰" target="_blank">
역사</a></h2>
<p>최초의 스마트폰은 사이먼(Symon)으로 추정된다.
IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서
열린 컴댁스에서 컨셉 제품으로 전시되었다</p>
</div>
<div>
<h2 id="android"><a href="https://ko.wikipedia.org/wiki/안드로이드_(운영체제)" target="_blank">
안드로이드</a></h2>
<p>안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어,
사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS),
멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.</p>
</div>
<div>
<h2 id="iphone"><a href="https://ko.wikipedia.org/wiki/아이폰" target="_blank">
아이폰</a></h2>
<p>아이폰(영어: iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다.
미국 샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표했다</p>
</div>
<div>
<h2 id="sample">샘플</h2>
<table>
<caption>스마트폰샘플</caption>
<tbody>
<tr><td><img src="media/galaxys7.png" width="100" alt="갤럭시7"></td>
<td><img src="media/iphone6.png" width="100" alt="아이폰6"></td>
<td><img src="media/tizen.png" width="100" alt="타이젠"></td>
<td><img src="media/windowphone.png" width="100" alt="윈도우폰"></td>
<td><img src="media/nokia.png" width="100" alt="노키아폰"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="footer">
<p>KNU Web Programming</p>
</div>
</body>
</html>
<after>
스마트폰
스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.
안드로이드
최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다
안드로이드
안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.
아이폰
아이폰(영어: iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다. 미국 샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표했다
<head>
<meta charset="UTF-8">
<title>컴퓨터 기술 소개</title>
<meta name="description" content="컴퓨터 기술 중 스마트폰에 대한 간단한 소개">
<meta name="keywords" content="컴퓨터, 소프트웨어, 스마트폰">
<meta name="viewport" content="width=device-width">
<meta name="robots" content="index,follow">
</head>
<body>
<header>
<audio src="media/housemusic.mp3" autoplay="" loop=""></audio>
<h1>스마트폰</h1>
<p>스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를
탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두
갖추고 있다.</p>
</header>
<nav>
<h2>목차</h2>
<ul>
<li><a href="#history">역사</a></li>
<li><a href="#android">안드로이드폰</a></li>
<li><a href="#iphone">아이폰</a></li>
<li><a href="#sample">샘플</a></li>
</ul>
</nav>
<section>
<article id="history">
<h2><a href="https://ko.wikipedia.org/wiki/안드로이드_(운영체제)" target="_blank">
안드로이드</a></h2>
<p>최초의 스마트폰은 사이먼(Symon)으로 추정된다.
IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서
열린 컴댁스에서 컨셉 제품으로 전시되었다</p>
</article>
<article id ="android">
<h2><a href="https://ko.wikipedia.org/wiki/안드로이드_(운영체제)" target="_blank">
안드로이드</a></h2>
<p>안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어,
사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS),
멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.</p>
</article>
<article id="iphone">
<h2><a href="https://ko.wikipedia.org/wiki/아이폰" target="_blank">
아이폰</a></h2>
<p>아이폰(영어: iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다.
미국 샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표했다</p>
</article>
<aside id="sample">
<h3>샘플</h3>
<table>
<caption>스마트폰샘플</caption>
<tbody>
<tr><td><img src="media/galaxys7.png" width="100" alt="갤럭시7"></td>
<td><img src="media/iphone6.png" width="100" alt="아이폰6"></td>
<td><img src="media/tizen.png" width="100" alt="타이젠"></td>
<td><img src="media/windowphone.png" width="100" alt="윈도우폰"></td>
<td><img src="media/nokia.png" width="100" alt="노키아폰"></td>
</tr>
</tbody>
</table>
</aside>
<footer>
<h4><a href="file:///C:/Users/82103/OneDrive/%EB%B0%94%ED%83%95%20%ED%99%94%EB%A9%B4/school/2022%201%ED%95%99%EA%B8%B0/%EC%9B%B9%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/webProgrammingWorks/HTML/week04/survey.html"
target="_blank"> 설문조사</a></h4>
<p>KNU Web Programming</p>
</footer>
</section>
</body>
각종 태그를 사용해서 html 구조화 해보았다. 보이는 화면은 똑같지만 F12 눌러서 코드 뜯어보면 확연하게 다름. 훨씬 깔끔하다.. 근데 좀 귀찮음 그래도 해야지 ^ ^ 하하.
2. 설문조사 폼
교수님도 그러셨고 폼 태그 하나하나 다 외우는 것보다 그때그때 찾아 쓰는 방법을... ^^ 구글링도 능력이야 막이래
설문지
소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>설문조사</title>
</head>
<body>
<header>
<h1>설문지</h1>
<p>소프트웨어 기술에 대한 의견을 듣습니다.
많은 참여 부탁드립니다.</p>
<hr>
</header>
<form>
학년 <input type="radio" name="grade" value="1" checked>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학년
</form>
<form> <br>
성별 <input type="radio" name="gender" value = "1"> 남
<input type="radio" name="gender" value = "2"> 여
</form>
<form><br>
관심 분야 <select name = "interest">
<option value ="1">인공지능</option>
<option value = "2" selected>모바일 소프트웨어</option>
<option value = "3">데이터베이스</option>
</select>
</form>
<form><br>
진로 <input type="checkbox" value="1" checked> 개발
<input type="checkbox" value="2"> 기획
<input type="checkbox" value="3"> 영업
<input type="checkbox" value="4"> 창업
</form>
<form><br>
남기고 싶은 말 <textarea cols="60" rows="15">글을 남겨주세요</textarea>
</form>
</body>
</html>
'FE > Web(HTML5, CSS, JS)' 카테고리의 다른 글
갬블링게임 (0) | 2022.05.11 |
---|---|
[HTML 실습 01] 기본 문서 작성, 표 생성, 셀 병합, th, td (0) | 2022.03.19 |
[HTML] tag (0) | 2022.03.19 |
[HTML] Basic structure, How to use, Layout (0) | 2022.03.17 |