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, CSS - 이론' 카테고리의 다른 글
| [HTML] 사용자로부터 입력 받기 2 (0) | 2023.02.09 |
|---|---|
| [HTML] 사용자로부터 입력 받기(1) (0) | 2023.02.09 |
| [HTML] 표 사용하기 (0) | 2023.02.08 |
| [HTML] 이미지 넣기 (0) | 2023.02.08 |
| [HTML] 리스트 나열 TAG, 용어 정의 TAG (0) | 2023.02.07 |
