[실습 자료 열람 홈페이지]
- 홈페이지 화면
- 소스코드
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변규진의 홈페이지</title>
<style>
body { background-color: linen; color: green;
margin-left: 40px; margin-right: 40px; } /* body 태그의 배경색을 linen, 색을 green, */
h3 {text-align: center; color: darkred;} /* h3 태그를 가운데 정렬하고 색을 darkred로 설정 */
hr { height: 5px; border: solid grey;
background-color: grey } /* 수평 줄의 높이를 5px, border를 solid grey, 배경 색을 grey로 설정 */
span { color: blue; font-size: 20px; } /* span 태그의 색을 blue, 글자 크기를 20px로 설정 */
a { color: black; } /* a 태그의 링크 글자색을 black으로 설정 */
a:visited { color: black; } /* a 태그의 방문한 링크 글자색을 black으로 설정 */
</style>
</head>
<body>
<h3>변규진의 홈페이지</h3>
<hr> <!-- 수평 줄 생성 -->
<br> <!-- 줄 바꿈 -->
<details>
<summary>과제1</summary>
<ul>
<li><a href="과제1-1.html" target="_blank">과제1-1</a></li> <!-- 순서가 없는 리스트 생성 -->
<li><a href="과제1-2.html" target="_blank">과제1-2</a></li> <!-- a 태그를 이용하여 과제 HTML 문서 링크와 연결 -->
<li><a href="과제1-3.html" target="_blank">과제1-3</a></li> <!-- target="_blank"로 링크 클릭시 새 탭에 사이트 출력 -->
</ul>
</details>
<details>
<summary>과제2</summary>
<ul>
<li><a href="과제2-1.html" target="_blank">과제2-1</a></li>
<li><a href="과제2-2.html" target="_blank">과제2-2</a></li>
<li><a href="과제2-3.html" target="_blank">과제2-3</a></li>
<li><a href="과제2-4.html" target="_blank">과제2-4</a></li>
<li><a href="과제2-5.html" target="_blank">과제2-5</a></li>
<li><a href="과제2-6.html" target="_blank">과제2-6</a></li>
<li><a href="과제2-7.html" target="_blank">과제2-7</a></li>
</ul>
</details>
<details>
<summary>과제3</summary>
<ul>
<li><a href="과제3-1.html" target="_blank">과제3-1</a></li>
<li><a href="과제3-2.html" target="_blank">과제3-2</a></li>
<li><a href="과제3-3.html" target="_blank">과제3-3</a></li>
<li><a href="과제3-4.html" target="_blank">과제3-4</a></li>
<li><a href="과제3-5.html" target="_blank">과제3-5</a></li>
<li><a href="과제3-6.html" target="_blank">과제3-6</a></li>
<li><a href="과제3-7.html" target="_blank">과제3-7</a></li>
<li><a href="과제3-8.html" target="_blank">과제3-8</a></li>
<li><a href="과제3-9.html" target="_blank">과제3-9</a></li>
<li><a href="과제3-10.html" target="_blank">과제3-10</a></li>
<li><a href="과제3-11.html" target="_blank">과제3-11</a></li>
</ul>
</details>
<details>
<summary>과제4</summary>
<ul>
<li><a href="과제4.html" target="_blank">끝말잇기 게임 만들기</a></li>
</ul>
</details>
<details>
<summary>과제5</summary>
<ul>
<li><a href="과제5-1.html" target="_blank">과제5-1</a></li>
<li><a href="과제5-2.html" target="_blank">과제5-2</a></li>
<li><a href="과제5-3.html" target="_blank">과제5-3</a></li>
<li><a href="과제5-4.html" target="_blank">과제5-4</a></li>
<li><a href="과제5-5.html" target="_blank">과제5-5</a></li>
<li><a href="과제5-6.html" target="_blank">과제5-6</a></li>
<li><a href="과제5-7.html" target="_blank">과제5-7</a></li>
</ul>
</details>
<details>
<summary>과제6</summary>
<ul>
<li><a href="과제6-1.html" target="_blank">과제6-1</a></li>
<li><a href="과제6-2.html" target="_blank">과제6-2</a></li>
<li><a href="과제6-3.html" target="_blank">과제6-3</a></li>
<li><a href="과제6-4.html" target="_blank">과제6-4</a></li>
<li><a href="과제6-5.html" target="_blank">과제6-5</a></li>
<li><a href="과제6-6.html" target="_blank">과제6-6</a></li>
<li><a href="과제6-7.html" target="_blank">과제6-7</a></li>
<li><a href="과제6-8.html" target="_blank">과제6-8</a></li>
</ul>
</details>
<details>
<summary>과제7</summary>
<ul>
<li><a href="과제7.html" target="_blank">과제7</a></li>
</ul>
</details>
<details>
<summary>과제8</summary>
<ul>
<li><a href="과제8-1.html" target="_blank">과제8-1</a></li>
<li><a href="과제8-2.html" target="_blank">과제8-2</a></li>
<li><a href="과제8-3.html" target="_blank">과제8-3</a></li>
</ul>
</details>
</body>
</html>[실습 8-1]
- 프로그램 알고리즘
- 문제를 랜덤으로 자동 생성한다.
- 10초가 지나면 자동으로 채점한다.
- 다시 버튼을 누르면 재실행한다.
- 홈페이지 화면
- 소스코드
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제8-1</title>
<style>
td {
padding-left : 10px;
padding-right : 10px;
}
</style>
<script>
var show=null, count;
function ontime() //시간 카운트
{
document.getElementById("grade").innerHTML = 0;
var time = document.getElementById("time");
count = 10;
if(show != null)
clearTimeout(show);
outtime(time);
}
function outtime(cls) //점점 시간이 줄어드는 함수
{
count--;
cls.innerHTML = count;
if(count != 0)
show = setTimeout("outtime(time)", 1000);
else
correct(); // 0이 되면 채점을 하는 함수
}
function make() //문제 만들기 함수
{
var one = document.getElementsByClassName("one");
var two = document.getElementsByClassName("two");
for(i=0; i<one.length; i++)
{
var num1 = Math.floor(Math.random()*99); //첫 번째 랜덤 넘버
var num2 = Math.floor(Math.random()*99); //두 번째 랜던 넘버
var op = Math.floor(Math.random()*4); // 연산자를 랜덤으로 하기 위해서 상수화를 하고 switch를 써서 연산자를 정한다.
var operator;
switch(op)
{
case 0 : operator = "+";
break;
case 1 : operator = "-";
break;
case 2 : operator = "*";
break;
case 3 : operator = "/";
break;
}
one[i].innerHTML = num1 + operator + num2; // 문제 출력
}
}
function correct() //채점 함수
{
var countgrade = 0; // 채점 개수
var one = document.getElementsByClassName("one");
var two = document.getElementsByClassName("two");
for(i=0; i<one.length; i++)
{
var question = one[i].innerHTML;
var answer = two[i].value;
var correct = Math.floor(eval(question));
if(parseInt(answer) == correct) //정답이면 개수 +1
countgrade += 1;
else if(answer=="") //비어 있으면 틀림
one[i].style.textDecoration = "line-through";
else if(isNaN(answer))// 숫자가 아니면 틀림
one[i].style.textDecoration = "line-through";
else// 정답이 틀리면 틀림
one[i].style.textDecoration = "line-through";
}
document.getElementById("grade").innerHTML = countgrade; // 정답 개수 출력
}
</script>
</head>
<body onload="ontime(), make()">
<h3>산수 문제를 풀어 봅시다.</h3>
문제는 자동으로 생성되며, 10초가 지나면 자동 채점됩니다.
<div>
남은 시간 <span id="time">0</span>
</div>
<hr>
<form>
<table>
<tr>
<td class="one"></td>
<td><input class="two" type="text" size="6"></td>
</tr>
<tr>
<td class="one"></td>
<td><input class="two" type="text" size="6"></td>
</tr>
<tr>
<td class="one"></td>
<td><input class="two" type="text" size="6"></td>
</tr>
<tr>
<td class="one"></td>
<td><input class="two" type="text" size="6"></td>
</tr>
<tr>
<td><button type="button" onclick="ontime(), make()">다시</button></td>
<td><span id="grade">0</span> </td>
</tr>
</table>
</form>
</body>
</html>
[실습 8-2]
- 홈페이지 화면
- 소스코드
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제8-2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 화면 크기 조절 -->
<style>
* {
margin:0;
padding:0;
}
#wrapper {
width:320px;
margin:0 auto;
}
h1 {
text-align:center;
margin-bottom:10px;
}
#img-box {
width:100%;
}
.box {
width:320px;
height:180px;
border:1px solid black;
margin-bottom:10px;
}
.img1 { background:#ff6a00; }
.img2 { background:#0094ff; }
.img3 { background:#ff006e; }
.img4 { background:#4cff00; }
/* 화면 너비 768px 이상 */
@media all and ( min-width:768px ) {
#wrapper {
width :768px;
}
#img-box {
display : flex;
flex-direction : row;
flex-wrap : wrap;
justify-content : space-around;
}
.box {
width :47%;
margin :0.5%;
}
}
/* 화면 너비 1024px 이상 */
@media all and ( min-width:1024px ) {
#wrapper {
width :1024px ;
}
.box {
width :22% ;
margin :0.5% ;
}
}
</style>
</head>
<body >
<div id ="wrapper">
<h1 >반응형 웹 디자인</h1>
<div id="img-box">
<div class="box img1"></div>
<div class="box img2"></div>
<div class="box img3"></div>
<div class="box img4"></div>
</div>
</div>
</body>
</html>
[실습 8-3]
- 홈페이지 화면
- 소스코드
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>과제8-3</title>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
@import url(http://fonts.googleapis.com/css?family=Oleo+Script);
html {
margin:0;
padding:0;
}
body {
background: #fff;
font-family: "Jeju Gothic", serif;
}
a {
text-decoration: none;
}
nav a:hover { /* 메뉴에 마우스를 올려놓으면 글자가 노랗게 변하고 흰 그림자 생성 */
color: yellow;
text-shadow: 2px 2px 2px white;
}
nav a:link, a:visited {
color: #fff;
}
nav a:active {
color: yellow;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.3em;
}
p {
font-size: 1.3em;
line-height: 2.5;
}
li {
font-size: 1em;
line-height: 2;
}
/* 모바일 - 767px 이하 */
#container {
width: 100%;
}
header {
width: 100%;
height: 300px;
background: url(header.png) center no-repeat;
background-size: cover;
margin: 0;
}
nav {
height: 50px;
background: #000;
}
#main-nav {
list-style: none;
margin: 0;
padding: 10px;
}
#main-nav li {
display: inline-block;
color: #fff;
font-family: "맑은 고딕", 돋움;
font-size: 0.8em;
margin: 5px 15px;
}
section {
position: relative;
width: 100%;
padding: 15px 5% 10px 5%;
}
#container section:nth-child(odd) {
background: #eee;
}
.page-title {
position: absolute;
top: 20px;
left: 0;
padding: 30px 50px;
}
.page-title h1 {
margin-bottom: 30px;
}
.content {
margin: 80px auto 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 90%;
padding: 20px;
}
.content ol {
margin-top: 20px;
}
.sub-titles {
color: #0094ff;
font-weight: 600;
}
.photo {
display: none;
}
footer {
position: relative;
width: 100%;
height: 100px;
background: #000;
}
footer p {
font-family: 'Oleo Script', cursive;
font-size: 1.5em;
line-height: 100px;
color: white;
text-align: center;
}
/* 태블릿 - 768px 이상 */
@media screen and (min-width: 768px) {
header {
height: 400px;
}
#intro, #map_1 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
height: 400px;
float: left;
margin: 0;
border: 1px dotted #ccc;
}
#choice {
clear: left;
}
}
/* PC - 992px 이상 */
@media screen and (min-width:992px) {
#container {
width: 995px;
margin: 0 auto;
border: 1px solid #ccc;
}
header {
height: 500px;
}
#intro, #map_1, #choice {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
clear: both;
position: relative;
width: 100%;
height: 420px;
padding: 15px 2% 10px 5%;
}
.content {
margin: 80px auto 10px;
width: 90%;
padding: 20px;
}
.photo {
width: 42%;
display: block;
}
.photo > img {
width: 100%;
max-width: 320px;
height: auto;
margin-bottom: 30px;
}
.text {
width: 42%;
}
#intro .photo, #map_1 .photo {
float: left;
margin-right: 5%;
}
#intro .text, #map_1 .text {
float: left;
}
#choice .photo {
float: right;
margin-right: 5%;
}
#choice .text {
float: left;
}
footer {
clear: both;
}
}
#map { /* 구글 지도의 여백과 크기 설정 */
margin-top: 20px;
height: 250px;
width: 250px;
}
</style>
<script>
function initMap() { // 지도들 추가해주고 초기화
const cafe = { lat: 33.229724, lng: 126.308845 }; // 카페 위치
const map = new google.maps.Map(document.getElementById("map"), { // 지도를 카페의 가운데로
zoom: 4,
center: cafe,
});
const marker = new google.maps.Marker({ // 마커를 카페에 표시
position: cafe,
map: map,
});
}
window.initMap = initMap;
</script>
</head>
<body>
<div id="container">
<header>
<nav>
<ul id="main-nav"> <!-- 메뉴를 누르면 해당 앙복으로 이동 -->
<li><a href="#intro">카페소개</a></li>
<li><a href="#map">오시는 길</a></li>
<li><a href="#choice">이달의 추천</a></li>
</ul>
</nav>
</header>
<section id="intro">
<div class="page-title">
<h1>카페 소개</h1>
</div>
<div class="content">
<div class="photo">
<img src="coffee.jpg" alt="커피">
</div>
<div class="text">
<p>영업 시간 : 오전 9시~ 밤 10시</p>
<p>휴무 : 매주 수요일<i><small>(수요일이 공휴일인 경우 수요일 영업, 다음날 휴무)</small></i></p>
</div>
</div>
</section>
<section id="map_1">
<div class="page-title">
<h1>오시는 길</h1>
</div>
<div class="content">
<div class="photo">
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/@googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&v=weekly"
defer
></script> <!-- 구글 지도 API 키를 입력하여 구글 지도 불러오기 -->
</div>
<div class="text">
<p>서귀포시 안덕면 사계리 oooo-ooo</p>
<p>제주 올레 10코스 산방산 근처</p>
</div>
</div>
</section>
<section id="choice">
<div class="page-title">
<h1>이달의 추천</h1>
</div>
<div class="content">
<div class="photo">
<img src="ice.jpg" alt="아이스커피" style="border:1px solid white; border-radius:50%">
</div>
<div class="text">
<h2 class="sub-titles">핸드드립 아이스 커피</h2>
<ol>
<li>1인분 기준으로 서버에 각 얼음 5조각(한조각은 20cc)넣고 추출을 시작한다.</li>
<li>평상시 보다 원두의 양은 2배정도(20g)와 추출액은 얼음 포함해서 200cc까지 내린다.</li>
<li>아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다.</li>
</ol>
</div>
</div>
</section>
<footer>
<p>My times with Coffee</p>
</footer>
</div>
</body>
</html>'Web Programming > Front-End 실습' 카테고리의 다른 글
| 07 7주차 실습 (0) | 2023.05.13 |
|---|---|
| 06 6주차 실습 (1~8) (0) | 2023.05.01 |
| 05 5주차 실습 (1~7) (1) | 2023.04.22 |
| 04 4주차 실습 (0) | 2023.04.22 |
| 03 3주차 실습 (실습 1~11) (1) | 2023.04.22 |
댓글