웹개발
[명품 웹 프로그래밍] OpenChallenge 5, CSS3로 태그 배치하기
hatch
2021. 10. 19. 23:00
728x90
반응형
| 웹 페이지(메인) 화면 | 설문지 화면 | |
 |
 |
 |
<메인 화면, css> ▶ 비율을 꽉 채우려면 html, body 에 대한 지정 먼저 해주어야 함.
html, body{margin: 0px; padding: 0px; height: 100%; width: 100%;}
h1 {text-align: center;}
header {background: yellow; height: 20%;}
nav {float: left; background-color: orange; height: 100%; width: 20%;}
section {float: left; background-color: skyblue; height: 100%; width: 80%;}
footer {clear: both; background-color: plum; padding: 5px;}
img {width: 100px; height: 150px; overflow: hidden;}<메인 화면, html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>컴퓨터기술소개</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header>
<h1>스마트폰</h1>
<p>스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하며 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.</p>
</header>
<nav>
<h2>목차</h2>
<ul>
<li><a href = "#역사">역사</a></li>
<li><a href="#안드로이드">안드로이드</a></li>
<li><a href="#아이폰">아이폰</a></li>
<li><a href="#샘플">샘플</li>
</ul>
</nav>
<section>
<article>
<h2 id="역사"><a href="https://ko.wikipedia.org/wiki/%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0#%EC%97%AD%EC%82%AC" target = "_blank">역사</a></h2>
<p>최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다.</p>
</article>
<article>
<h2 id="안드로이드"><a href="https://ko.wikipedia.org/wiki/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C_(%EC%9A%B4%EC%98%81_%EC%B2%B4%EC%A0%9C)" target = "_blank">안드로이드</a></h2>
<p>안드로이드(영어:Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS) 등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.</p>
</article>
<article>
<h2 id="아이폰"><a href="https://ko.wikipedia.org/wiki/%EC%95%84%EC%9D%B4%ED%8F%B0" target = "_blank">아이폰</a></h2>
<p>아이폰(영어:iPhone)은 미국의 애플사의 휴대전화 브랜드 및 시리즈이다. 2007년 1월 9일에 스티브 잡스가 처음으로 발표를 하였다.</p>
</article>
<article>
<h2 id="샘플">샘플</a></h2>
<table>
<caption>스마트폰 샘플</caption>
<tr>
<td><img src="media/galaxys7.png" width="100"></td>
<td><img src="media/iphone6.png" width="100"></td>
<td><img src="media/tizen.png" width="100"></td>
<td><img src="media/windowphone.png" width="100"></td>
<td><img src="media/nokia.png" width="100"></td>
</tr>
</table>
</article>
</section>
<footer>
<p id="research"><a href="survey.html" target="_blank">설문조사</a></p>
<p id="Copyright">Copyright 2017 by Kitae</p>
</footer>
</body>
</html>
<설문지 화면, css>
html, body {margin: 0px, padding: 0px; height: 100%; width: 100%;}
header {background-color: yellow; height: 20%;}
h1 {text-align: center;}
input {margin-bottom: 10px;}
select {margin-bottom: 10px;}
form {background-color: pink; height: 60%; margin: 10px;}
footer {background-color: plum; height: 20%; padding: 5px;}<설문지 화면, html>
<!DOCTYPE html>
<html>
<head>
<title>소프트웨어 기술 선호에 관한 설문지</title>
<link rel="stylesheet" type="text/css" href="survey.css">
</head>
<body>
<header>
<h1>설문지</h1>
<p> 소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.</p>
</header>
<section>
<form>
<label><span>학년</span>
<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학년
</label><br>
<label><span>성별</span>
<input type="radio" name="gender" value="1">남
<input type="radio" name="gender" value="2">여
</label><br>
<label><span>관심 분야</span>
<select>
<option>모바일 소프트웨어</option>
<option>웹서비스</option>
<option>빅데이터</option>
<option>디지털콘텐츠 및 가상현실</option>
</select>
</label><br>
<label><span>진로</span>
<input type="radio" name="job" value="1" checked>개발
<input type="radio" name="job" value="2">기획
<input type="radio" name="job" value="3">영업
<input type="radio" name="job" value="4">창업
</label><br>
<label><span>남기고 싶은 말</span>
<textarea cols="50" rows="10">글을 남겨주세요.</textarea>
</label>
</form>
</section>
<footer>
<p>Copyright 2017 by Kitae</p>
</footer>
</body>
</html>