Add: help - shortcut icon creation

resources/file/chocomae.url

@@ -0,0 +1,10 @@
+[{000214A0-0000-0000-C000-000000000046}]
+Prop3=19,2
+[InternetShortcut]
+IDList=
+URL=http://www.chocomae.com/login/마에스트로
+HotKey=0
+[InternetShortcut.A]
+URL=http://www.chocomae.com/login/마에스트로
+[InternetShortcut.W]
+URL=http://www.chocomae.com/login/+ucjF0MKk0ri4XA-

src/web/popup/maestro_shortcut_icon.html

@@ -18,24 +18,27 @@ $(document).ready(function() {
 
 <div class="modal-body">
 
-	<h5 class="card-title">바로가기 주소</h5>
+	<div class="card">
-	<table class="table table-sm table-borderless">
+		<h5 class="card-header bg-dark text-white">바로 가기 주소</h5>
-		<tbody>
+		<div class="card-body">
-			<tr>
+			<table class="table table-sm table-borderless">
-				<td scope="row">학생 로그인 화면</td>
+				<tbody>
-				<td>http://www.chocomae.com/<span class="text-danger">login</span>/<span class="shortcut_icon_maestro_id"></span></td>
+					<tr>
-			</tr>
+						<td scope="row">학생 로그인 화면</td>
-			<tr>
+						<td>http://www.chocomae.com/<span class="text-danger">login</span>/<span class="shortcut_icon_maestro_id"></span></td>
-				<td scope="row">타이머 로그인 화면</td>
+					</tr>
-				<td>http://www.chocomae.com/<span class="text-primary">timer</span>/<span class="shortcut_icon_maestro_id"></span></td>
+					<tr>
-			</tr>
+						<td scope="row">타이머 로그인 화면</td>
-		</tbody>
+						<td>http://www.chocomae.com/<span class="text-primary">timer</span>/<span class="shortcut_icon_maestro_id"></span></td>
-	</table>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+	<br/>
 
 	<div class="card">
-		<div class="card-header bg-success text-white">
+		<h5 class="card-header bg-success text-white">직접 만들기 (권장)</h5>
-			직접 만들기 (권장 방법)
-		</div>
 		<div class="card-body">
 			<h5 class="card-title">바탕화면에 아이콘 생성</h5>
 			<p class="card-text">
@@ -45,6 +48,10 @@ $(document).ready(function() {
 						<ul>
 							<li>팝업창에서 [새로 만들기(W)] > [바로 가기(S)] 클릭</li>
 						</ul>
+						​<picture>
+							<source srcset="./../../../resources/image/help/make_shortcut_file.png" type="image/svg+xml">
+							<img src="./../../../resources/image/help/make_shortcut_file.png" class="img-fluid img-thumbnail" alt="새로 만들기">
+						</picture>
 					</li>
 					<br/>
 					<li>
@@ -65,9 +72,41 @@ $(document).ready(function() {
 	<br/>
 
 	<div class="card">
-		<div class="card-header bg-danger text-white">
+		<h5 class="card-header bg-info text-white">바로 가기 파일 다운받고 수정하기</h5>
-			브라우저에서 드래그해서 만들기 (권장하지 않음)
+		<div class="card-body">
+			<h5 class="card-title">바로 가기 파일 다운받기</h5>
+			<p class="card-text">
+				<ul>
+					<li>아래의 바로 가기 파일 다운로드 받기</li>
+				</ul>
+				<a href="./../../../resources/file/chocomae.url" download>
+					<img src="./../../../resources/image/icon/icon_chocomae.png" class="rounded mx-auto d-block" alt="바로 가기 아이콘 파일">
+					<div class="text-center">초코마에 바로 가기 아이콘 다운로드</div>
+				</a>
+			</p>
+			<br/>
+
+			<h5 class="card-title">내용 수정하기</h5>
+			<p class="card-text">
+				<ul>
+					<li>바로 가기 파일을 마우스 오른쪽 버튼 클릭</li>
+					<li>팝업창에서 [속성(R)] 클릭</li>
+					<li>
+						[웹 문서] 탭에서 "URL(U)"에 수정할 주소 입력
+						​<picture>
+							<source srcset="./../../../resources/image/help/shortcut_icon_url.png" type="image/svg+xml">
+							<img src="./../../../resources/image/help/shortcut_icon_url.png" class="img-fluid img-thumbnail" alt="바로 가기 주소 수정">
+						</picture>
+					</li>
+					<li>[확인] 버튼 클릭</li>
+				</ul>
+			</p>
 		</div>
+	</div>
+	<br/>
+
+	<div class="card">
+		<h5 class="card-header bg-danger text-white">브라우저에서 드래그해서 만들기 (권장하지 않음)</h5>
 		<div class="card-body">
 			<h5 class="card-title">Chrome</h5>
 			<p class="card-text">