sdjo/html-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code 수정

Browse Source
This commit is contained in:
hm-desk 2025-02-02 00:45:57 +09:00
parent 7b27feb91e
commit 549a1ddb04
3 changed files with 60 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -1,2 +1,10 @@
# html-test # 인터넷프로그래밍 과제
## 과제 내용
```bash
과제5
스크립트를 이용한 동적인 페이지를 만드시오(12주차 2차시)
- 'html 파일'로 작성
```
## 과제 진행 과정
코드 작성후 쿠버네티스 환경에 배포.

32
asign.html
View File

@ -2,13 +2,13 @@
<html lang="ko"> <html lang="ko">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- 장치크기 자동 확대 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인사말 페이지</title> <title>과제 페이지</title>
<style> <style>
body { body {
font-family: Arial, sans-serif;
text-align: center; text-align: center;
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; /* 부드러운 변화 효과 */
} }
.light-mode { .light-mode {
background-color: #ffffff; background-color: #ffffff;
@ -39,22 +39,40 @@
} }
table { table {
margin: 20px auto; margin: 20px auto;
border-collapse: collapse; border-collapse: separate; /* 개별 셀 분리 */
border-spacing: 0;
width: 50%; width: 50%;
border-radius: 10px;
border: 1px solid #000; /* 테이블 전체 테두리 */
overflow: hidden;
} }
th, td { th, td {
border: 1px solid #000; border: 1px solid #000;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
} }
th {
background-color: navy;
color: white;
font-weight: bold;
}
.dark-mode th, .dark-mode td { .dark-mode th, .dark-mode td {
border: 1px solid #fff; border: 1px solid #fff;
} }
a {
color: inherit; /* 기본 텍스트 색상 유지 */
text-decoration: none; /* 밑줄 제거 */
}
a:hover {
text-decoration: underline; /* 마우스 호버 시 밑줄 추가 */
color: dodgerblue; /* URL 텍스트 색상 변경 */
}
</style> </style>
</head> </head>
<body class="light-mode"> <body class="light-mode">
<div class="container"> <div class="container">
<h1>안녕하세요! 반갑습니다.</h1> <h1>안녕하세요! </h1>
<h3>23200671 조성동 과제 제출 입니다.</h3>
<button onclick="toggleTheme()">다크 모드 전환</button> <button onclick="toggleTheme()">다크 모드 전환</button>
<table> <table>
<tr> <tr>
@ -62,8 +80,8 @@
<th>url</th> <th>url</th>
</tr> </tr>
<tr> <tr>
<td>test page</td> <td>code 저장소</td>
<td><a href="https://assign.icurfer.com" target="_blank">https://assign.icurfer.com</a></td> <td><a href="https://gitea.icurfer.com/sdjo/html-test" target="_blank">https://gitea.icurfer.com/sdjo/html-test</a></td>
</tr> </tr>
</table> </table>
</div> </div>

32
kube-manifests/cm-html.yaml
View File

@ -9,13 +9,13 @@ data:
<html lang="ko"> <html lang="ko">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- 장치크기 자동 확대 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인사말 페이지</title> <title>과제 페이지</title>
<style> <style>
body { body {
font-family: Arial, sans-serif;
text-align: center; text-align: center;
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; /* 부드러운 변화 효과 */
} }
.light-mode { .light-mode {
background-color: #ffffff; background-color: #ffffff;
@ -46,22 +46,40 @@ data:
} }
table { table {
margin: 20px auto; margin: 20px auto;
border-collapse: collapse; border-collapse: separate; /* 개별 셀 분리 */
border-spacing: 0;
width: 50%; width: 50%;
border-radius: 10px;
border: 1px solid #000; /* 테이블 전체 테두리 */
overflow: hidden;
} }
th, td { th, td {
border: 1px solid #000; border: 1px solid #000;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
} }
th {
background-color: navy;
color: white;
font-weight: bold;
}
.dark-mode th, .dark-mode td { .dark-mode th, .dark-mode td {
border: 1px solid #fff; border: 1px solid #fff;
} }
a {
color: inherit; /* 기본 텍스트 색상 유지 */
text-decoration: none; /* 밑줄 제거 */
}
a:hover {
text-decoration: underline; /* 마우스 호버 시 밑줄 추가 */
color: dodgerblue; /* URL 텍스트 색상 변경 */
}
</style> </style>
</head> </head>
<body class="light-mode"> <body class="light-mode">
<div class="container"> <div class="container">
<h1>안녕하세요! 반갑습니다.</h1> <h1>안녕하세요! </h1>
<h3>23200671 조성동 과제 제출 입니다.</h3>
<button onclick="toggleTheme()">다크 모드 전환</button> <button onclick="toggleTheme()">다크 모드 전환</button>
<table> <table>
<tr> <tr>
@ -69,8 +87,8 @@ data:
<th>url</th> <th>url</th>
</tr> </tr>
<tr> <tr>
<td>test page</td> <td>code 저장소</td>
<td><a href="https://assign.icurfer.com" target="_blank">https://assign.icurfer.com</a></td> <td><a href="https://gitea.icurfer.com/sdjo/html-test" target="_blank">https://gitea.icurfer.com/sdjo/html-test</a></td>
</tr> </tr>
</table> </table>
</div> </div>