[HTML] 웹과인터넷활용 및 실습 과제 1차.
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:pink; text-decoration:none;}
a:visited{color:pink; text-decoration:none;}
a:hover{color:blue;text-decoration:underline;}
div{
border-style:solid;
border-color:pink;
border-width:1px;
}
ul{
width: 500px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body style="text-align:center; background-color:#000000;">
<span style="color:pink; font-size:6em;">
<a onClick="window.location.reload()" style="cursor: pointer;">
BLACK PINK <br>
</a>
</span>
<span style="color:pink">
안녕하세요. 미디어전공학과 4학년 201622821 김영진입니다. <br>
저는 본래 16년도 도계캠퍼스에 입학하였으나 학과통폐합을 거쳐 현재는 삼척캠퍼스에 재학중입니다. <br>
대학생활의 마지막 학기를 비대면으로 수강하게 되어 다소 아쉽지만 <br>
그래도 이렇게 html을 활용한 재밌는 수업을 들을 수 있어 기쁩니다. <br>
웹문서과제로 제가 선정한 주제는 걸그룹 블랙핑크입니다. <br>
선정하게 된 이유는 외모와 실력을 모두 갖춘 완벽한 연예인이라 제가 좋아하기 때문입니다. <br>
그럼 계속 살펴보겠습니다. <br><br>
</span>
<span style="color:pink; font-size:2em;"> SNS </span>
<div class="container" style="text-align:center">
<div class="row">
<div class="col-12 col-sm-6 col-md-3 col-lg-3 border">
<a href="https://www.youtube.com/c/BLACKPINKOFFICIAL">
<img src="https://yt3.ggpht.com/584JjRp5QMuKbyduM_2k5RlXFqHJtQ0qLIPZpwbUjMJmgzZngHcam5JMuZQxyzGMV5ljwJRl0Q=s900-c-k-c0x00ffffff-no-rj"
border="0" 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 border">
<a href="https://www.facebook.com/BLACKPINKOFFICIAL">
<img src="https://www.facebook.com/images/fb_icon_325x325.png"
border="0" 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 border">
<a href="https://www.instagram.com/blackpinkofficial/">
<img src="https://mblogthumb-phinf.pstatic.net/MjAxOTAxMDlfNTMg/MDAxNTQ3MDE4MzI4NDIy.O4sP_QpdWO9GiVpfkp92MLvnMGBRzm82q3VhEfz8GMQg.kTDiopuqqvHXHZJ784QiGWX-DwGaEj3mvQ04aCqPC0Qg.PNG.designpress2016/Instagram_logo_2016.png?type=w800"
border="0" 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 border">
<a href="https://twitter.com/ygofficialblink?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">
<img src="data:image/png;base64,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"
border="0" width="124" height="124">
<span style="color:skyblue;"> Twitter </span>
</a>
</div>
</div>
</div>
<span style="color:pink; font-size:2em;"> <br>image </span>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 border">
<img src="https://blog.trazy.com/wp-content/uploads/2020/08/becoming-blackpink-featured-scaled-1200x720.jpg"
width="100%" height="100%">
</div>
<div class="col-12 col-md-6 col-lg-4 border">
<img src="https://images.chosun.com/resizer/TRylAoJ09lTz-DxqRkoC7Q5cmqA=/616x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/IGUWJMF4RVAVNB4JXPDZLJME6Q.jpg"
width="100%" height="100%">
</div>
<div class="col-12 col-md-6 col-lg-4 border">
<img src="https://img2.sbs.co.kr/img/sbs_cms/WE/2020/07/09/WE64849959_ori.jpg"
width="100%" height="100%">
</div>
<div class="col-12 col-md-6 col-lg-4 border">
<img src="https://image.newsis.com/2021/04/13/NISI20210413_0000725383_web.jpg?rnd=20210413090833"
width="100%" height="100%">
</div>
<div class="col-12 col-md-6 col-lg-4 border">
<img src="https://file.mk.co.kr/meet/neds/2020/05/image_readtop_2020_504377_15897604624203338.jpg"
width="100%" height="100%">
</div>
<div class="col-12 col-md-6 col-lg-4 border">
<img src="https://photo.jtbc.joins.com/news/jam_photo/202107/05/0695916b-6cc0-43ba-9216-abd867a905a1.jpg"
width="100%" height="100%">
</div>
<div class="col-12 col-md-6 col-lg-4 border">
<img src="https://image.ajunews.com/content/image/2021/04/19/20210419140850925475.jpg"
width="100%" height="100%">
</div>
<div class="col-12 col-md-6 col-lg-4 border">
<img src="https://image.imnews.imbc.com/news/2020/culture/article/__icsFiles/afieldfile/2020/10/02/jin201002-06.jpg"
width="100%" height="100%">
</div>
<div class="col-12 col-md-6 col-lg-4 border">
<img src="https://www.breaknews.com/imgdata/breaknews_com/201811/2018111340556991.jpg"
width="100%" height="100%">
</div>
</div>
</div>
<span style="color:pink; font-size:2em;"> <br> 활동내역 </span>
<table style="margin-left:auto; margin-right:auto; background-color:black; color:pink;">
<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>SQUARE ONE</td>
<td>2016.08.08</td>
<td>휘파람</td>
</tr>
<tr>
<td>-</td><td>-</td><td>-</td>
<td>붐바야</td>
</tr>
<tr>
<td>싱글</td>
<td>SQUARE TWO</td>
<td>2016.11.01</td>
<td>불장난</td>
</tr>
<tr>
<td>-</td><td>-</td><td>-</td>
<td> STAY </td>
</tr>
<tr>
<td>싱글</td>
<td>마지막처럼</td>
<td>2017.06.22</td>
<td>마지막처럼</td>
</tr>
<tr>
<td>EP</td>
<td>SQUARE UP</td>
<td>2018.06.15</td>
<td>뚜두뚜두</td>
</tr>
<tr>
<td>-</td><td>-</td><td>-</td>
<td> Forever Young </td>
</tr>
<tr>
<td>싱글(제니)</td>
<td>SOLO</td>
<td>2018.11.12</td>
<td>SOLO</td>
</tr>
<tr>
<td>EP</td>
<td>KILL THIS LOVE</td>
<td>2019.04.05</td>
<td>Kill This Love</td>
</tr>
<tr>
<td>-</td><td>-</td><td>-</td>
<td> Don't Know What To Do </td>
</tr>
<tr>
<td>싱글</td>
<td>How You Like That</td>
<td>2020.06.26</td>
<td>How You Like That</td>
</tr>
<tr>
<td>싱글</td>
<td>Ice Cream</td>
<td>2020.08.28</td>
<td>Ice Cream</td>
</tr>
<tr>
<td>정규</td>
<td>THE ALBUM</td>
<td>2020.10.02</td>
<td>Lovesick Girls</td>
</tr>
<tr>
<td>-</td><td>-</td><td>-</td>
<td> Bet You Wanna </td>
</tr>
<tr>
<td>-</td><td>-</td><td>-</td>
<td> You Never Know </td>
</tr>
<tr>
<td>싱글(로제)</td>
<td>R</td>
<td>2021.03.12</td>
<td>On The Ground</td>
</tr>
<tr>
<td>-</td><td>-</td><td>-</td>
<td> Gone </td>
</tr>
</tbody>
</table>
<div class="container">
<br>
<ul style="text-align:left; color:pink;">
<span style="font-size:2em"> 수상내역 </span>
<li><h3>2016</h3>
<ul>
<li>제 1회 아시아 아티스트 어워드 신인상
<li>제 8회 멜론 뮤직 어워드 신인상
<li>제 18회 엠넷 아시안 뮤직 어워드 베스트 뮤직비디오상
<li>제 18회 엠넷 아시안 뮤직 어워드 베스트 오브 넥스트상
</ul>
<li><h3>2017</h3>
<ul>
<li>네이버 V 라이브 GLOBAL V LIVE TOP 10 - GLOBAL ROOKIE TOP 5
<li>제31회 골든디스크 디지털음원부문 신인상
<li>제26회 하이원 서울가요대상 신인상
<li>제6회 가온차트 뮤직 어워즈 올해의 신인상
<li>제6회 가온차트 뮤직 어워즈 올해의 가수상 음원부문 8월
<li>제6회 가온차트 뮤직 어워즈 올해의 가수상 음원부문 11월
<li>부산원아시아페스티벌 스타일 아이콘상
</ul>
<li><h3>2018</h3>
<ul>
<li>네이버 V 라이브 GLOBAL V LIVE TOP 10 - GLOBAL ARTIST TOP 10
<li>제32회 골든디스크 음원 본상
<li>제27회 하이원 서울가요대상 디지털음원부문 본상
<li>제7회 가온차트 뮤직 어워즈 올해의 월드루키상
<li>제10회 멜론 뮤직 어워드 Top10
<li>제10회 멜론 뮤직 어워드 뮤직스타일상 댄스女부문
<li>제20회 엠넷 아시안 뮤직 어워드 월드 와이드 팬스 초이스 Top10
</ul>
<li><h3>2019</h3>
<ul>
<li>제33회 골든디스크 코스모폴리탄 아티스트상
<li>제33회 골든디스크 디지털음원부문 본상
<li>제8회 가온차트 뮤직 어워즈 올해의 가수상 6월
<li>제21회 엠넷 아시안 뮤직 어워드 월드와이드 팬 초이스
</ul>
<li><h3>2020</h3>
<ul>
<li>제12회 멜론 뮤직 어워드 Top10
<li>제12회 멜론 뮤직 어워드 댄스 여자 부문 수상
<li>제22회 엠넷 아시안 뮤직 어워드 월드 와이드 팬 초이스 Top10
<li>제22회 엠넷 아시안 뮤직 어워드 베스트 댄스 퍼포먼스 여자 그룹
<li>제22회 엠넷 아시안 뮤직 어워드 여자 그룹상
<li>제22회 엠넷 아시안 뮤직 어워드 10대 대중문화 인물 부문
</ul>
<li><h3>2021</h3>
<ul>
<li>제35회 골든디스크 디지털음원부문 본상
<li>제35회 골든디스크 음반부문 본상
<li>제10회 가온차트 뮤직 어워즈 디지털음원부문 올해의 가수상 6월
<li>제10회 가온차트 뮤직 어워즈 디지털음원부문 올해의 가수상 10월
<li>제10회 가온차트 뮤직 어워즈 올해의 소셜 핫스타상
<li>제7회 아시아태평양 스타 어워즈 아이돌챔프 인기상
</ul>
</ul>
</div>
<br>
<form name="fo" method="get" style="color:pink;">
웹페이지 열람 후기를 알려주세요!<br><input type="text" size="50" value=""
</form>
<input type="submit" onclick="alert('감사합니다! 좋은하루 되세요!')" value="전송">
<br>
<br>
<div class="container" style="border=0">
<div class="row">
<div class="col-12 col-lg-6">
<iframe src="https://www.yna.co.kr/view/AKR20211026075800005?input=1195m" width="100%" height="100%">
</iframe>
</div>
<div class="col-12 col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gttF72etBGI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
</div>
<span>
마지막 인라인프레임을 작업하는데.. blackpink와 관련된 웹사이트 링크를 첨부하면 페이지를 불러올 수 없다고 오류가 나네요.. 아쉬운대로 뉴스기사와 귀여운 동물 동영상이라도 첨부했습니다. 감사합니다!
</span>
</div>
</body>
</html>
실행화면
.png)
.png)
.png)
댓글남기기