[HTML] 이미지 | 하이퍼링크 | 입력 | form

📌이미지  관련 태그

 웹 문서에 사진이나 그림 같은 이미지를 삽입하는 용도의 태그

 

 

1) src : 삽입할 이미지의 경로를 지정하는 속성(파일경로, 웹 주소)

  [ src 속성 확인 ]

        상대경로 : 현재 위치를 기준으로 경로 지정 

        .. : 상위 폴더 
        /  : 아래, 안쪽, 안에 

    <img src="../images/cats/cat1.jpg">

    <!-- 웹 이미지경로(웹상 절대경로)를 이용해서 이미지 출력 (이미지 주소 복사)-->
    <img src="https://thumbs.gfycat.com/PerfumedBlandAmericanbadger-size_restricted.gif" alt="">

 

 

2) width / height : 이미지의 크기를 지정하는 속성 

  [width,heigth 속성을 이용한 크기 조절(고정/가변 크기)]
 
    고정 크기 단위 (px) : 화면의 크기 상관없이 지정된 값의 크기를 갖는 단위
    <img src="../images/dogs/dog1.jpg" width="300px" height="240px" alt="">
    <img src="../images/dogs/dog2.jpg" width="300px" height="240px" alt="">
    <img src="../images/dogs/dog3.jpg" width="300px" height="240px" alt="">
    <img src="../images/dogs/dog4.jpg" width="300px" height="240px" alt="">
    <img src="../images/dogs/dog5.jpg" width="300px" height="240px" alt="">


    가변 크기 단위(%) : 화면이나 영역 기준 사이즈 크기에 따라 크기가 변경되는 단위
    <img src="../images/flowers/flower1.jpg" width="15%" height="240px" alt="">
    <img src="../images/flowers/flower2.jpg" width="15%" height="240" alt="">
    <img src="../images/flowers/flower3.jpg" width="15%" height="240" alt="">
    <img src="../images/flowers/flower4.jpg" width="15%" height="240" alt="">
    <img src="../images/flowers/flower5.jpg" width="15%" height="240" alt="">

 

3) alt : 이미지를 설명하는 속성

       -> 이미지가 출력되지 않는 경우 화면에 직접 표시

[ ALT 속성 확인 ]
<img src="../images/cats/cat5.jpg" width="300px" height="300px" alt="고양이 사진">

 

📌하이퍼링크 관련 태그 :  'a'태그 

a태그는 현재 HTML 문서와 다른 HTML 문서를 연결해서 페이지 이동을 할 수 있게 하는 기능을 제공 -> 이 때, a태그로 감싸진 문자열 == 하이퍼링크 * 하이퍼링크 웹(HTML) 문서와 다른 문서와 구분 될 수 있는 핵심적인 기능   텍스트 또는 이미지를 클릭해서 페이지 이동   + 페이지 내에서 이동도 가능

a 태그를 이용한 하이퍼링크 구현

target 속성 : 연결된 문서를 어디에서 열 것인지 지정하는 속성 (기본값 : 같은탭)
_blanck : 비어있는 탭 == 새탭

<a href="01_글자관련태크.html">01_글자관련태크</a>
<a href="02_목록관련태그.html" target="_blank">02_목록관련태그</a>
<a href="https://www.naver.com" target="_blank">네이버로 이동!</a>

----------------------------------------------------------------------------------------

한 페이지 내에서 점프하기

   <ul id="list">
        <li><a href="#cat1">고양이1</a></li>
        <li><a href="#cat2">고양이2</a></li>
        <li><a href="#cat3">고양이3</a></li>
    
    </ul>

    <h3 id="cat1">고양이1</h3>
    <img src="../images/cats/cat1.jpg" alt=""><br>
    <a href="#list">목록으로 이동</a>

 

📌입력 관련 태그 

✅ input 태그, form

- 웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그

 

 

✅ text 관련 input 태그

 

- 한줄 짜리 문자열(텍스트)을 입력할 수 있는 입력 상자

- input 태그의 type 기본값으로 생략 가능

        - size : 입력 상자의 크기 
        - maxlength : 입력 받는 텍스트의 최대 길이 
        - placeholder : 입력 상자에 작성될 내용을 설명 

 

🔊 아이디

- type = "text"   아이디 : <input type="text" size="15" maxlength="10" placeholder="아이디입력">

 

 

 

🔊 비밀번호

- type ="password"    비밀번호 : <input type="password">

 

🔊 주소 입력 시 사용하는 입력 상자

- type ="url" 홈페이지 : <input type="url" value="https://">

 

🔊 이메일 입력 시 사용하는 입력 상자

 

- type = "email"  이메일 : <input type="emil" size="10">

 

🔊 전화번호 입력 시 사용하는 입력 상자

 

- type = "tel" 전화번호 : <input type="tel" size="30" placeholder="'-' 기호 포함"

 

🔊 검색어 입력 시 사용하는 입력 상자

- type = "search" 검색어 입력 : <input type="search" size="50">

 

📌숫자 관련 태그 

        - min : 최소값
        - max : 최대값
        - step :  증가/ 감소 단계 지정 

🔊 숫자만 입력 할 수 있는 입력 상자

 

- type = "number" 점수 입력 : <input type="number" min="0" max="100" step="10" value="50">

 

🔊 슬라이드바를 이용해서 숫자 지정(단독사용X / js와 함께 사용)

- type = "range" <input type="range" min="0" max="50" step="10">

 

🔊 날짜 / 시간 관련 input 태그

- type = "date/ month/ week/ time/ datetime-local"        <li><input type="date"></li>        <li><input type="month"></li>        <li><input type="week"></li>        <li><input type="time"></li>        <li><input type="datetime-local"></li>

📌input 태그( radio | checkbox  | 기타)

묶음으로 다룰려는 input 태그들은 반드시 같은 name 속성 값을 가져야 한다!
        
        
        name 속성
        1) radio,checkbox 뿐만 아니라 input 태그들 중 
           관련된 것들을 묶어서 부를 때 (묶음으로 다룰때) 사용 (그룹이름)
        
        2) 서버쪽에 제출되는 input 태그 값의 이름을 지정(form 태그와 같이 사용)

🔊 radio 관련 input 태그

- type = "radio"     <label for="a-team">A팀</label><input type="radio" name = "team" id="a-team">     <label for="b-team">B팀 </label><input type="radio" name = "team" id="b-team">     <label for="c-team">C팀 </label><input type="radio" name = "team" id="c-team"> * id 속성 : id 식별자(하나의 HTML 문서에서 중복되면 안됨!)

 

🔊 checkbox 관련 input 태그

- type = "checkbox"     <label for="a-team">A팀</label><input type="radio" name = "team" id="a-team">     <label for="b-team">B팀 </label><input type="radio" name = "team" id="b-team">     <label for="c-team">C팀 </label><input type="radio" name = "team" id="c-team"> * id 속성 : id 식별자(하나의 HTML 문서에서 중복되면 안됨!)

🔊 기타 input 태그

type = "color" : <input type="color"> <br>     type = "file"  : <input type="file"><br>     type = "hidden" : <input type="hidden" value="여기 값 있어요! " id="hd1"><br     -- 화면성에 보이지 않지만 존재하는 input 태그

 

📌form 태그( radio | checkbox  | 기타)

    - div 와 같은 영역(block 형식)
        + 내부에 작성된 input 태그의 값을 서버로 전달하는 역할 

        [속성]
        1) action : 내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성 
        2) method(방식) : 서버로 데이터 전달하는 방식을 지정하는 속성
        3) name : form 태그에 이름을 지정하여 각각의 form 태그 구분 (JS 사용)
        4) target : action에 지정된 주소를 새탭/ 현재탭 중 어디서 열지 지정

 

1) name 사용  

    <form >
        아이디 입력 : <input type="text" name="id">
    </form>
    
    <!-- 
        주소?id= user01
        ? : 제출된 값을 나타내는 문자열의 시작부분
        id : input 태그 name 속성 값 
        uer01 : input 태그에 입력한 값 (value)
        id = user01: name 속성 값이 'id'인 input 태그에 작성된 값이 'user01'이다. 
     -->

2) action  사용 

     <form action="08_하이퍼링크관련태그.html">
     <!-- action : 제출할 서버 또는 페이지 주소 
                   기본값 : 현재 페이지 주소-->

    이름 : <input type="text" name="inputName"><br>
    나이 : <input type="number" name="inputAge"><br>

    <!-- action 주소로 제출하는 버튼 -->
    <button type="submit">제출</button>
    </form>

3) target 사용 (target = "_blank" 작성 시, 새탭으로 이동해서 보여준다")

    <form action="07_이미지관련태그.html" target="_blank">

    팀선택 <br> 
    <label for="a-team">A팀</label><input type="radio" name = "team" id="a-team" value="A"> 
    <label for="b-team">B팀 </label><input type="radio" name = "team" id="b-team" value="B">
    <label for="c-team">C팀 </label><input type="radio" name = "team" id="c-team" value="C">

    <br><br><br>

    <label for="baseball">야구</label>
    <input type="checkbox" id="baseball" name="hobby" value="야구">

    <label for="soccer">축구</label>
    <input type="checkbox" id="soccer" name="hobby" value="축구">

    <label for="basketball">농구</label>
    <input type="checkbox" id="basketball" name="hobby" value="농구">

    <button type="submit">제출</button>

    </form>

 

value 속성을 추가 하지않으면, on이라고 작성되니 value 속성값 작성하기!    radio,checkbox 선택 시 전달되는 값이 'on'으로 나오는 이유         -> 선택 된 input 태그에 아무런 값이 작성되어 있지 않은데         체크는 되었다라는 것을 인식해'on'이라는 단어로 표현

 

📌fieldset / legend 

      fieldset : 테두리를 만들어 그룹을 구분하는 영역
      legend : fieldset 테두리에 이름을 부여

<fieldset>             <legend>회원 가입</legend>             아이디 : <input type="text" name="memberId"> <br>             비밀번호 : <input type="password" name="memberPw">        </fieldset>

 

📌버튼을 나타내는 input 태그

 input 태그 중 
        type = "sumbit" / type ="reset" / type = "button"
        
        위 3개 버튼을 나타내는 타입/ 최근에는 잘 사용 되지 않음
        왜? 버튼의 사용도가 너무 많아져서 별도의 button 태그가 새롭게 등장함

<button>제출</button> <button type="reset">초기화</button> <button type="button" id ="btn">그냥 버튼</button>

 

📌textarea/ select, option

🔊 textarea 태그 

여러줄을 입력하기 위한 입력 상자 

rows : 행의 개수 cols : 열의 개수  <textarea cols="70" rows="5" style="resize:none;"         placeholder="placeholder 가능합니다!&#;&#10;이렇게 쓰면 됩니다."         name= "ta">텍스트 작성중... 제목 : 내용 : 작성장 :      </textarea>

 

🔊 select, option 태그 

        select 제출 시
        option 태그에 value 가 없을 경우 : option 시작/ 종료 태그 사이에 작성된 내용
        option 태그에 value 가 있을 경우 : value에 작성된 값

        selected 속성 : select의 기본 값을 설정하는 속성

<select name="sel">             <option value="1">선택1</option>             <option value="2" selected>선택2</option>             <option value="3">선택3</option>         </select>          <input type="checkbox" checked>          <input type="radio" checked>          <!-- checked 속성 : checkbox/radio 체크해두는 속성 -->