HTML <a>태그 링크 연결하기

 

<a>태그란?

<a> 태그는 웹페이지, 파일, 이메일 주소, 위치에 대한 하이퍼링크를 생성한다.

즉, URL이 처리할 수 있는 다른 모든 것을 뜻한다.

 

---

a 태그의 활용

• 외부 URL : 다른 웹 사이트로 이동할 때 사용된다.
• 내부 링크 : 동일한 웹 사이트 내의 다른 페이지로 이동할 때 사용된다. 내부 링크는 해당 페이지의 URL 끝에 '#'과 해당 요소의 ID를 추가하여 작성된다.
• 이메일 링크 : 사용자의 이메일 클라이언트를 열고 새 이메일을 작성할 수 있도록 한다.
• 전화 링크 : 사용자가 클릭하면 전화를 걸 수 있도록 한다.
• 기타 : <a> 태그 링크는 텍스트 뿐만 아니라 이미지나 다른 요소를 포함할 수 있어서 이미지를 클릭했을 때 지정된 URL로 이동하는 등의 기능할 수 있다.

 

<a> 태그에는 여러 속성값이 있는데 

지금부터 <a> 태그와 함께 여러 요소에 대해 알아보겠다!~

 

 

1. href

: 하이퍼링크가 가리키는 URL이다. 

쉽게 말해 연결할 주소를 뜻한다.

링크는 HTTP 외에도 브라우저에서 지원하는 모든 URL를 사용할 수 있다.

 

(1) 기본 URL

<a href="http://www.google.com"></a>

 

(2) tel

: URL이 포함된 전화번호

전화 <a href="tel:010-1234-5678">010-1234-5678</a>

 

(3) mailto

: URL이 포함된 이메일 주소

이메일: <a href="mailto:이메일id@kakao.com"></a>

 

(4) sms

: URL이 포함된 SMS 문자 메시지

문자: <a href="sms: ~~~ "></a>

 

위와 같은 href의 속성들은 

보통 주소 및 연락처 정보를 나타내는

<address> 태그와 함께 쓰인다.

 <address>
    웹사이트 주소: <a href="https://google.com"></a> <br>
    전화 <a href="tel:010-1234-5678"></a> <br>
    이메일: <a href="mailto:이메일id@google.com"></a>
    문자 : <a href="sms: ~ "></a>
  </address>

 

 

2. target

: 링크된 URL를 표시할 위치를 뜻한다.

즉, 링크를 어떻게 열 것인가에 대한 옵션을 뜻하는데

예를 들면 현재 창에서 열기, 새 창에서 열기 등이 있다.

 

(1) _self

: 기본 옵션값으로 현재 창에서 열기를 뜻한다.

 

(2) _blank

: 새창에서 열기를 뜻하며,

텍스트나 내부 이미지의 alt 등으로 명시가 필요하다.

 

(3) _parent

: 상위(부모) 프레임을 뜻하며,

상위 항목이 없으면 _self.처럼 작동을 한다.

 

(4) _top 

: 가장 최상위의 프레임을 뜻하며,

_parent와 마찬가지로 상위 항목이 없으면 _self.처럼 작동을 한다.

 

 <a href="http://www.google.com" target="_blank">구글로 가기(새 창에서)</a> <br><br><br>
  <a href="http://naver.com" target="_blank">
    <img src="./image/lebao_1.jpg" height="500" alt="네이버 사이트로 가기(새 탭에서)">
    네이버 사이트로 가기(새탭에서)</a> <br><br><br>

 

 

3. id

id값을 활용하여 특정 타깃(위치)으로 이동할 때 쓰인다.

보통은 쇼핑몰에서 (위로가기) 기능에 

아주 유용하게 쓰인다!

(쇼핑할 때 너무너무 잘 쓰고 있다 쿄쿄><)

 

 

이동 방법은 href=" #id"

예를 들어 id가 target_1 ~ target_100까지 있다.

여기서 target_15로 이동하려면 아래와 같이 하면 된다.

 

!참고!

p태그 안에 1 ~ n 까지 숫자를 입력하려면

p#${id : $}*n

따라서 p#target_${id: target_$}*100

 

!참고!

<p> 태그

: 단락을 나타낸다. 

 

<a href="#target_15">타겟으로 이동</a>
  
  <p id="target_1">id: target_1</p>
  <p id="target_2">id: target_2</p>
  <p id="target_3">id: target_3</p>
  <p id="target_4">id: target_4</p>
  <p id="target_5">id: target_5</p>
  <p id="target_6">id: target_6</p>
  <p id="target_7">id: target_7</p>
  <p id="target_8">id: target_8</p>
  <p id="target_9">id: target_9</p>
  <p id="target_10">id: target_10</p>
  <p id="target_11">id: target_11</p>
  <p id="target_12">id: target_12</p>
  <p id="target_13">id: target_13</p>
  <p id="target_14">id: target_14</p>
  <p id="target_15">id: target_15</p>
  <p id="target_16">id: target_16</p>
  <p id="target_17">id: target_17</p>
  <p id="target_18">id: target_18</p>
  <p id="target_19">id: target_19</p>
  <p id="target_20">id: target_20</p>
  <p id="target_21">id: target_21</p>
  <p id="target_22">id: target_22</p>
  <p id="target_23">id: target_23</p>
  <p id="target_24">id: target_24</p>
  <p id="target_25">id: target_25</p>
  <p id="target_26">id: target_26</p>
  <p id="target_27">id: target_27</p>
  <p id="target_28">id: target_28</p>
  <p id="target_29">id: target_29</p>
  <p id="target_30">id: target_30</p>
  <p id="target_31">id: target_31</p>
  <p id="target_32">id: target_32</p>
  <p id="target_33">id: target_33</p>
  <p id="target_34">id: target_34</p>
  <p id="target_35">id: target_35</p>
  <p id="target_36">id: target_36</p>
  <p id="target_37">id: target_37</p>
  <p id="target_38">id: target_38</p>
  <p id="target_39">id: target_39</p>
  <p id="target_40">id: target_40</p>
  <p id="target_41">id: target_41</p>
  <p id="target_42">id: target_42</p>
  <p id="target_43">id: target_43</p>
  <p id="target_44">id: target_44</p>
  <p id="target_45">id: target_45</p>
  <p id="target_46">id: target_46</p>
  <p id="target_47">id: target_47</p>
  <p id="target_48">id: target_48</p>
  <p id="target_49">id: target_49</p>
  <p id="target_50">id: target_50</p>
  <p id="target_51">id: target_51</p>
  <p id="target_52">id: target_52</p>
  <p id="target_53">id: target_53</p>
  <p id="target_54">id: target_54</p>
  <p id="target_55">id: target_55</p>
  <p id="target_56">id: target_56</p>
  <p id="target_57">id: target_57</p>
  <p id="target_58">id: target_58</p>
  <p id="target_59">id: target_59</p>
  <p id="target_60">id: target_60</p>
  <p id="target_61">id: target_61</p>
  <p id="target_62">id: target_62</p>
  <p id="target_63">id: target_63</p>
  <p id="target_64">id: target_64</p>
  <p id="target_65">id: target_65</p>
  <p id="target_66">id: target_66</p>
  <p id="target_67">id: target_67</p>
  <p id="target_68">id: target_68</p>
  <p id="target_69">id: target_69</p>
  <p id="target_70">id: target_70</p>
  <p id="target_71">id: target_71</p>
  <p id="target_72">id: target_72</p>
  <p id="target_73">id: target_73</p>
  <p id="target_74">id: target_74</p>
  <p id="target_75">id: target_75</p>
  <p id="target_76">id: target_76</p>
  <p id="target_77">id: target_77</p>
  <p id="target_78">id: target_78</p>
  <p id="target_79">id: target_79</p>
  <p id="target_80">id: target_80</p>
  <p id="target_81">id: target_81</p>
  <p id="target_82">id: target_82</p>
  <p id="target_83">id: target_83</p>
  <p id="target_84">id: target_84</p>
  <p id="target_85">id: target_85</p>
  <p id="target_86">id: target_86</p>
  <p id="target_87">id: target_87</p>
  <p id="target_88">id: target_88</p>
  <p id="target_89">id: target_89</p>
  <p id="target_90">id: target_90</p>
  <p id="target_91">id: target_91</p>
  <p id="target_92">id: target_92</p>
  <p id="target_93">id: target_93</p>
  <p id="target_94">id: target_94</p>
  <p id="target_95">id: target_95</p>
  <p id="target_96">id: target_96</p>
  <p id="target_97">id: target_97</p>
  <p id="target_98">id: target_98</p>
  <p id="target_99">id: target_99</p>
  <p id="target_100">id: target_100</p>

 

 

 

이상으로 <a> 태그와 링크에 대해 알아보았따~~~