[HTML] 웹과인터넷활용 및 실습 과제 2차.
2021년도 2학기 교양수업 웹과인터넷활용 및 실습 기말과제입니다.
코드
<!DOCTYPE html>
<!--
파일이름: 웹문서과제 목요일반 김영진
작성일: 2021-10-27
-->
<html>
<head>
<title> 웹문서 기말과제 목요일반 김영진 </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<style type="text/css">
a:link{color:white; text-decoration:none;}
a:visited{color:white; text-decoration:none;}
a:hover{color:blue;text-decoration:underline;}
div {
border-style:solid;
border-color:teal;
border-width:1px;
}
ul{
width: 500px;
margin-left:auto;
margin-right:auto;
}
header {
height: 15%;
padding: 1rem;
color:white;
background:teal;
font-weight:bold;
display:flex;
justify-content:space-between;
align-items:center;
position:sticky;
top:0px;
z-index:1;
}
span{
font-style:italic;
transition:font-size 1s;
}
span:hover{
font-size:150%;
}
</style>
</head>
<body style="text-align:center; background-color:aliceblue;">
<header>
<h1 style="font-style:italic">blog</h1>
<nav>
<span><a href="#SNS"> SNS </a></span>
<span><a href="#image"> image </a></span>
<span><a href="#활동"> 활동 </a></span>
<span><a href="#수상내역"> 수상내역 </a></span>
<span><a href="#동영상"> 동영상 </a></span>
</nav>
</header>
<span style="font-size:6em; color:teal;
text-shadow:2px 2px 2px white, 0 0 25px cyan, 0 0 5px green;">
<a onClick="window.location.reload()" style="cursor: pointer;">
신용재 <br>
</a>
</span>
<p style="color:teal">
안녕하세요. 미디어전공학과 4학년 201622821 김영진입니다. <br>
기말 과제를 수행하며 벌써 한 학기가 저물어감을 느끼네요. <br>
시간이 흘러가는 속도는 가속력을 받는건지 점점 더 빨라지는 것 같습니다. <br>
지구의 중력이 계속 커지는 걸까요? 네 헛소리였습니다. <br>
기말과제로 제가 선정한 주제는 가수 '신용재'씨 입니다. <br>
요즘 가장 즐겨듣는 노래의 주인공입니다. <br>
중간 과제로는 <a href="웹문서과제 목요일반 김영진.html"><span style="color:red;">'블랙핑크'</span></a>를 주제로 선정하였는데 <br>
이번엔 감성 발라더 '신용재'씨에 대해 살펴보겠습니다. <br>
그럼 시작하겠습니다!!! <br><br>
</p>
<p style="font-size:2em"><span style="color:teal; font-weight:bold;" id="SNS"> SNS </span></p>
<div class="container" style="text-align:center; z-index:1;">
<div class="row">
<div class="col-12 col-sm-6 col-md-3 col-lg-3">
<a href="https://www.youtube.com/c/%EC%8B%A0%EC%9A%A9%EC%9E%ACShinYongJae">
<img src="https://yt3.ggpht.com/584JjRp5QMuKbyduM_2k5RlXFqHJtQ0qLIPZpwbUjMJmgzZngHcam5JMuZQxyzGMV5ljwJRl0Q=s900-c-k-c0x00ffffff-no-rj"
width="124" height="124">
<span style="color:red;"> Youtube </span>
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 col-lg-3 ">
<a href="javascript:alert('준비중입니다.');" onfocus="this.blur()">
<img src="https://www.facebook.com/images/fb_icon_325x325.png"
width="124" height="124">
<span style="color:blue;"> Facebook </span>
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 col-lg-3 ">
<a href="https://www.instagram.com/asddddw/">
<img src="https://mblogthumb-phinf.pstatic.net/MjAxOTAxMDlfNTMg/MDAxNTQ3MDE4MzI4NDIy.O4sP_QpdWO9GiVpfkp92MLvnMGBRzm82q3VhEfz8GMQg.kTDiopuqqvHXHZJ784QiGWX-DwGaEj3mvQ04aCqPC0Qg.PNG.designpress2016/Instagram_logo_2016.png?type=w800"
width="124" height="124">
<span style="color:purple;"> Instagram </span>
</a>
</div>
<div class="col-12 col-sm-6 col-md-3 col-lg-3 ">
<a href="javascript:alert('준비중입니다.');" onfocus="this.blur()">
<img src="data:image/png;base64,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"
width="124" height="124">
<span style="color:skyblue;"> Twitter </span>
</a>
</div>
</div>
</div>
<br>
<p style="font-size:2em"><span style="color:teal; font-weight:bold;" id="image">image </span></p>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<img src="https://yt3.ggpht.com/ytc/AKedOLRmyvQhNzKO5ZgkgJ_YB2mRpXGY0IB2US0nUTTD=s900-c-k-c0x00ffffff-no-rj"
width="300px" height="300px">
</div>
<div class="col-12 col-md-6 col-lg-4">
<img src="https://ww.namu.la/s/d147358138cddead399e68c27b716014138ad20c3d2a7cd705515499c2df18173586ec03e051be931a963be268a2249ae682ee124409cb98806be6404a85c7501b7047d30675f9303638e65c283870ee"
width="300px" height="300px">
</div>
<div class="col-12 col-md-6 col-lg-4">
<img src="https://newsimg.sedaily.com/2020/07/01/1Z54UVURCC_1.jpg"
width="300px" height="300px">
</div>
<div class="col-12 col-md-6 col-lg-4">
<img src="https://img.hankyung.com/photo/202007/385e5d2acf826069b885cc6bf81d7ee4.jpg"
width="300px" height="300px">
</div>
<div class="col-12 col-md-6 col-lg-4">
<img src="https://i.ytimg.com/vi/XN8Gvo7P1OY/maxresdefault.jpg"
width="300px" height="300px">
</div>
<div class="col-12 col-md-6 col-lg-4">
<img src="https://blog.kakaocdn.net/dn/YZMxa/btqFkUfqHjK/Xb4wHrA7AJOezb1xsQWfy0/img.png"
width="300px" height="300px">
</div>
<div class="col-12 col-md-6 col-lg-4">
<img src="https://t1.daumcdn.net/cfile/tistory/99570D4D5F87C67425"
width="300px" height="300px">
</div>
<div class="col-12 col-md-6 col-lg-4">
<img src="https://file.mk.co.kr/meet/neds/2020/07/image_readtop_2020_674736_15935899444263295.png"
width="300px" height="300px">
</div>
<div class="col-12 col-md-6 col-lg-4">
<img src="https://cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/KJQAYOA466EBFF2K4YR6UYWBTA.jpg"
width="300px" height="300px">
</div>
</div>
</div>
<p style="font-size:2em"><span style="color:teal; font-weight:bold;" id="활동"> <br> 활동 내역 </span></p>
<table style="margin-left:auto; margin-right:auto; background-color:teal; color:white;">
<caption> ※현재 신용재씨는 그룹 '포맨'에서 나와 솔로로 활동 중입니다!! </caption>
<thead>
<tr>
<th scope="col">구분</th>
<th scope="col">앨범명</th>
<th scope="col">출시일</th>
<th scope="col">대표곡</th>
</tr>
</thead>
<tbody>
<tr>
<td>포맨</td>
<td>First Kiss</td>
<td>2008.10.07</td>
<td>First Kiss</td>
</tr>
<tr>
<td>-</td>
<td>Voice Of Autumn</td>
<td>2009.11.03</td>
<td>똑똑똑</td>
</tr>
<tr>
<td>-</td>
<td>The 3rd Generation</td>
<td>2010.01.18</td>
<td>못해</td>
</tr>
<tr>
<td>-</td>
<td>Baby Baby+4MEN</td>
<td>2010.03.04</td>
<td>Baby Baby</td>
</tr>
<tr>
<td>-</td>
<td>YOU</td>
<td>2010.08.26</td>
<td>U</td>
</tr>
<tr>
<td>-</td>
<td>울고, 불고</td>
<td>2010.10.19</td>
<td>울고, 불고</td>
</tr>
<tr>
<td>-</td>
<td>Sorry</td>
<td>2010.10.28</td>
<td>미안해</td>
</tr>
<tr>
<td>-</td>
<td>The Artist</td>
<td>2011.06.07</td>
<td>살다가 한번쯤</td>
</tr>
<tr>
<td>-</td>
<td>너의 웃음 고마워</td>
<td>2011.08.02</td>
<td>너의 웃음 고마워</td>
</tr>
<tr>
<td>-</td>
<td>그 남자 그 여자</td>
<td>2011.11.01</td>
<td>그 남자 그 여자</td>
</tr>
<tr style="background:aliceblue; color:teal;">
<td>솔로</td>
<td>24</td>
<td>2012.07.27</td>
<td>가수가 된 이유</td>
</tr>
<tr>
<td>-</td>
<td>The 5th Album Vol.1</td>
<td>2013.01.28</td>
<td>안녕 나야</td>
</tr>
<tr>
<td>-</td>
<td>Thank you</td>
<td>2013.04.17</td>
<td>Thank You</td>
</tr>
<tr>
<td>-</td>
<td>The 5th Album Vol.2 'thank you'</td>
<td>2013.05.08</td>
<td>청혼하는 거예요</td>
</tr>
<tr>
<td>-</td>
<td>1998</td>
<td>2014.05.13</td>
<td>지우고 싶다</td>
</tr>
<tr style="background:aliceblue; color:teal;">
<td>솔로</td>
<td>Light</td>
<td>2014.12.18</td>
<td>너일까</td>
</tr>
<tr style="background:aliceblue; color:teal;">
<td>-</td>
<td>EMPATHY</td>
<td>2016.10.13</td>
<td>빌려줄게</td>
</tr>
<tr>
<td>포맨</td>
<td>The 6th Album [Remember me]</td>
<td>2017.10.24</td>
<td>눈 떠보니 이별이더라</td>
</tr>
<tr style="background:aliceblue; color:teal;">
<td>솔로</td>
<td>PRESENT</td>
<td>2018.04.13</td>
<td>오늘</td>
</tr>
<tr style="background:aliceblue; color:teal;">
<td>-</td>
<td>Dear</td>
<td>2020.07.01</td>
<td>첫 줄</td>
</tr>
</tbody>
</table>
<div class="container"
style="background-image:url(https://i.pinimg.com/736x/44/98/00/449800c440f33764d3e3f4aa5f2f7017.jpg);
background-size:50px 50px; border-style:dotted; border-color:teal;">
<br>
<ul style="text-align:left; color:teal;">
<p style="font-size:2em"><span id="수상내역"> 수상내역 </span></p>
<li><h3>2010</h3>
<ul>
<li style="font-weight:bold">제2회 멜론 뮤직 어워드 TOP 10
</ul>
<li><h3>2011</h3>
<ul>
<li style="font-weight:bold">제19회 대한민국문화연예대상 아이돌뮤직 최우수상
</ul>
<li><h3>2012</h3>
<ul>
<li style="font-weight:bold">제21회 하이원 서울가요대상 R&B발라드상
</ul>
<li><h3>2013</h3>
<ul>
<li style="font-weight:bold">제6회 코리아 드라마 어워즈 드라마 OST상
</ul>
</ul>
</div>
<br>
<br>
<p style="font-size:2em"><span style="color:teal; font-weight:bold;" id="동영상"> 동영상 </span></p>
<div class="container" style="border-width:0px;">
<div class="row" style="border-width:0px;">
<div class="col-12 col-lg-6" style="border-width:0px;">
<iframe width="530" height="315" src="https://www.youtube.com/embed/d61nJPn-OBc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<div style="border-width:0px;">
<p style="color:teal">제가 가장 좋아하는 노래는 '오늘'이라는 곡 입니다. 귀지까지 녹여버릴 듯한 목소리와 훅치고 들어오는 바이브레이션이 명품입니다.</p>
</div>
</div>
<div class="col-12 col-lg-6" style="border-width:0px;">
<iframe width="530" height="315" src="https://www.youtube.com/embed/LwH982yw5d4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<div style="border-width:0px;">
<p style="color:teal">그리고 가수 '하은'씨의 노래 '신용재'라는 곡도 있는데요. 하은씨의 목소리와 신용재씨의 목소리가 유사한 점을 활용한 재치있는 곡입니다.</p>
<p style="color:teal">이 곡도 상당히 좋습니다.</p>
</div>
</div>
</div>
</div>
<br>
<br>
<form name="fo" method="get" style="color:teal;">
웹페이지 열람 후기를 알려주세요!<br><input type="text" size="50" value=""
</form>
<input type="submit" onclick="alert('감사합니다! 좋은하루 되세요!')" value="전송">
<br>
<br>
<br>
<br>
</body>
</html>
실행화면
.png)
.png)
.png)
댓글남기기