#34. HTML(VS Code) 이미지, 멀티미디어, 입력양식, 폼 태그

34-1. 이미지 및 멀티미디어

1) 이미지

    <style>
        #img1:hover{
            transition:transform 550ms ease-in-out;
            cursor : pointer;
            transform: scale(5.1);
        }
    </style>

    <img src="https://ssl.pstatic.net/melona/libs/1460/1460574/425da5bbb38901ff3afd_20230728102220942.jpg" alt="아기상어 올리와 윌리엄2"
    width="160" hight="80" id="img1" />

    <img src="resources/image/bono.jpg" alt="이 사진은 보노보노입니다.">

	<img src="https://i.namu.wiki/i/lUueuKmCUwjA249AAKYDtCInv-mAX0ARTDOZgfDPioapJsryswKgzO_QDoTze1nhKWD9SaAN78Wc0cVc8oYHwg.webp" alt="보노보노 친구 포로리입니다.">

    <p>
        * alt <br />
        - 사진의 경로가 존재하지 않는 경로거나 이미지를 제대로 표현할 수 없는 경우 대체 텍스트 <br>
        - 시각장애인들을 위한 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명문구<br>

        웹 접근성 => 사용자의 신체적 특징이나, 지역, 나이, 지식수준 등을 고려하여
        가능한 많은 사용자가 불편함없이 이용할 수 있도록 서비스를 만들어서 제공하는 것
    </p>
    
    
    <p>
        이미지의 가로, 세로길이 조정가능 <br>
        고정길이(px), 가변길이(%)로 지정이 가능하다.
    </p>

    <h5>고정길이단위(px) == 기본값 : 화면 사이즈가 조정되더라도 이미지 크기가 변동 X</h5>
    <img src="resources/image/flower.jpg" alt="꽃1" width="100" height="150" />

    <h5>가변길이단위(%) : 화면사이즈 혹은 부모요소***의 사이즈에 따라 이미지의 크기도 같이 변동</h5>
    <img src="resources/image/flower.jpg" alt="꽃1" width="15%" height="150" />

 

2) 오디오

    <!--
        <audio src="" controls autoplay loop></audio>
        controls : 플레이어를 보일것인지 숨길것인지
        autoplay : 자동 재생 여부 지정
        loop : 반복 재생 여부 지정
    -->
    
    <audio src="resources/audio/major.mp3" controls autoplay loop></audio>

3) 비디오

    <!-- 
        <video src="" controls autoplay loop width="" poster=""></video>

        src : 비디오파일 경로
        controls, autoplay, loop : 오디오와 동일

        width, height : 가로, 세로길이 지정
        poster : 썸네일 이미지
    -->

    <video src="resources/video/sample.mp4" controls width="400" height="200"
    poster="resources/image/bono.jpg"></video>

 

34-2. 입력양식 및 폼 태그 관련 태그

1) 입력 양식 관련 태그

    <h1>입력 양식 관련 태그</h1>
    <h2>input태그</h2>

    <p>
        사용자에게 값을 입력받을 수 있도록 텍스트상자, 체크밗, 등등등 만들 수 있는 태그 <br>
        type속성으로 지정 가능
    </p>

    아이디 : <input type="text"> <br>
    비밀번호 : <input type="password"> <br>
    성별 : <input type="radio"> 남자 <input type="radio"> 여자 <br><br>
    <input type="submit" value="회원가입">
    <button type="submit">새로고침</button>

 

2) 폼 관련 태그

- 텍스트 관련

    <h2>폼 관련 태그</h2>

    <p>
        입력양식의 틀을 의미 <br>
        form태그 내의 submit버튼 클릭 시 해당 form태그에 작성한 <br>
        사용자가 입력한 값들을 서버로 넘기면서 요청하는 역할을 하는 것이 form태그와 submit버튼!!!
        <br><br><br>

        form action="" method="" <br>

        *action 속성 : 해당 form안에 사용자가 입력한 값들을 전달하면서 요청할 서버의 경로를 제시
                        어디로 보낼건지를 지정 <br>

        *method 속성 : 요청 전송 방식으로 지정하는 속성(get방식(기본값)/post방식)
            > get방식 : 요청 시 사용자가 입력한 값들이 url에 노출 <br>
            > post방식 : 요청 시 사용자가 입력한 값들이 url에 노출되지 않음 <br><br>

        form태그 내부에 존재하는 submit버튼 클릭 시 <br>
        action에 지정한 서버의 경로로 <br>
        method에 작성된 요청 전송방식을 통해 <br>
        사용자가 input태그에 입력한 값들을 keyvalue형태로 전달 <br>

    </p>

    <form action="test.do" method="get">
        검색내용 : <input type="text" name="query"> <!-- name속성 : key제시 -->
        <input type="submit">
    </form>

    <hr>

    <h3>fieldset : 그룹을 묶는 태그(테두리를 만들어줌)</h3>
    <h3>legend : 해당 그룹에 제목을 붙여주는 태그(없어도 무방)</h3>

    <form action="123.do" method="post">
        <fieldset>
            <legend>제목1</legend>
            입력1 : <input type="text" name="text1">
        </fieldset>
        <fieldset>
            <legend>제목2</legend>
            입력2 : <input type="text" name="text2">
        </fieldset>

        <input type="submit">
    </form>

    <hr>

    <h2>text와 관련된 input태그의 type</h2>

    <form action="안뇽.do">
        <h3>type = "text"</h3>
        <p>
            - 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 상자(기본값)
        </p>
        <!--
            System.out.println("아이디를 입력해 주세요");
            String userId = sc.nextLine();

            mc.searchId(userId);
        -->
        아이디 : <input type="text" name="userId" placeholder="아이디를 입력해 주세요" required>

        <br>

        <h3>type = "password"</h3>
        <p>
            - 비밀번호를 입력할 수 있는 상자
        </p>

        비밀번호 : <input type="password" name="userPwd" maxlength="5" 
                          placeholder="영문, 숫자, 특수문자 포함 최대 5글자" required>

        <br>
        <h3>type="search/url/email"</h3>
        <p>
            - 겉모습은 일반텍스트상자와 비슷하지만 각각의 정보에 맞게 세분화된 기능을 제공
        </p>

        검색 : <input type="search" name="query" placeholder="검색어 입력">
        <br>
        이메일 : <input type="email" name="email">
        <br>
        사이트주소 : <input type="url" url="url" value="http://">

        <!--
            name : key지정, 의미를 부여해서 짓는 게 좋음

            required : 필수 입력 사항일 경우 부여
            placeholder : 입력을 유도하는 꾸밈요소
            maxlength : 작성할 수 있는 최대 길이
        -->

        <input type="submit">
    </form>
    
        <h2>textarea 태그</h2>

    <p>
        - 텍스트 상자인데 여러 줄을 입력할 수 있음
    </p>

    <form action="test.do">
        <fieldset>
            <legend>글 작성</legend>

            제목 : <input type="text" name="title" size="30"> <br>
            내용 : <textarea name="content" cols="30" rows="20" style="resize:none;"></textarea>
            <br><br><br>

            <input type="submit" value="작성하기">
        </fieldset>
        
    </form>

- 숫자관련

    <h2>숫자와 관련된 input태그의 타입</h2>

    <form action="test.do">

        <h3>type = "number"</h3>

        <!-- 
            System.out.println("나이를 입력해 주세요 > ");
            int age = sc.nextInt();
        -->

        수량 : <input type="number" name="amount" min="0" max="20" value="1" step="5">

        <!-- min : 최소값 / max : 최대값 / step : 한 번에 증가하거나 감소할 수 있는 값의 크기 -->

        <p>
            - 숫자값만 작성가능한 텍스트 상자 <br>
            - 스핀박스 표시(스핀박스 : 위 / 아래 화살표 버튼)
        </p>

        <input type="submit">
        

        <h3>type = "range"</h3>

        <p>
            - 슬라이드바를 이용해서 숫자를 지정가능
        </p>
        점수 : <input type="range" name="score" step="25">
        <br><br><br>

        <input type="reset">

    </form>

 

- 날짜관련

    <h2>날짜 및 시간과 관련된 input태그의 type</h2>

    <br>

    <form action="test.do">
        <h3>type = "date/month/week/time/datetime-local"</h3>
        
        date : <input type="date" name="date"> <br>
        <!-- 연도, 월, 일을 입력받을 수 있는 텍스트상자 -->

        month : <input type="month" name="month"> <br>
        <!-- 연도, 월을 입력받을 수 있는 텍스트상자 -->

        week : <input type="week" name="week"> <br>
        <!-- 연도, 해당 년도에 몇 번째 주인지 입력받을 수 있는 텍스트상자-->

        time : <input type="time" name="time"> <br>
        <!-- 오전 / 오후, 시, 분을 입력받을 수 있는 텍스트상자-->

        datetime-local : <input type="datetime-local" name="dt"> <br>

        
        <!--<input type="submit">-->
        <button type="submit">제출</button>
        <!-- button태그의 경우 form태그 내부에 위치하고 있다면 default값이 submit!! (안적어도 되지만 적어줄것!!!!)-->
        <button type="button">일반버튼</button>

    </form>

 

- 라디오 버튼과 체크박스

    <form action="test.do">
        <h3>라디오버튼 (type="radio")</h3>

        <p>
            - 제시한 여러개의 선택지들 중에서 오로지 한 개만 선택해야 할 때 사용 <br>
            - 제출 시 현재 선택된(checked)값이 넘어감 <br>
            - name속성 값이 똑같은 것들끼리 하나의 그룹으로 묶임
        </p>

        점심메뉴 : 
        <input type="radio" name="lunchmenu" value="김치찌개" id="lunchA" checked> <label for="lunchA">김치찌개</label>
        <input type="radio" name="lunchmenu" value="매운김치찌개" id="lunchB"> <label for="lunchB">매운김치찌개</label> 
        <input type="radio" name="lunchmenu" value="안매운김치찌개" id="lunchC"> <label for="lunchC">안매운 김치찌개</label>
        <br>
        <!-- 
            lunchmenu=on으로 넘어가기 때문에 value로 값을 넘겨준다. (lunchmenu=value)
            띄어쓰기와 같은 문자는 +등으로 넘어가기 때문에 최대한 자제한다.
            label for = id값
        -->

        <h3>체크박스 (type="checkbox")</h3>

        <p>
            - 제시한 여러개의 선택지들 중에서 여러 개를 선택 가능하게 하고 싶을 때 사용 <br>
            - 넘기고자하는 값을 value속성에 명시해야 함
        </p>

        색상 : 
        <!-- black, navy, gray, silver -->
        <input type="checkbox" id="black" name="color" value="black"> 
        <label for="black">블랙</label>
        <input type="checkbox" id="navy" name="color" value="navy"> 
        <label for="navy">네이비</label>
        <input type="checkbox" id="gray" name="color" value="gray"> 
        <label for="gray">그레이</label>
        <input type="checkbox" id="silver" name="color" value="silver"> 
        <label for="silver">실버</label>

        <br>

        <input type="submit">

    </form>

 

 

- 그 외

    <h2>추가적인 input태그의 type</h2>

    <form action="test.do">
        <h3>type = "color"</h3>
        <p>
            - 색상을 선택할 수 있는 input 태그의 type <br>
            색상 선택 : <input type="color">
        </p>

        <h3>type = "file"</h3>
        <p>
            - 첨부하고자 하는 파일을 선택할 수 있는 input태그의 type <br>
            첨부파일 : <input type="file">
        </p>

        <h3>type = "hidden"</h3>
        <p>
            - 특정 값을 사용자에게 입력받지 않고, 화면에 노출시키지도 않고
            넘기고자 하는 값이 있을 경우 사용할 수 있음
            => 주로 Primary Key에 해당하는 값을 넘길 때 사용할 예정 <br>
        </p>

        안보임 : <input type="hidden" name="boardNo" value="32431215">

        <input type="submit">

    </form>
    
    <hr>

    <form action="test.do">
        <h3>input태그를 이용해서 버튼을 만드는 방법</h3>
    
        <input type="text" name="exam">
    
        <p>
            - type = "submit/reset/button"
    
            <input type="submit">
            <input type="reset">
            <input type="button" value="일반버튼">

            <br><br>
        </p>

        <h3>button태그로 버튼 만드는 방법</h3>

        <p>
            - type = "submit/reset/button"

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

        <!-- 
            button 태그에 type속성을 생략했을 경우 form태그 내부에 존재한다면 기본값이 submit!!이기 때문에
            form 태그 내에서는 button태그를 작성할 때 반드시 type속성을 꼭!!! 명시하는 것이 좋다!
        -->

    </form>

    <hr>

    <h2>select태그와 option태그</h2>

    <p>
        - 사용자에게 키보드로 직접 값을 입력받는 것이 아니라 제시한 여러 개의 옵션중에서 
          선택할 수 있게끔 해주는 태그 <br>
        - 제출 시 현재 선택된(selected)값이 넘어감 <br>
        - 각각의 option에 value속성값을 명시했을 경우 value값이 넘어감 <br>
        만약 value속성값을 명시하지 않았을 경우 option태그의 content영역의 값이 value값으로 넘어감
    </p>

    <form action="test.do">
        
        고냉지 메뉴 : 
        <select name="kimchi_soup">
            <option>그냥 김치찌개</option>
            <option>꽁치 김치찌개</option>
            <option value="부대">부대 김치찌개</option>
        </select>


        <br><br>

        <h4>Datalist</h4>

        <!-- textbox + select -->

        좋아하는 색상 : <input type="text" name="color" list="colorList">
        <datalist id="colorList">
            <option>빨강</option>
            <option>파랑</option>
            <option>노랑</option>
        </datalist>

        <input type="submit">

    </form>