Web Programming/Front-End 실습
07 7주차 실습
Orangetasteboy
2023. 5. 13. 22:35
[실습 자료 열람 홈페이지]
- 홈페이지 화면
- 소스코드
<!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>
</body>
</html>
[실습 7]
- 프로그램 알고리즘
- 물품에 해당되는 체크박스를 선택한다.
- 선택한 체크박스의 값들을 모두 더한다.
- 더한 결과 값을 폼에 출력한다.
- 홈페이지 화면
- 소스코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>과제7</title>
<script>
var sum=0;
function calc(cBox) { // 체크한 물품을 선택하면 값을 계산해주는 함수
var sumtext = document.getElementById("sumtext");
if(cBox.checked) // 체크박스가 선택되었을 때
sum += parseInt(cBox.value);
else // 체크박스가 선택되지 않았을 때
sum -= parseInt(cBox.value);
sumtext.value = sum; // 값을 모두 합산
//document.getElementById("sumtext").value = sum;
}
</script>
</head>
<body>
<h3>물품을 선택하면 금액이 자동 계산됩니다</h3>
<hr>
<form>
<input type="checkbox" name="hap" value="10000"
onclick="calc(this)">모자 1만원
<input type="checkbox" name="shose" value="30000"
onclick="calc(this)">구두 3만원
<input type="checkbox" name="bag" value="80000"
onclick="calc(this)">명품가방 8만원<br>
지불하실 금액 <input type="text" id="sumtext" value="0" >
</form>
</body>
</html>