정신과 시간의 방

1.기본 형태

<a href="링크 주소" target="어떻게 열 것인지 속성">누를 내용(ex - ~로 가기)</a>

(1) target의 속성 값

Target의 속성 값	설명	비고
_self	현재 창에서 연다.	이게 default
_blank	새 창에서 연다.	텍스트나 이미지 누르기일 경우 alt에 이거 새창에서 열린다고 명시 필요! 시각 장애인들은 이게 새창에서 열리는지 모른다.
_parent	부모 프레임에서 열린다. (창 속의 창일 경우)	<iframe>사용 시 사용
_top	최상위 프레임에서 열린다. (창 속의 창이 거듭될 경우 )	<iframe> 사용 시 사용

2. 이미지 눌러서 링크 이동

<a href ="이동할 주소" target = "속성값">
	<img
    	src="이미지의 링크"
        alt="대체 텍스트"
    >

</a>

<!--href는 hyperreference의 약자-->
<!--원래 텍스트 들어가는 자리에 이미지 넣어주면 된다.-->

3. 해당 페이지의 특정 부분으로 이동

위키피디아 같이 페이지가 문단 별로 구분되어 있고, 목차를 누르면 해당 문단으로 이동한다고 해보자.

(1) 특정 문단을 지정하면 올 수 있는 타겟으로 만들기

<p id = "검색하면 올 수 있는 id"> 텍스트</p>
<!--문단 등록 할 때는 # 필요 없음!-->






	<--Emmmet으로 적는 법
		p#target_${id: target_$}*1000-->

	<!--#은 Emmet으로 적을 때, 아이디 속성을 부여하는 명령어 이고,
		$은 연속으로 반복되는 숫자가 차례로 들어감.
		여기선 target_1, target_2...target_1000으로 나옴-->

(2) 특정 문단으로 이동

문단 적을 때 같이 쓴 id 검색을 통해 이동

<a href="#이동할 타겟의 id"> 텍스트</a>

<!--#이 붙으면 해당 텍스트에 아이디 속성을 부여!
	검색 시에는 ""안에 # 넣어야함!-->

4.주소와 연락할 곳을 나타내는 address 태그

<address>
	웹사이트 주소: <a href ="https://www.yalco.kr">텍스트</a> <br>
    전화: <a href="tel:010-4125-1251">텍스트</a>
    이메일: <a hre="mailto:yalco@kakao.com">yalco@kakao.com</a>
</address>

<!--전화 앞에 tel:는 텍스트를 누르면 저 번호로 전화가 가게 만든다. (휴대폰으로 봐야 한다.)
 이메일에 mailto:는 텍스트를 누르면 해당 주소로 메일이 가도록 만든다. -->

5. 스스로 해보기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://showcases.yalco.kr/html-css/01-06/table.css">
  <title>Document</title>
</head>
<body>
  <!--기본형태/ 이미지 눌러서 이동/ 해당 페이지의 특정 내용으로 이동//이메일 주소와 연락처에 자동 연락 걸기 -->
  <a href="http://www.naver.com" target="_blank">네이버로 가기</a> <br><br>
  <a href="http://www.naver.com" target="_blank">
    <img 
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Naver_Logotype.svg/2560px-Naver_Logotype.svg.png" 
      alt="네이버_링크"
      width="500">
  </a>


  <br><br>

  <a href="#공부">공부 잘하는 법으로 가기</a>

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

  <address>
    주소: <a href="http://www.tistory.com" target="_blank">티스토리</a> <br>
    전화: <a href="tel:010-1234-5678">010-1234-5678</a> <br>
    이메일: <a href="mailto:good@good.com">good@good.com</a>
  </address>
</body>
</html>

저작자표시

[HTML] 링크 사용

1.기본 형태

(1) target의 속성 값

2. 이미지 눌러서 링크 이동

3. 해당 페이지의 특정 부분으로 이동

4.주소와 연락할 곳을 나타내는 address 태그

5. 스스로 해보기

티스토리툴바