Style 태그

<head>
  <style>
              thead{
                  background-color: pink;
              }
  </style>
</head>

4. 이미지 및 미디어 관련 태그

1) 이미지 관련 태그

: img src = "삽입하고자 하는 이미지의 경로"
[alt = "이미지 설명 구문" width = "가로길이(px/%) height = "세로길이(px/%)"]

*src 속성과 alt 속성

alt 목적

- 사진의 경로가 잘못되거나 이미지를 제대로 표현할 수 없는 경우 대체 텍스트 용도

- 시각장애인분들을 위한 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명문구

*width 속성과 height 속성

이미지의 가로, 세로 길이 조정 가능
고정길이(px)(기본값), 가변길이(%)로 지

고정길이단위(px) : 화면사이즈가 조정이 되도 이미지의 크기는 변동 없음
가변길이단위(%) : 화면사이즈 또는 부모요소사이즈에 따라 이미지의 크기 변동

2) 미디어 관련 태그

오디오 관련 태그

: <audio src = "" controls autoplay loop></audio> 
          src: 오디오 경로
          controls : 재생도구 출력 여부
          autoplay : 자동재생여부
          loop : 반복재생여부

  <audio src="resources/audio/major.mp3" controls></audio>

비디오 관련 태그

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

  <video src ="resources/video/video1.mp4" controls autoplay loop width="400px" height="300px"></video>

결과물

5. 입력양식 및 폼 관련 태그

1) 입력 양식 관련 태그

(1) input 태그

: 사용자에게 값을 입력 받을 수 있는 텍스트 상자 또는 체크박스/ 라디오 버튼 등등을 만들 수 있음

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

2) 폼 관련 태그

: form 태그 내의 submit 버튼 클릭시, form태그 내에 작성한 사용자가 입력한 값들을 서버로 넘기면서 요청하는 역할 수행

(1) action ="" method =""

        form action ="" method="" 
        action 속성 : form 태그 내에 입력된 값들을 전달할 서버에 대한 경로 제시

method : 요청전송방식을 지정하는 속성(get(기본값)/post)

get 방식 : 요청시 사용자가 입력된 값들이 url에 노출되는 방식 ex) 검색폼
post 방식 : 요청시 사용자가 입력한 값들이 url에 노출되지 않는 방식 ex) 회원가입폼, 로그인폼

  
<form action = "test" method = "get">
검색내용 : <input type="text" name = "keyword"> 
  <!-- form 태그를 사용할 때 name = keyword 값을 꼭 입력해줘야 키 값이 url을 통해 전달이 됨. 꼭 입력해주어야 함 -->
<input type ="submit" value = "검색">
        </form>

: form태그 내에 submit 버튼 클릭시 method에 제시한 요청전송 방식으로 action에 지정한 경로로 사용자가 입력한 값을 key = value 세트로 전달

(2) fieldset , legend

fieldset : 그룹을 묶는 태그
legend : 해당 그룹의 제목을 붙이는 태그 (fieldset 하위요소)

<form action="test">

            <fieldset>
                <legend>제목1</legend>
                입력 1: <input type="text" name="text1"> <br>
                입력 2: <input type="text" name="text2"> <br>
            </fieldset>
            <fieldset>
                <legend>제목2</legend>
                입력 3: <input type="text" name="text3"> <br>
                입력 4: <input type="text" name="text4"> <br>
            </fieldset>
            
            <input type="submit">

        </form>

(3) text와 관련된 input태그의 type들

■ type = "text"

: 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 상자

<label for="userId">아이디 : </label>
            <input type="text" id ="userId" name ="userId" size="30" placeholder="영문자, 숫자로만 8글자~15글자" maxlength="15">

■ type = "password"

: 비밀번호를 입력할 수 있는 텍스트 상자(입력된 값 노출 X)

※ 참고 : label for = "라벨 클릭할 때 같은 id값으로 자동 지정해줌

<label for="userPwd">비밀번호 :</label>
        <input type ="password" id ="userPwd" name = "userPwd" placeholder="영문자, 숫자로만 8글자~15글자" maxlength="15">

■ type = "search | url | email | tel "

: 겉모습은 일반 텍스트 상자와 유사하지만 각각의 정보에 맞게 세분화된 기능 제공

검색 : <input type = "search" name ="keyword" placeholder="검색어 입력"> <br>
홈페이지 : <input type ="url" name ="keyword" value="http://"> <br>
이메일 : <input type = "email" name = "email" placeholder="이메일 입력"><br>
전화번호 : <input type ="tel" name ="phone" placeholder="-포함"><br>

■ datalist (HTML5에 새로 추가된 기능)

: 목록을 생성해주는 요소

<input type = "text" name = "color" list ="colorList">
        <datalist id = "colorList">
            <option value="black">검정색</option> 
            <option value="white">흰색</option>
            <option value="skyblue">하늘색</option>
        </datalist>
        <input type ="submit">
        
- list = datalist id 값이 동일해야함

(4) textarea 태그

: 텍스트 상자이긴 하나 여러줄을 입력할 수 있는 텍스트상자

<textarea name = "content" placeholder="내용을 입력하세요" cols="50" row="5" style="resize:none"></textarea>

(5) 숫자와 관련된 input태그의 type들

■ type ="number"

숫자값만 입력 가능한 텍스트 상자
오른쪽에 스핀박스가 표시됨(스핀박스 : 위/아래 화살표버튼)

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

■ type = "range"

: 슬라이드바를 통해 숫자 지정 가능

범위 : <input type="range" name="range" min="0" max="100" step="10" value="20">

<input type ="submit">
<input type = "reset">

(6) 날짜 및 시간과 관련된 input태그의 type들

■ type = "date | month | week | time | datetime-local"

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

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

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

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

datetime-local : <input type ="datetime-local" name="dtIn"> <br>
<!-- 년도, 월, 일, 오전/오후, 시, 분 입력받을 수 있는 텍스트상자 -->

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

(7) 라디오버튼과 체크박스 관련한 input 태그의 type들

■ 라디오버튼(type = "radio")

제시한 여러개의 값들 중에서 한개만 선택해야될때
(name 속성값이 똑같은 것들끼리 하나의 그룹으로 지어져서 )
제출신 선택(checked)된 값이 넘어감
단, 선택된 값을 넘기고자 한다면 선택했을 때 어떤 값을 넘길껀지 value값 명시해야됨

성별 : <input id ="radioX" type = "radio" name="gender"> <label>선택 안 함</label value="X">
      <input id ="radioM" type = "radio" name="gender" value="M"> <label>남</label>
      <input id ="radioF" type = "radio" name="gender" value="F"> <label>여</label>
      <!-- type은 라디오로 할거야, name이 같은 값끼리 그룹으로 이어짐, value 라디오 체크해서 넘길때 어떤 값으로 넘길지  -->

■ 체크박스(type = "checkbox")

제시한 여러개의 값들 중에서 여러개 선택가능할 경우
제출시 선택(checked)된 값이 넘어감
단, 각 input요소들마다 선택시 어떤 값을 넘길껀지 value값을 명시해둬야함

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

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

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

<input type="submit">

(8) 추가적인 input태그의 type들

■ type = "color"

: 색상을 선택할 수 있는 input

색상 : <input type ="color" name="color"> <br>

■ type = "file"

: 첨부하고자 하는 파일을 선택할 수 있는 input

첨부파일 : <input type="file">

■ type = "hidden"

: 특정 값을 사용자에게 입력받을 필요도 없고 노출시킬 필요도 없는
단, 제출하면 안 보임

<input type="hidden" name ="hiddenValue" value="hhh">

■ type = "submit | reset | button"

<button type ="submit">제출</button>
<button type ="reset">초기화</button>
<button type ="button">일반버튼</button>
<button>type 생략시?</button>
<!-- button 태그는 type 생략 시 기본적으로 submit 버튼이므로 button 태그 작성시 꼭 type 명시하는 습관들이자!!!  -->

(9) select 태그와 option 태그

-사용자에게 직접 입력받는게 아니고 여러 옵션들(목록)

제출시 선택(selected)된 값 넘어감
각각의 option에 value속성값 명시했을 경우 value값이 전달됨
만일, 명시 안 했을 경우 기본적으로 option태그의 시작태그와 종료태그 사이의 텍스트값이 넘어감

 <form action = "test">
                국적 : 
                <select>
                    <option> 한국</option>
                    <option> 영국</option>
                    <option> 미국</option>
                    <option> 러시아</option>
                    <option selected>선택 안함</option>
                </select>
                <input type="submit">
            </form>

Author And Source

이 문제에 관하여(3/2(화) FrontEnd/HTML5(2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@alsrnr45/32화-FrontEndHTML52

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

3/2(화) FrontEnd/HTML5(2)