2021년도 1학기 학교 수업 내 개인 과제로 웹 페이지 제작을 진행했다.
나에 대한 정보와 사진을 담아 다른 사람들에게 보여줄 수 있는 웹 페이지를 만들고자 했다.
또한, 서버에 올려 실제로 웹에 url 검색을 통해 접속할 수 있도록 했다.
**짧은 시간 내에 부족한 지식으로 제작하여 결과물이 미흡할 수 있습니다**
기획
총 5개의 페이지를 만들기로 계획했는데, 다음과 같다.
- 메인 페이지
- 나에 대해 설명하는 페이지
- 상세 정보를 담은 페이지
- 경험에 대한 페이지
- 컨택을 위한 페이지
아래의 사진들은 당시 기획안을 PPT로 만들어 본 것으로,
실제 구현은 하지 않은 상태에서 제작한 것이다.
일단 학교에서 배운 바를 활용하여 html 파일을 구성하고,
파일 전송 등을 위해 php 파일을 구성한 뒤
전체 파일을 FTP 프로그램(알드라이브, FileZilla 등)을 활용하여
서버에 올릴 수 있도록 했다.
결과물
html, css를 활용하여 제작했다.
개선하면 좋을 것 같은 점들이 있었다.
- 웹 브라우저별로 화면의 글자가 밀리는 등의 오류가 발생하는 문제가 있었다.
- php를 통해 파일 전송 등의 입력을 만들고자 했던 기획은 수행하지 못했다.
- 수정 가능한 사람을 제한시키는 로그인 페이지도 추가했으면 좋았을 것 같다.
이 세 가지 모두 추후 수정해서 업로드하게 되면 글을 새로 써 볼 예정이다.
safari를 기준으로 제작했기 때문에 크롬에서는 다를 수 있다.
또, 하단 캡쳐본은 크롬을 기준으로 찍은 것이다.
메인 페이지에서는 상단 하이퍼링크를 통해 다른 페이지로 접속할 수 있도록 했다.
단순 안내용 페이지이기 때문에 별도의 기능은 추가하지 않았다.
두 번째 페이지는 메인 페이지에서 [1) who is she]라는 하이퍼링크를
클릭했을 때 넘어올 수 있도록 설정했으며,
사진과 영상, 유튜브 영상 등을 첨부하여 다양하게 나에 대해 소개해 볼 수 있도록 했다.
또 개인적으로 촬영했던 영상은 길이가 짧아 계속해서 반복적으로 재생될 수 있도록 했다.
사실 글상자를 넣고 싶었으나 오류가 다양하게 발생해서 설명글 자체는 사진으로 대체했다.
음악 재생을 위해 오디오를 추가했으나 그 당시에는 크롬에서 재생되지 않는 오류가 있어서,
하단 사진과 같이 알림 메세지를 설정하여
페이지를 사용하는 사람들이 당황하지 않을 수 있도록 했다.
3번 페이지는 [2) profile] 하이퍼링크를 클릭해 넘어올 수 있으며,
우측 하단의 설명글을 변경할 수 있는 입력란을 다양하게 만들어 두었다.
다만 앞서 설명했듯 php 파일을 제작하지 못하여 실제로 전송되지는 않는다는 단점이 있다.
원래는 ID와 비밀번호를 적절히 입력한 뒤
전송하기를 누르면 설명글을 바꿀 수 있도록 제작할 예정이었다.
하단의 [hiding image] 버튼을 누르면 사진을 가렸다가 드러나게 했다가 설정할 수 있다.
원래 개인 이미지 파일을 넣었었기 때문에, 보여주고 싶지 않은 경우를 위해 만든 버튼이다.
또, 입력하다가 초기화시키고 싶을 경우를 대비하여
초기화 버튼을 추가해 원래대로 되돌릴 수 있도록 했다.
[3) experience] 하이퍼링크로 넘어올 수 있는 4번 페이지에서는
표를 활용해서 당시에 계획했던 일들을 넣었다.
역시 이 페이지에서도 [hiding image] 버튼을 활용해 사진을 가릴 수 있다.
[4) contact]를 눌러 5번 페이지로 넘어가게 되면 하단 이미지와 같은 알림 메세지가 뜨게 된다.
전할 말을 남기는 페이지이므로 하단과 같은 메세지를 추가하였다.
이 페이지에서는 전하고 싶은 말을 남길 수 있다.
좌측은 화면이 너무 비어 보여서, 촬영했던 사진을
캔버스 기능을 활용해 디자인적 요소를 추가해 첨부했다.
또 사용자가 쉽게 작성할 수 있도록 placeholder를 활용해 설명용 글자를 미리 넣어두었다.
요청사항을 작성할 경우 적혀져 있는 글자를 삭제한 뒤 작성할 수 있도록
하단 이미지와 같은 알림 메세지를 설정했다.
또, 글을 작성하다가 눈이 아플 경우를 대비하여 [ForGoodEye] 버튼을 눌러
눈에 좋은 초록색(...)으로 색상 변경도 가능할 수 있도록 설정하였다.
아래 링크를 클릭하면 실제 페이지를 확인할 수 있다.
Page of Seah Kim
mm.sookmyung.ac.kr
아래는 각각의 코드를 작성한 것이다.
1. index.html : 메인 페이지
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Page of Seah Kim</title>
<!--구글에서 font 가져오기-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<style type="text/css">
p {font-size: 14pt; text-align: center; font-weight: 400; letter-spacing: 6px;}
h5 {font-size: 9pt; text-align: center; font-weight: 400; letter-spacing: 2px;}
h3 {font-size: 8pt; font-weight: 400; letter-spacing: 1px;}
strong {font-weight: 800; font-size: larger;}
a {text-decoration: none; color:white;}
#box1 {display: block; background-color: #AAC9CE; margin: 30px 10px 10px 10px; padding: 15px 100px 15px 100px; color: white; text-align: center;}
#box2 {display: block; background-color: #E5C1CD; margin: 10px 10px 10px 10px; padding: 15px 60px 15px 60px; color: white; text-align: center;}
#box3 {height: 400pt; width: 42%; display: block; float: left; background-color: #B6B4CE;
margin: 10px -30px 10px 10px; padding: 10px 60px 10px 60px; color: white; text-align: left; font-size:12pt}
#box4 {height: 400pt; width: 42%; display: block; float: right; background-color: #F3DBCF;
margin: 10px 10px 10px -30px; padding: 10px 60px 10px 60px; color: #707070; text-align: right; font-size:12pt}
#box5 {display: block; float: left; background-color: white; margin: 5px 0px 0px 20px; color:#707070; text-align: left;}
.nanumGothic {font-family: 'Nanum Gothic', sans-serif;}
.shadow {box-shadow: 3px 3px 5px silver;}
</style>
</head>
<body>
<script type="text/javascript">
function music_alert(){
alert('본 페이지에서는 음악이 자동으로 재생됩니다.\n듣고 싶지 않으시다면 시스템 소리를 꺼 주세요.\nChrome 브라우저를 사용하시는 경우 재생되지 않을 수 있습니다.');
}
var ContactAlert = new Object();
ContactAlert.A = '인스타그램';
ContactAlert.B = '이메일';
ContactAlert.C = '전화번호';
ContactAlert.Tell = function(){
alert('비방, 욕설은 삼가주시길 부탁드립니다.\n빠른 연락을 원하시면 ' + ContactAlert.A + ', ' + ContactAlert.B + ', ' + ContactAlert.C +
'를 활용해 주세요.\n감사합니다🥰');
}
</script>
<p class="nanumGothic shadow" id="box1"> <a href="index.html"> page of <strong>seah kim </a></strong></p>
<h5 class="nanumGothic shadow" id="box2">
<a href="who is she.html"; onclick="music_alert();">
1) who is she </a>           
<a href="profile.html"> 2) profile </a>           
<a href="experience.html"> 3) experience </a>           
<a href="contact.html"; onclick="ContactAlert.Tell();"> 4) contact </a>
</h5>
<h3 class="nanumGothic shadow" id="box3"> <br><br><br><br><br><br><br><br><br><br>this is <strong>main page</strong> <br> please click menu category on the upper side to look around :)
<br><br> - <br><br> 이곳은 <strong>메인 페이지</strong>입니다 <br> 살펴보시려면 위쪽의 메뉴 페이지를 클릭해 주세요 :) </h3>
<h3 class="nanumGothic shadow" id="box4"> <br><br><br><br><br><br><br><br><br>this page introduces <strong>seah kim</strong> and her experiences <br> look around freely, and please contact me
<br> through the 4) contact page! <br><br> - <br><br> 이 페이지는 <strong>김세아</strong>에 대해, 그리고 경험한 바에 대해 설명합니다 <br> 자유롭게 둘러보시고 제게 연락하고 싶으시다면 <br> 4번 페이지를 활용해주세요! </h3>
<h3 class="nanumGothic" id="box5"> © Seah Kim 2021 </h3>
</body>
</html>2. who is she.html : 2번 페이지
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Page of Seah Kim : who is she</title>
<!--구글에서 font 가져오기-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<style type="text/css">
p {font-size: 14pt; text-align: center; font-weight: 400; letter-spacing: 6px;}
h5 {font-size: 9pt; text-align: center; font-weight: 400; letter-spacing: 2px;}
h3 {font-size: 8pt; font-weight: 400; letter-spacing: 1px;}
strong {font-weight: 800; font-size: larger;}
a {text-decoration: none; color:white;}
#box1 {display: block; background-color: #AAC9CE; margin: 30px 10px 10px 10px; padding: 15px 100px 15px 100px; color: white; text-align: center;}
#box2 {display: block; background-color: #E5C1CD; margin: 10px 10px 10px 10px; padding: 15px 60px 15px 60px; color: white; text-align: center;}
#box3 {height: 400pt; display: block; background-color: #B6B4CE; margin: 10px 10px 10px 10px; padding: 10px 10px 10px 30px; color: white; font-size:12pt; text-align:center; overflow: scroll;}
#box4 {display: block; background-color: white; margin: 10px 0px 0px 20px; color:#707070; text-align: center;}
.nanumGothic {font-family: 'Nanum Gothic', sans-serif;}
.shadow {box-shadow: 3px 3px 5px silver;}
</style>
</head>
<body>
<script type="text/javascript">
function music_alert(){
alert('본 페이지에서는 음악이 자동으로 재생됩니다.\n듣고 싶지 않으시다면 시스템 소리를 꺼 주세요.\nChrome 브라우저를 사용하시는 경우 재생되지 않을 수 있습니다.');
}
var MemoArr = new Array("[해남 도로]", "[집 앞에서 촬영한 벚꽃]", "[제주 아르떼뮤지엄 미디어아트 전시]", "[부산 바닷가]", "[남산타워]",
"[부산 노을]", "[강릉 바닷가]", "[음악 출처: Unminus]")
var ContactAlert = new Object();
ContactAlert.A = '인스타그램';
ContactAlert.B = '이메일';
ContactAlert.C = '전화번호';
ContactAlert.Tell = function(){
alert('비방, 욕설은 삼가주시길 부탁드립니다.\n빠른 연락을 원하시면 ' + ContactAlert.A + ', ' + ContactAlert.B + ', ' + ContactAlert.C +
'를 활용해 주세요.\n감사합니다🥰');
}
</script>
<p class="nanumGothic shadow" id="box1"> <a href="index.html"> page of <strong>seah kim </strong></a></p>
<h5 class="nanumGothic shadow" id="box2">
<a href="who is she.html"; onclick="music_alert();">
1) who is she </a>           
<a href="profile.html"> 2) profile </a>           
<a href="experience.html"> 3) experience </a>           
<a href="contact.html"; onclick="ContactAlert.Tell();"> 4) contact </a>
</h5>
<h3 class="nanumGothic" id="box3">
<video controls src="videos/video.mp4" width="260mm" height="470mm" autoplay muted loop> 브라우저에서 현재 비디오를 재생할 수 없습니다 :( </video>
<img src="images/img1.JPG" alt="벚꽃 사진" width="250mm" height="470mm">
<img src="images/img4.JPG" alt="토끼 사진" width="250mm" height="470mm">
<img src="images/img5.JPG" alt="부산 바닷가 사진" width="250mm" height="470mm">
<img src="images/img6.JPG" alt="대학교에서 본 남산타워 사진" width="250mm" height="470mm"><br>
<img src="images/img2.JPG" alt="부산 노을 사진" width="460mm" height="240mm">
<img src="images/img3.JPG" alt="강릉 바닷가 사진" width="460mm" height="240mm">
<img src="images/img text.png" alt="좋아하는 것 싫어하는 것, 음악 재생은 아래에서" height="240"><br>
</figure>
<iframe width="450" height="230" src="https://www.youtube.com/embed/4iFP_wd6QU8" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="450" height="230" src="https://www.youtube.com/embed/04tYkKUPPv4" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<audio controls autoplay><source src="musics/They Say.mp3" type="audio/mp3"> 브라우저에서 현재 음악을 재생할 수 없습니다 :( </audio>
</h3>
<h3 class="nanumGothic" id="box4">
<script type = text/javascript>
for(i=0;i<MemoArr.length;i++) document.write(MemoArr[i]);
</script>
<br> © Seah Kim 2021 </h3>
</body>
</html>3. profile.html : 3번 페이지
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Page of Seah Kim : profile</title>
<!--구글에서 font 가져오기-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<style type="text/css">
p {font-size: 14pt; text-align: center; font-weight: 400; letter-spacing: 6px;}
h5 {font-size: 9pt; text-align: center; font-weight: 400; letter-spacing: 2px;}
h3 {font-size: 8pt; font-weight: 400; letter-spacing: 1px;}
strong {font-weight: 800; font-size: larger;}
small {font-size: xx-small;}
a {text-decoration: none; color:white;}
img{float: left; margin: 0px 20px 0px 0px;}
#box1 {display: block; background-color: #AAC9CE; margin: 30px 10px 10px 10px; padding: 15px 100px 15px 100px; color: white; text-align: center;}
#box2 {display: block; background-color: #F3DBCF; margin: 10px 10px 10px 10px; padding: 20px 60px 20px 60px; color: #707070; text-align: center;}
#box3 {display: block; background-color: #E5C1CD; margin: 10px 10px 10px 10px; padding: 15px 60px 15px 60px; color: white; text-align: center;}
#box4 {height: 305pt; display: block; background-color: #F3DBCF; margin: 10px 10px 10px 10px; padding: 30px 10px 30px 30px; color: #707070; font-size: 10pt; text-align: left;}
#box5 {width:"460mm"; height:"240mm"; display: block; background-color: white; border-spacing: 2pt; border-color: gainsboro; margin: 10px 10px 10px -10px; padding: 10px 60px 10px 60px; color: #707070; font-size:12pt}
#box6 {display: block; background-color: white; margin: 10px 0px 0px 20px; color:#707070; text-align: center;}
.right {text-align: right;}
.nanumGothic {font-family: 'Nanum Gothic', sans-serif;}
.shadow {box-shadow: 3px 3px 5px silver;}
</style>
</head>
<body>
<script type="text/javascript">
function music_alert(){
alert('본 페이지에서는 음악이 자동으로 재생됩니다.\n듣고 싶지 않으시다면 시스템 소리를 꺼 주세요.\nChrome 브라우저를 사용하시는 경우 재생되지 않을 수 있습니다.');
}
var ContactAlert = new Object();
ContactAlert.A = '인스타그램';
ContactAlert.B = '이메일';
ContactAlert.C = '전화번호';
ContactAlert.Tell = function(){
alert('비방, 욕설은 삼가주시길 부탁드립니다.\n빠른 연락을 원하시면 ' + ContactAlert.A + ', ' + ContactAlert.B + ', ' + ContactAlert.C +
'를 활용해 주세요.\n감사합니다🥰');
}
function reset_alert(){
alert('초기화 버튼을 눌러 모든 기록을 원래대로 되돌렸습니다.')
}
var likes = ["게임","사진 촬영","여행","음악","영화","독서"];
</script>
<p class="nanumGothic shadow" id="box1"> <a href="index.html"> page of <strong>seah kim </a></strong></p>
<h5 class="nanumGothic shadow" id="box3">
<a href="who is she.html"; onclick="music_alert();">
1) who is she </a>           
<a href="profile.html"><strong><u> 2) profile </u></strong></a>           
<a href="experience.html"> 3) experience </a>           
<a href="contact.html"; onclick="ContactAlert.Tell();"> 4) contact </a>
</h5>
<h3 class="nanumGothic shadow" id="box4">
<img id="selfie1" src="images/self1.jpg" alt="selfie 1" width="240mm" height="400mm">
<br><br><form method="post" action="action1.php" onreset="reset_alert()">
<strong>ID</strong><small> (아이디를 입력하세요)</small> : <input type="text" name ="id"> <br>
<strong>Password</strong><small> (비밀번호를 입력하세요)</small> : <input type="password" name="password">
<br><br><strong>좋아하는 것</strong> <small>(중복 선택 가능)</small> :
<script type="text/javascript">
var count = 0;
while(count < likes.length){
document.write('<input type="checkbox" name="hobby" value="game"/'+ likes[count] +'"> '+ likes[count]);
count += 1
}
</script>
<br><br><strong>직업</strong> <small>(중복 선택 불가능)</small> :
<select name="job" size="1">
<option>학생</option> <option>회사원</option> <option>교사</option>
<option>공무원</option> <option>자영업자</option> <option>기타</option>
</select>
<br><br><strong>현재 상태</strong> <small>(중복 선택 불가능)</small> :
<label for="working">열심히 노력하는 중</label>
<input type="radio" name="status" id="working" value="working" checked>
<label for="resting">쉬는 중</label>
<input type="radio" name="status" id="resting" value="resting">
<br><br><strong>학력</strong> <small>(추가할 내용 작성)</small> :
<br> <small>****초등학교 <br> ****중학교 <br> *****고등학교 <br> ***대학교 </small><br><br>
<textarea name="comments" rows="4" cols="40"/></textarea>
<br><br>
<input type="submit" value="전송하기"/>
<input type="reset" value="초기화"/>
<h3 class="right">취미 : / 직업 : 학생 / 상태 : 열심히 노력하는 중 / 학력: </h3>
</form>
</h3>
<h3 class="nanumGothic" id="box6"> © Seah Kim 2021 <button onclick = "Visibility('selfie1');">hiding😎image</button> </h3>
<script type="text/javascript">
function Visibility(id) {
var dom = document.getElementById(id);
if (dom.style.visibility == "hidden")
dom.style.visibility = "visible";
else
dom.style.visibility = "hidden";
}
</script>
</body>
</html>4. experience.html : 4번 페이지
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Page of Seah Kim : experience</title>
<!--구글에서 font 가져오기-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<style type="text/css">
p {font-size: 14pt; text-align: center; font-weight: 400; letter-spacing: 6px;}
h5 {font-size: 9pt; text-align: center; font-weight: 400; letter-spacing: 2px;}
h3 {font-size: 8pt; font-weight: 400; letter-spacing: 1px;}
strong {font-weight: 800; font-size: larger;}
small {font-size: smaller;}
a {text-decoration: none; color:white;}
img {float: right; margin: 0pt 20pt 0pt 0pt;}
table {width:fit-content; margin: auto; border: 1px solid white; border-collapse: collapse;}
th {border: 1px solid white; padding: 10px 30px 10px 30px; text-align: center; font-weight: 800; font-size: larger;}
td {border: 1px solid white; padding: 10px 100px 10px 100px; text-align: center; font-size: 10pt;}
#box1 {display: block; background-color: #AAC9CE; margin: 30px 10px 10px 10px; padding: 15px 100px 15px 100px; color: white; text-align: center;}
#box2 {display: block; background-color: #E5C1CD; margin: 10px 10px 10px 10px; padding: 15px 60px 15px 60px; color: white; text-align: center;}
#box3 {height: 305pt; display: block; background-color: #B6B4CE; margin: 10px 10px 10px 10px; padding: 30px 10px 30px 40px; color: white; font-size: 13pt; text-align: center;}
#box4 {display: block; background-color: white; margin: 10px 0px 0px 20px; color:#707070; text-align: center;}
.nanumGothic {font-family: 'Nanum Gothic', sans-serif;}
.shadow {box-shadow: 3px 3px 5px silver;}
</style>
</head>
<body>
<script type="text/javascript">
function music_alert(){
alert('본 페이지에서는 음악이 자동으로 재생됩니다.\n듣고 싶지 않으시다면 시스템 소리를 꺼 주세요.\nChrome 브라우저를 사용하시는 경우 재생되지 않을 수 있습니다.');
}
var ContactAlert = new Object();
ContactAlert.A = '인스타그램';
ContactAlert.B = '이메일';
ContactAlert.C = '전화번호';
ContactAlert.Tell = function(){
alert('비방, 욕설은 삼가주시길 부탁드립니다.\n빠른 연락을 원하시면 ' + ContactAlert.A + ', ' + ContactAlert.B + ', ' + ContactAlert.C +
'를 활용해 주세요.\n감사합니다🥰');
}
</script>
<p class="nanumGothic shadow" id="box1"> <a href="index.html"> page of <strong>seah kim </a></strong></p>
<h5 class="nanumGothic shadow" id="box2">
<a href="who is she.html"; onclick="music_alert();">
1) who is she </a>           
<a href="profile.html"> 2) profile </a>           
<a href="experience.html"><strong><u> 3) experience </u></strong></a>           
<a href="contact.html"; onclick="ContactAlert.Tell();"> 4) contact </a>
</h5>
<h3 class="nanumGothic shadow" id="box3">
<img id="selfie2" src="images/self2.JPG" alt="selfie 2" width="400mm" height="400mm">
<br>(!) 목표하고 있는 자격증, 프로젝트, 경험에 대해 작성하였습니다. <br><small>(!) I wrote about my goals to achieve.</small>
<br><br><br><table>
<table border="1">
<tr>
<th>자격증<br><small>Qualification</small></th>
<td><br> JLPT N1 <br>TOEIC 900 <br>정보처리기사<br><br></td>
<tr>
<th>프로젝트<br><small>Project</small></th>
<td><br>IOS application 개발<br>해외 물품 직수입 관련 서비스 개발<br><br></td>
</tr>
<tr>
<th>경험<br><small>Career</small></th>
<td><br>영어권 기업 인턴<br>해커톤<br><br></td>
</tr>
</table>
</table>
</h3>
<h3 class="nanumGothic" id="box4"> © Seah Kim 2021 <button onclick = "Visibility('selfie2');">hiding😎image</button> </h3>
<script type="text/javascript">
function Visibility(id) {
var dom = document.getElementById(id);
if (dom.style.visibility == "hidden")
dom.style.visibility = "visible";
else
dom.style.visibility = "hidden";
}
</script>
</body>
</html>5. contact.html : 5번 페이지
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Page of Seah Kim : contact</title>
<!--구글에서 font 가져오기-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<style type="text/css">
p {font-size: 14pt; text-align: center; font-weight: 400; letter-spacing: 6px;}
h5 {font-size: 9pt; text-align: center; font-weight: 400; letter-spacing: 2px;}
h3 {font-size: 8pt; font-weight: 400; letter-spacing: 1px;}
strong {font-weight: 800; font-size: larger;}
a {text-decoration: none; color:white;}
#box1 {display: block; background-color: #AAC9CE; margin: 30px 10px 10px 10px; padding: 15px 100px 15px 100px; color: white; text-align: center;}
#box2 {display: block; background-color: #E5C1CD; margin: 10px 10px 10px 10px; padding: 15px 60px 15px 60px; color: white; text-align: center;}
#box3 {height: 400pt; width: 55%; display: block; float: right; background-color: #F3DBCF;
margin: 10px 10px 10px -30px; padding: 10px 60px 10px 60px; color: #707070; font-size: 10pt; text-align: left;}
#box4 {display: block; float: right; background-color: white; margin: 10px 0px 0px 20px; color:#707070; text-align: right;}
#box5 {height: 400pt; width: 30%; display: block; float: left; background-color: #B6B4CE;
margin: 10px -30px 10px 10px; padding: 10px 60px 10px 60px; color: white; text-align: center; font-size:12pt}
.nanumGothic {font-family: 'Nanum Gothic', sans-serif;}
.shadow {box-shadow: 3px 3px 5px silver;}
</style>
</head>
<body>
<script type="text/javascript">
function music_alert(){
alert('본 페이지에서는 음악이 자동으로 재생됩니다.\n듣고 싶지 않으시다면 시스템 소리를 꺼 주세요.\nChrome 브라우저를 사용하시는 경우 재생되지 않을 수 있습니다.');
}
var ContactAlert = new Object();
ContactAlert.A = '인스타그램';
ContactAlert.B = '이메일';
ContactAlert.C = '전화번호';
ContactAlert.Tell = function(){
alert('비방, 욕설은 삼가주시길 부탁드립니다.\n빠른 연락을 원하시면 ' + ContactAlert.A + ', ' + ContactAlert.B + ', ' + ContactAlert.C +
'를 활용해 주세요.\n감사합니다🥰');
}
function write_alert(){
alert('원래 있던 내용은 지우고 작성해 주세요!');
}
function change_box_color(id, color1, color2){
document.getElementById(id).style.backgroundColor = color1;
document.getElementById(id).style.color = color2;
}
</script>
<p class="nanumGothic shadow" id="box1"> <a href="index.html"> page of <strong>seah kim </a></strong></p>
<h5 class="nanumGothic shadow" id="box2">
<a href="who is she.html"; onclick="music_alert();">
1) who is she </a>           
<a href="profile.html"> 2) profile </a>           
<a href="experience.html"> 3) experience </a>           
<a href="contact.html"; onclick="ContactAlert.Tell();"><strong><u> 4) contact </u></strong></a>
</h5>
<h3 class="shadow" id="box5"><br><br><br><br><canvas id="myCanvas" width="400" height="400" style="color: white;"></canvas></h3>
<h3 class="nanumGothic shadow" id="box3">
<br><br><br><strong>my info</strong> <br> instagram : @****** <br> email : ******@naver.com <br> tel : 010-****-****
<br><br>만약 이 페이지에서 작성하고 싶으신 말씀이 있으시다면 아래 툴을 활용해 주세요. <br>
If you want to say something to me in this page, please use tool at the bottom. <br><br><br>
성명 : <input type="text" name="name" placeholder="please write your name"><br><br>
Tel : <input type="tel" placeholder="010-1234-5678" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"/><br><br>
Email : <input type="email" placeholder="-----@naver.com"/><br><br>
작성일 : <input type="date" name="writing_date" min=""><br><br>
요청사항: <br><br><textarea name="comment" cols="50" rows="5" onclick="write_alert();"> 전하고 싶은 말이 있다면 여기에 작성해 주세요 </textarea><br><br>
<input type="file" name="myfile"/> <input type="submit" value="전송"/> <input type="reset" value="취소"/>
</h3>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var myContext = canvas.getContext("2d");
var myImg = new Image();
myImg.src = "images/img7.jpeg";
myImg.onload = function() {
myContext.drawImage(myImg, 120, 50);
myContext.drawImage(myImg, 10, 10, 80, 180, 20, 20, 80, 180);
myContext.drawImage(myImg, 100, 200, 80, 120, 320, 250, 80, 120)
}
</script>
<h3 class="nanumGothic" id="box4"> © Seah Kim 2021
<button onclick = "change_box_color('box3', '#C6DECE', 'black');"
onclick = "change_box_color2('box5', '#CAEFCE', 'black');">ForGoodEye👀</button></h3>
</body>
</html>
'study' 카테고리의 다른 글
| [학습정리] 컴퓨터와 IT기술의 이해 2 (0) | 2022.06.27 |
|---|---|
| [학습정리] 컴퓨터와 IT기술의 이해 1 (0) | 2022.06.26 |
| MySQL 웹 및 Python에서 사용하기(ESQL) 3 : Php (0) | 2022.06.22 |
| MySQL 웹 및 Python에서 사용하기(ESQL) 2 : Python (0) | 2022.06.21 |
| MySQL 웹 및 Python에서 사용하기(ESQL) 1 : 기획 (0) | 2022.06.20 |