본문 바로가기
MSA-Training/Frontend

DAY. 04

by domsam 2025. 12. 4.
반응형

 

ch03/atag.html

p.116

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>atag.html</title>
    <style>
        img { width: 100px; }
        
    </style>
</head>
<body>
    <a href="https://www.naver.com">네이버로 이동</a>
    <a href="https://www.google.com" target="_blank">구글 띄우기</a>
    김연경<a href="https://www.daum.net"><img src="images/a1.jpg" alt="김연경 선수"></a>김연경
</body>
</html>

 

네이버로 이동 구글 띄우기 김연경김연경 선수김연경

 

<a> 태그는 하이퍼 링크를 만들 수 있다. href속성은 <a>태그를 클릭시 이동하고 싶은 목적지를 작성하면 된다. target속성은 목적지가가 열릴 위치를 명시한다.

_blank 링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈함.
_self 링크된 문서를 링크가 위치한 현재 프레임에서 오픈함.
기본값으로 생략 가능.
_parent 링크된 문서를 현재 프레임의 부모 프레임에서 오픈함.
_top 링크된 문서를 현재 윈도우 전체에서 오픈함.
프레임 이름 링크된 문서를 명시된 프레임에서 오픈함.

 

IE에 맞춰서 작업하던 시기에는 target 속성을 많이 사용하였지만 현재는 "_blank" 정도만 사용한다.

 

ch03/idlink.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html { scroll-behavior: smooth; }
    </style>
    <title>idlink.html</title>
</head>
<body>
    <!-- 앵커 기능 -->
    <a href="#target_99">99로 이동</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>
</body>
</html>

 

99로 이동

id: target_1

id: target_2

id: target_3

id: target_4

id: target_5

id: target_6

id: target_7

id: target_8

id: target_9

id: target_10

id: target_11

id: target_12

id: target_13

id: target_14

id: target_15

id: target_16

id: target_17

id: target_18

id: target_19

id: target_20

id: target_21

id: target_22

id: target_23

id: target_24

id: target_25

id: target_26

id: target_27

id: target_28

id: target_29

id: target_30

id: target_31

id: target_32

id: target_33

id: target_34

id: target_35

id: target_36

id: target_37

id: target_38

id: target_39

id: target_40

id: target_41

id: target_42

id: target_43

id: target_44

id: target_45

id: target_46

id: target_47

id: target_48

id: target_49

id: target_50

id: target_51

id: target_52

id: target_53

id: target_54

id: target_55

id: target_56

id: target_57

id: target_58

id: target_59

id: target_60

id: target_61

id: target_62

id: target_63

id: target_64

id: target_65

id: target_66

id: target_67

id: target_68

id: target_69

id: target_70

id: target_71

id: target_72

id: target_73

id: target_74

id: target_75

id: target_76

id: target_77

id: target_78

id: target_79

id: target_80

id: target_81

id: target_82

id: target_83

id: target_84

id: target_85

id: target_86

id: target_87

id: target_88

id: target_89

id: target_90

id: target_91

id: target_92

id: target_93

id: target_94

id: target_95

id: target_96

id: target_97

id: target_98

id: target_99

id: target_100

 

<a>태그 href 속성에 같은 문서에 있는 id값을 입력하고, a 엘리먼트를 클릭하면 해당 id를 가지고 있는 엘리먼트까지 스크롤 이동한다.

 

ch03/contactstag.html

p.118

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>contactstag.html</title>
</head>
<body>
    <address>
        웹사이트 주소: <a href="https://www.yalco.kr">yalco.kr</a><br>
        전화 <a href="tel:010-1234-5678">010-1234-5678</a><br>
        이메일 <a href="mailto:yalco@kakao.com">yalco@kakao.com</a>
    </address>
</body>
</html>

 

웹사이트 주소: yalco.kr
전화 010-1234-5678
이메일 yalco@kakao.com

 

데스크탑에서 별다른 기능이 없지만 모바일에서 전화걸기와 이메일 전송으로 바로 연결될 수 있다.

 

 

 

ch04/formtag.html

p.124

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>formtag.html</title>
</head>
<body>
    
    <form action="./01-result.html" method="get" autocomplete="off">
        <label for="name">이름</label>
        <input type="text" id="name" name="my_name">
        <br><br>
        <label>
            나이 <input type="number" name="my_age" max="150">
        </label>
        <br><br>
        <label><input type="checkbox" value="결혼함" name="married"> 결혼여부</label>
        <label><input type="checkbox" value="축구" name="hobby">축구</label>
        <label><input type="checkbox" value="농구" name="hobby">농구</label>
        <label><input type="checkbox" value="배구" name="hobby">배구</label>        
        <button type="submit">제출</button>
        <button type="reset">초기화</button>
    </form>
    
</body>
</html>

 





 

<form> 태그

 

속성

action: submit 처리시 데이터를 보낼 목적지

method: 데이터를 보내는 방식 (get, post)

autocomplete: off값을 대입하면 자동완성 기능이 비활성화되면서 과거에 입력한 내용이 나타나지 않는다.

 

method

get: 목적지+데이터를 url로 만들어 데이터를 보내는 방식

post: url에는 목적지만 표시하고 데이터는 요청(Request) 메세지의 body에 담아서 보내는 방식

 

 

<label> 태그

레이블이라 읽는다. (라벨은 콩글리쉬)

레이블 태그의 목적은 텍스트 클릭시 연결된 input 엘리먼트가 포커스가 되도록 한다.

label 사용법은 2가지가 있다.

1. label 태그로 텍스트와 input태그를 감싼다.

2. label 태그는 텍스트만 감싸고 for 속성으로 input 태그 id값과 연결한다.

 

 

<input> 태그 

type속성에 따라 모양이 바뀐다.

 

button 클릭할 수 있는 버튼을 정의함.
checkbox 체크박스(checkbox)를 정의함.
color 색을 선택할 수 있는 입력 필드(color picker)를 정의함.
date 날짜를 선택할 수 있는 입력 필드를 정의함. (year, month, day)
datetime-local 날짜와 시간을 선택할 수 있는 입력 필드를 정의함. (year, month, day, hour, minute)
email 이메일 주소를 입력할 수 있는 입력 필드를 정의함.
file 업로드할 파일을 선택할 수 있는 입력 필드와 “파일 선택” 버튼을 정의함.
hidden 사용자에게는 보이지 않는 숨겨진 입력 필드를 정의함.
image 제출 버튼(submit button)으로 사용될 이미지를 정의함.
month 날짜를 선택할 수 있는 입력 필드를 정의함. (year, month)
number 숫자를 입력할 수 있는 입력 필드를 정의함.
password 비밀번호를 입력할 수 있는 입력 필드를 정의함.
radio 라디오 버튼(radio button)을 정의함.
range 슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드를 정의함.
reset 리셋 버튼(reset button)을 정의함.
search 검색어를 입력할 수 있는 텍스트 필드를 정의함.
submit 제출 버튼(submit button)을 정의함.
tel 전화번호를 입력할 수 있는 입력 필드를 정의함.
text type 속성의 기본값으로, 한 줄로 된 텍스트 필드를 정의함.
time 시간을 선택할 수 있는 입력 필드를 정의함. (hour, minute)
url URL 주소를 입력할 수 있는 입력 필드를 정의함.
week 날짜를 선택할 수 있는 입력 필드를 정의함. (year, week)

 

 

name 속성

목적지로 데이터를 보낼 때 값과 매칭되는 키값이다. 데이터를 전달할 목적이라면 필수로 입력해야 한다.

 

ch04/fieldsettag.html

p.125

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fieldsettag.html</title>
</head>
<body>
    <form action="./ddd.html">
        <fieldset>
            <legend>반장</legend>
            <label>이름 <input type="text" name="name_1"></label>
            <br><br>
            <label>나이 <input type="number" name="age_1"></label>
        </fieldset>
        <br>
        <fieldset>
            <legend>부반장</legend>
            <label>이름 <input type="text" name="name_2"></label>
            <br><br>
            <label>나이 <input type="number" name="age_2"></label>
        </fieldset>
        <br>
        <fieldset disabled>
            <legend>서기</legend>
            <label>이름 <input type="text" name="name_3"></label>
            <br><br>
            <label>나이 <input type="number" name="age_3"></label>
        </fieldset>

        <button>제출</button>
    </form>
</body>
</html>

 

반장


부반장


서기

 

<fieldset> 태그

<legend> 태그는 범례 역할을 한다. 여러 input 엘리먼트를 하나의 그룹으로 지정할 수 있다. fieldset 태그에 disabled를 적용하면 자식 input 엘리먼트는 모두 비활성화 된다.

 

ch04/textinputtag.html

p.128

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textinputtag.html</title>
</head>
<body>
    <h1>텍스트 관련 인풋 타입</h1>
    <form action="#">
        <label>
            text <input type="text" placeholder="5자 이하" maxlength="5" name="text">
        </label>
        <br><br>
        <label>
            password <input type="password" placeholder="4자 이상" minlength="4">
        </label>
        <br><br>
        <label>
            search <input type="search">
        </label>
        <br><br>
        <label>
            tel <input type="tel">
        </label>
        <br><br>
        <button type="submit">제출</button>
    </form>
</body>
</html>

 

텍스트 관련 인풋 타입









 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'MSA-Training > Frontend' 카테고리의 다른 글

DAY. 06  (0) 2025.12.08
DAY. 05  (0) 2025.12.05
DAY. 03  (0) 2025.12.03
DAY. 02  (0) 2025.12.02
DAY. 01  (0) 2025.12.01

관련글

티스토리툴바