차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:html:html_note:html_links [2021/04/09 10:02]
emblim98
+++ wiki:html:html_note:html_links [2023/01/17 14:00] (현재)
dhan
@@ 줄 9: / 줄 9: @@
 \\
-====Source of the article====
+==== Source of the article ====
   * [[https://www.w3schools.com/html/html_links.asp|HTML Links]]
 \\
 거의 모든 웹 페이지에서 링크(Links)를 찾을 수 있습니다. 링크를 통해 사용자는 페이지를 이동합니다.\\
-=====HTML Links - Hyperlinks=====
+===== HTML Links - Hyperlinks =====
 %%HTML%% 링크는 하이퍼링크(Hyperlinks)입니다.\\
 \\
@@ 줄 24: / 줄 24: @@
 링크는 텍스트일 필요가 없습니다. 링크는 이미지 또는 기타 %%HTML%% 요소가 될 수 있습니다!\\
-=====HTML Links -Syntax=====
+===== HTML Links -Syntax =====
 %%HTML <a>%% 태그는 하이퍼링크를 정의합니다. 구문은 다음과 같습니다.\\
 <code html>
@@ 줄 35: / 줄 35: @@
 \\
 링크 텍스트를 클릭하면 독자는 지정된 %%URL%% 주소로 이동합니다.\\
-====예제====
+==== 예제 ====
 이 예제는 %%W3Schools.com%%에 대한 링크를 만드는 방법을 보여줍니다.\\
 <code html>
@@ 줄 46: / 줄 47: @@
   * 활성 링크(acitve link)는 밑줄이 있고 red 색상입니다.
 **Tip:** 링크는 %%CSS%%로 스타일을 지정하여 다른 형태의 외관을 가질 수 있습니다.
-=====HTML Links - The target Attribute=====
-''%%target%%'' 속성은 링크된 문서를 열 위치를 지정합니다.\\
-\\
-''%%target%%'' 속성은 다음 값 중 하나를 가질 수 있습니다.\\
-  * ''%%_self%%''- 기본값입니다. 클릭한 것과 동일한 창/탭에서 문서를 엽니다.
-  * ''%%_blank%%'' - 새 창 또는 탭에서 문서를 엽니다.
-  * ''%%_parent%%'' - 부모 프레임에서 문서를 엽니다.
-  * ''%%_top%%'' - 창의 전체 본문으로 문서를 엽니다.
-====예제====
+===== HTML Links - The target Attribute =====
-%%target = "_ blank"%%를 사용하여 새 브라우저 창 또는 탭에서 링크된 문서를 엽니다.\\
-<code html>
-<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
-</code>
-=====Absolute URLs vs. Relative URLs=====
-위의 두 예제는 ''%%href%%'' 속성에 **절대 경로 (absolute URL)**(전체 웹 주소)을 사용하고 있습니다.\\
-\\
-로컬 링크<sup>local link</sup>(동일한 웹 사이트 내의 페이지에 대한 링크)는\\
-**상대 경로(relative URL)**("https://www"부분 제외)으로 지정됩니다.\\
-====예제====
-<code html>
-<h2>Absolute URLs</h2>
-<p><a href="https://www.w3.org/">W3C</a></p>
-<p><a href="https://www.google.com/">Google</a></p>
-<h2>Relative URLs</h2>
-<p><a href="html_images.asp">HTML Images</a></p>
-<p><a href="/css/default.asp">CSS Tutorial</a></p>
-</code>
-=====HTML Links - Use an Image as a Link=====
-이미지를 링크로 사용하려면 ''%%<a>%%'' 태그 안에 ''%%<img>%%'' 태그를 넣으십시오.\\
-====예제====
-<code html>
-    <h2>Image as a Link</h2>
-    <p>The image below is a link. Try to click on it.</p>
-    <a href="https://www.w3schools.com/html/default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px; height:42px;"></a>
-</code>
-=====Link to an Email Address=====
-사용자의 이메일 프로그램을 여는 링크를 생성하려면 (새 이메일을 보낼 수 있도록)\\
-''%%href%%'' 속성 내에서 ''%%mailto:%%''를 사용하십시오.\\
-====예제====
-<code html>
-<a href="mailto:someone@example.com">Send email</a>
-</code>
-=====Button as a Link=====
-%%HTML%% 버튼을 링크로 사용하려면, %%JavaScript%% 코드를 추가해야 합니다.\\
-\\
-%%JavaScript%%를 사용하면 버튼 클릭과 같은 특정 이벤트에서 발생하는 작업을 지정할 수 있습니다.\\
-====예제====
-<code html>
-<button onclick="document.location='https://www.w3schools.com/html/default.asp'">HTML Tutorial</button>
-</code>
-=====Link Titles=====
-''title'' 속성은 요소에 대한 추가 정보를 지정합니다.\\
-대부분의 경우, 정보는 마우스가 요소 위로 이동할 때 툴팁(tooltip) 텍스트로 표시됩니다.\\
-====예제====
-<code html>
-<a href="https://www.w3school.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
-</code>
-=====More on Absolute URLs and Relative URLs=====
-====예제====
-웹 페이지tice 80%>
-  * description : HTML Links
-  * author      : 오션
-  * email       : shlim@repia.com
-  * lastupdate  : 2021-04-09
-</WRAP>
-<WRAP clear></WRAP>
-\\
-====Source of the article====
-  * [[https://www.w3schools.com/html/html_links.asp|HTML Links]]
-\\
-%%HTML%% 이미지 맵을 사용하여, 이미지 위에서 클릭 가능한 영역을 만들 수 있습니다.\\
-=====Image Maps=====
-거의 모든 웹 페이지에서션
-  * email       : shlim@repia.com
-  * lastupdate  : 2021-04-09
-</WRAP>
-<WRAP clear></WRAP>
-\\
-====Source of the article====
-  * [[https://www.w3schools.com/html/html_links.asp|HTML Links]]
-\\
-거의 모든 웹 페이지에서 링크(Links)를 찾을 수 있습니다. 링크를 통해 사용자는 페이지를 이동합니다.\\
-=====HTML Links - Hyperlinks=====
-%%HTML%% 링크는 하이퍼링크(Hyperlinks)입니다.\\
-\\
-링크를 클릭하면 다른 문서로 이동할 수 있습니다.\\
-\\
-링크 위로 마우스를 이동하면, 마우스 화살표가 작은 손 모양으로 바뀝니다.\\
-\\
-**Note:**\\
-링크는 텍스트일 필요가 없습니다. 링크는 이미지 또는 기타 %%HTML%% 요소가 될 수 있습니다!\\
-=====HTML Links -Syntax=====
-%%HTML <a>%% 태그는 하이퍼링크를 정의합니다. 구문은 다음과 같습니다.\\
-<code html>
-<a href="url">Link text</a>
-</code>
-\\
-''%%<a>%%'' 요소의 가장 중요한 속성은 링크의 목적지를 나타내는 ''%%href%%'' 속성입니다.\\
-\\
-//link// 텍스트는 독자가 볼 수 있는 부분입니다.\\
-\\
-링크 텍스트를 클릭하면 독자는 지정된 %%URL%% 주소로 이동합니다.\\
-====예제====
-이 예제는 %%W3Schools.com%%에 대한 링크를 만드는 방법을 보여줍니다.\\
-<code html>
-<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
-</code>
-\\
-기본적으로, 링크는 모든 브라우저에서 다음과 같이 나타납니다.\\
-  * 방문하지 않은 링크%%(unvisited link)%%는 밑줄이 있고 blue 색상입니다.
-  * 방문한 링크%%(visited link)%%는 밑줄이 있고 purple 색상입니다.
-  * 활성 링크(acitve link)는 밑줄이 있고 red 색상입니다.
-**Tip:** 링크는 %%CSS%%로 스타일을 지정하여 다른 형태의 외관을 가질 수 있습니다.
-=====HTML Links - The target Attribute=====
 ''%%target%%'' 속성은 링크된 문서를 열 위치를 지정합니다.\\
 \\
@@ 줄 180: / 줄 57: @@
   * ''%%_top%%'' - 창의 전체 본문으로 문서를 엽니다.
-====예제====
+==== 예제 ====
 %%target = "_ blank"%%를 사용하여 새 브라우저 창 또는 탭에서 링크된 문서를 엽니다.\\
 <code html>
@@ 줄 186: / 줄 63: @@
 </code>
-=====Absolute URLs vs. Relative URLs=====
+===== Absolute URLs vs. Relative URLs =====
 위의 두 예제는 ''%%href%%'' 속성에 **절대 경로 (absolute URL)**(전체 웹 주소)을 사용하고 있습니다.\\
 \\
@@ 줄 192: / 줄 69: @@
 **상대 경로(relative URL)**("https://www"부분 제외)으로 지정됩니다.\\
-====예제====
+==== 예제 ====
 <code html>
 <h2>Absolute URLs</h2>
@@ 줄 203: / 줄 80: @@
 </code>
-=====HTML Links - Use an Image as a Link=====
+===== HTML Links - Use an Image as a Link =====
 이미지를 링크로 사용하려면 ''%%<a>%%'' 태그 안에 ''%%<img>%%'' 태그를 넣으십시오.\\
-====예제====
+==== 예제 ====
 <code html>
     <h2>Image as a Link</h2>
@@ 줄 212: / 줄 89: @@
 </code>
-=====Link to an Email Address=====
+===== Link to an Email Address =====
 사용자의 이메일 프로그램을 여는 링크를 생성하려면 (새 이메일을 보낼 수 있도록)\\
 ''%%href%%'' 속성 내에서 ''%%mailto:%%''를 사용하십시오.\\
-====예제====
+==== 예제 ====
 <code html>
 <a href="mailto:someone@example.com">Send email</a>
 </code>
-=====Button as a Link=====
+===== Button as a Link =====
 %%HTML%% 버튼을 링크로 사용하려면, %%JavaScript%% 코드를 추가해야 합니다.\\
 \\
 %%JavaScript%%를 사용하면 버튼 클릭과 같은 특정 이벤트에서 발생하는 작업을 지정할 수 있습니다.\\
-====예제====
+==== 예제 ====
 <code html>
 <button onclick="document.location='https://www.w3schools.com/html/default.asp'">HTML Tutorial</button>
 </code>
-=====Link Titles=====
+===== Link Titles =====
 ''title'' 속성은 요소에 대한 추가 정보를 지정합니다.\\
 대부분의 경우, 정보는 마우스가 요소 위로 이동할 때 툴팁(tooltip) 텍스트로 표시됩니다.\\
-====예제====
+==== 예제 ====
 <code html>
 <a href="https://www.w3school.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
 </code>
-=====More on Absolute URLs and Relative URLs=====
+===== More on Absolute URLs and Relative URLs =====
-====예제====
+==== 예제 ====
 전체 %%URL%%을 사용하여 웹 페이지에 연결:\\
 <code html>
@@ 줄 245: / 줄 122: @@
 </code>
-====예제====
+==== 예제 ====
 현재 웹 사이트의 %%html%% 폴더에 있는 페이지에 링크:\\
 <code html>
@@ 줄 251: / 줄 128: @@
 </code>
-====예제====
+==== 예제 ====
 현재 페이지와 같은 폴더에 있는 페이지에 링크 :
 <code html>
@@ 줄 257: / 줄 134: @@
 </code>
-=====Chapter Summary=====
+===== Chapter Summary =====
   * ''%%<a>%%'' 요소를 사용하여 링크를 정의합니다.
   * ''%%href%%'' 속성을 사용하여 링크 주소를 정의합니다.
@@ 줄 264: / 줄 141: @@
   * 사용자의 이메일 프로그램을 여는 링크를 만들려면 ''%%href%%'' 속성 내에서 ''%%mailto:%%'' 체계를 사용하세요.
-=====HTML Link Tags=====
+===== HTML Link Tags =====
 |  Tag  | Description             |
 ^  <a>  ^ 하이퍼링크를 정의합니다.  ^
-{{tag>오션 HTML Links}}
+===== Trouble Shooting =====
+링크를 클릭했을 때 이전 창이 없을 경우 새탭을 생성하고 \\
+있을 경우 포커스를 이동 시킴
+> 자바스크립트를 사용하면 효율적임
+<code javascript>
+<input type="button" value="Open window, focus" onclick="openWin(true)" />
+<input type="button" value="Open window, nofocus" onclick="openWin()" />
+function openWin(doFocus)
+{
+    myWindow=window.open('','mywindow');
+    myWindow.document.write("<p>This is 'myWindow'</p>");
+    if(doFocus)
+        myWindow.focus();
+}
+</code>
+  * https://forums.caspio.com/topic/11400-open-link-in-new-tab-or-focus-to-it-if-already-open/
+  * https://jsfiddle.net/jaraics/pEG3j/
+{{tag>오션 HTML Links 주레피}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구