*50일차 (html -6~8. link~form)

@html - link

*링크관련

href

      상대주소

      절대주소

 

target

       이동할 페이지를 어느 target에서 연결할 지 여부

        _self (현재탭) : 기본값

        _blank (새탭) 

 

  <h1>링크관련</h1>
  <a href="http://naver.com">네이버로 가기</a>
  <a href="index.html">인덱스로 돌아가기</a>
  <a href="index.html" title="인덱스로 돌아가기" target="_blank">
  <img src="../sample/image/forest1.PNG" alt="" style="width: 200px;">
  </a>

1. 네이버로 가기를 클릭하면 naver.com으로 접속된다
2. forest1.PNG이미지를 클릭하면 index.html로 돌아간다

 

*페이지 내 특정영역으로 이동하기

<ul>
    <li><a href="#header1">#header1</a></li>
    <li><a href="#header2">#header2</a></li>
    <li><a href="#header3">#header3</a></li>
    <li><a href="#header4">#header4</a></li>
    <li><a href="#header5">#header5</a></li>
</ul>

• 헤더5 + Ctrl + 우클릭 : 헤더 5로 이동
• #앞에는 현재 페이지 주소가 숨겨져있다.

 

*

<!-- (p#p%>lorem*10)*5 -->
<!-- (div>h3#header${header$}+p>lorem*10)*5 -->

<div>
    <h3 id="header1">header1</h3>
    <p><span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim illum non, sunt fuga architecto molestiae neque fugiat mollitia assumenda commodi quod aperiam doloremque. Totam veritatis quibusdam dignissimos ducimus dolore reprehenderit?</span><span>Vitae consequatur earum ratione libero eveniet veritatis dignissimos suscipit, corporis illum. Quidem, praesentium incidunt. Quis natus sequi aliquid, saepe, autem omnis maxime nemo aspernatur adipisci veritatis, cumque iure ut rerum?</span><span>Quas nihil natus iste inventore, quam ratione quo veritatis illo vero non tempore reiciendis nostrum soluta aperiam excepturi odit assumenda porro adipisci, pariatur accusantium? Voluptate molestias non autem assumenda enim.</span><span>Eveniet eligendi officia laborum libero maiores repudiandae esse hic aut aperiam eius necessitatibus, nisi corporis ut quibusdam qui sunt asperiores temporibus saepe autem repellat? Dicta nobis asperiores impedit velit odit!</span><span>Magni mollitia nesciunt dolor ullam necessitatibus? Nemo, mollitia exercitationem voluptate, maiores commodi in ratione dolorem, temporibus architecto recusandae ut neque fugit ad molestiae dicta quidem rerum officiis odit repudiandae distinctio.</span><span>Similique perspiciatis, at corrupti iusto culpa nulla dignissimos iure provident fugit sit cumque? Quod, quis iste saepe, enim ut sint corrupti iusto est totam rerum aliquam! Necessitatibus nam eum nobis.</span><span>Quis, dolor eaque maiores aliquam dolores saepe neque. Atque quasi neque excepturi voluptatibus, totam minus nihil, doloremque animi, dolores at a eum error vel dolor consequatur aperiam repudiandae molestiae tenetur?</span><span>Cupiditate necessitatibus quo et nam, architecto minima ut. Quod iste assumenda iusto, repellendus voluptates dolores repellat dolorem nisi voluptate officiis ipsum, autem consequatur maxime eligendi exercitationem magnam. Modi, doloribus explicabo!</span><span>Qui, voluptas voluptates? Sint, accusamus quaerat necessitatibus repudiandae odio facere quos libero quod ipsum ipsa illo corrupti non, nostrum quasi quis? Accusamus repellat, commodi placeat ipsam laudantium facere odit nihil?</span><span>Veritatis fugiat perferendis ut ea corporis nemo, doloremque sit ducimus iusto repellat commodi, nesciunt, aperiam deleniti rem earum cum nostrum nam! Temporibus eveniet omnis iusto corporis magnam molestias asperiores est!</span></p>
</div>
<div>
    <h3 id="header2">header2</h3>
    <p><span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto, obcaecati! Omnis facilis, culpa consequuntur doloribus vitae neque nostrum, itaque provident, ad necessitatibus aliquid assumenda numquam officiis velit possimus labore voluptates.</span><span>Quidem atque vitae culpa? Facere ratione harum saepe, rerum quos alias necessitatibus. Similique voluptatum iusto, quas atque temporibus architecto illum nesciunt magnam impedit. Iusto esse ipsum praesentium deserunt ut nulla.</span><span>Nam non optio dolore, delectus iure in inventore? Aperiam beatae harum dignissimos nulla qui! Qui dolorum id natus placeat, provident exercitationem dolor ex aperiam expedita debitis, obcaecati a voluptatem ipsam.</span><span>Porro maxime voluptates, laboriosam harum nobis nemo ad nesciunt quod magnam vitae maiores veniam ducimus perferendis voluptatum ut error quis id tempore aperiam. Doloribus delectus veritatis obcaecati recusandae dolor libero?</span><span>Ipsam molestiae repellat reprehenderit impedit. Repudiandae culpa praesentium atque quia totam, ipsa exercitationem, quasi assumenda mollitia corporis libero doloremque deleniti obcaecati alias natus harum voluptates quas, eligendi in? Accusantium, iusto!</span><span>Nam maiores, quae enim temporibus ipsam id! Veniam corporis ut est animi eum, eligendi minus dolorum, nisi ad et, eos tempora maiores aperiam aspernatur libero corrupti quos dignissimos suscipit? Vel.</span><span>Est adipisci nulla voluptates dignissimos modi ab itaque. Iste quidem temporibus odit incidunt velit, sit reiciendis fuga distinctio necessitatibus sint rem praesentium? Doloremque modi molestias amet minus assumenda veritatis laborum?</span><span>Voluptatibus consectetur molestias commodi architecto culpa iusto ducimus. Architecto sequi labore nobis obcaecati inventore aliquam impedit molestias eos fuga molestiae sunt odit nam, incidunt accusantium. Earum exercitationem quidem ipsa eum!</span><span>Quas fuga repudiandae dolore ullam delectus, asperiores iste vitae, nostrum ratione doloremque eos rerum assumenda dignissimos voluptatibus possimus consequuntur numquam sit tempora dolor. Suscipit id voluptatum, voluptatibus iste molestiae enim.</span><span>Ad aliquam repellat enim quidem ratione eos ullam architecto autem in, dignissimos molestias illum earum tenetur. Illo atque molestiae dignissimos laborum architecto dolorem, velit corporis, tempora et laboriosam, animi natus.</span></p>
</div>
<div>
    <h3 id="header3">header3</h3>
    <p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos assumenda omnis ea error porro possimus laboriosam qui quae nobis! Eaque aut reiciendis minima, maiores maxime officiis placeat dolorum corporis fugiat!</span><span>Quidem rerum vero itaque explicabo iure assumenda, quibusdam deserunt minima magni odio possimus? Quisquam praesentium dolorum nobis, laborum exercitationem magni tenetur rem porro. Magnam rem quam reprehenderit fugit ipsa alias?</span><span>Sed, eius aut numquam blanditiis consectetur cumque, vel nam voluptates omnis deserunt sequi, doloremque molestiae quisquam similique recusandae eum natus reiciendis amet. Quidem eius, enim voluptate voluptatem dicta molestiae blanditiis.</span><span>Possimus, consectetur quas. Cum, reiciendis. Vel distinctio quia dolorum sequi iste pariatur amet accusamus magnam quo, culpa, eos facilis expedita consectetur consequatur at quae? Et cumque quo doloremque voluptatem minus!</span><span>Delectus quos cum ea aliquid repudiandae eius, enim hic maiores earum ad dolorum tenetur id repellendus magni quae veritatis amet quas aliquam facere error sed fugiat libero iste minus. Possimus.</span><span>Natus cum expedita voluptatum, beatae aut delectus modi ab soluta molestias molestiae! Itaque, enim qui amet ex corporis possimus ducimus commodi nemo doloremque odio reiciendis harum sequi expedita iusto earum!</span><span>Eum fugiat id pariatur consequatur doloribus reprehenderit. Deleniti pariatur totam officiis dolorem, quos, incidunt culpa eius illum explicabo impedit eaque accusantium assumenda veniam excepturi nostrum consequuntur ab nemo, rerum velit!</span><span>Est dicta mollitia facilis? A aperiam veritatis ipsa, corrupti deserunt maiores harum! Non perspiciatis doloremque consectetur accusantium quidem ipsa nisi modi nulla. Aperiam similique ratione soluta culpa tempore accusantium aliquam?</span><span>Pariatur nisi eum excepturi, delectus architecto voluptatibus sunt voluptas! Voluptatem earum distinctio quam soluta, delectus beatae unde expedita molestiae fuga quae enim fugiat, esse adipisci deleniti nobis corrupti inventore nisi!</span><span>Praesentium deserunt vitae voluptatem eos nesciunt? Animi veritatis aliquam quas deleniti asperiores aut! Nulla vitae dolorum enim voluptates eum adipisci cumque ratione eaque exercitationem vel aut totam quibusdam, non similique.</span></p>
</div>
<div>
    <h3 id="header4">header4</h3>
    <p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos sunt delectus hic. Voluptates a cupiditate, repudiandae dolor iste asperiores culpa officiis amet ipsam eius! Maiores totam fugiat mollitia dolores molestiae?</span><span>Voluptas provident aut adipisci soluta dignissimos eos? Quos velit eaque hic voluptates expedita reprehenderit, possimus, molestias, explicabo animi maiores exercitationem quae consectetur at tenetur laborum alias quidem modi obcaecati optio?</span><span>Ad, amet dignissimos. Error, asperiores provident. Facilis, dolores similique! Optio quasi tenetur repellendus porro, similique fugit tempora rem eaque natus in? Nesciunt iusto doloremque quos quis veritatis deleniti sapiente qui!</span><span>Ratione quae aut repellendus harum obcaecati in corrupti exercitationem enim aspernatur quas rem, ea hic natus ut deleniti quaerat eveniet officia, expedita repellat pariatur? Nisi aliquam totam ipsum rem inventore.</span><span>Minus nostrum nobis, quos accusamus error deleniti atque cumque sit soluta ipsum autem eum praesentium quia explicabo odit facilis fugiat! Amet debitis asperiores animi quae molestiae. Ipsa dolorum minus sint?</span><span>Distinctio blanditiis odio, sint debitis laboriosam inventore recusandae ad consequuntur mollitia minus maxime fugiat explicabo, voluptates perspiciatis illo ratione dolores at totam quis qui. Quis voluptatem quas ullam vel. Porro.</span><span>Dolores sit ab, earum amet excepturi enim exercitationem voluptates facere ipsum, distinctio necessitatibus voluptatibus quia minima. Praesentium officiis omnis assumenda, odit maiores odio itaque reprehenderit? Voluptates aperiam tempore architecto quia.</span><span>Suscipit dicta ex debitis? Quidem obcaecati repudiandae voluptates laborum nobis consequuntur iusto aperiam, odio qui enim perspiciatis nam suscipit in, quisquam cum officia? Veniam mollitia cumque ipsam doloremque totam odio.</span><span>Laborum sunt sint libero nam minus ratione praesentium officia quod tempora? Minima autem voluptas, sequi rerum fugit necessitatibus in natus porro. Deleniti hic sit pariatur architecto voluptatem ducimus, animi aliquam.</span><span>Quos assumenda dolores quia quidem obcaecati provident, dolorum adipisci eaque omnis officia veritatis non harum at aliquid itaque optio sint eligendi cum nemo natus ratione quis maxime accusamus. Architecto, rerum.</span></p>
</div>
<div>
    <h3 id="header5">header5</h3>
    <p><span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi ipsum adipisci accusamus suscipit id nisi minima eveniet dolorem ullam? Molestiae labore omnis ipsam ipsum. Molestiae repellendus delectus id minima at.</span><span>Nesciunt neque, quae id velit, eius officia totam ea qui aliquid nostrum nemo dolores! Commodi doloremque animi voluptatem dolorem mollitia saepe eligendi! Fugit at sequi error ex odio quis ratione?</span><span>Debitis laudantium dolor nulla harum. Optio, nihil quas sapiente recusandae officia nam magni consectetur a harum eveniet dignissimos, vel ea ut excepturi nulla laborum quibusdam fugit? Deleniti suscipit obcaecati laudantium?</span><span>Sapiente, labore minima? Sed delectus provident numquam quibusdam itaque maxime impedit nostrum, minus commodi esse, ipsum, quidem eos optio dolorum nemo qui blanditiis libero! Molestias fuga unde dolores dicta autem.</span><span>Quas fugit delectus quis voluptates? Ratione neque, eum soluta minima dignissimos ab aut! Ad et eaque quis laudantium cum beatae dolor necessitatibus exercitationem. Vel voluptas, quia praesentium accusantium laborum fugiat!</span><span>Explicabo dicta perspiciatis fuga fugit voluptatem quo, quis nam. Ex voluptatum commodi qui, culpa modi officiis saepe asperiores laboriosam incidunt perspiciatis facilis eius accusamus veritatis error dolor delectus at quis?</span><span>Quos rerum dolor, debitis placeat quasi, autem qui aspernatur consequuntur dolore delectus, nobis quam corporis labore suscipit sunt hic perspiciatis unde. Possimus architecto ad veritatis dignissimos, aspernatur reiciendis quam sequi.</span><span>Rerum, eos! Doloremque magni, quas rem voluptas ipsum soluta. Voluptas deleniti tempora cum aliquid! Tenetur excepturi facilis, quae aliquam odio obcaecati molestiae, nobis repudiandae assumenda, praesentium quis blanditiis sequi facere.</span><span>Repellat aliquid accusantium quas modi deserunt. Omnis quae, unde distinctio atque, doloribus ipsa voluptatibus natus, eum ipsum sequi error alias necessitatibus eaque? Perferendis, iste! Mollitia quidem ea officiis saepe illum!</span><span>Facilis magni architecto sunt necessitatibus et? Corporis, vel nisi quisquam labore quasi autem recusandae, vero hic eveniet quaerat aliquid tempora, repudiandae commodi! Animi reiciendis molestias laboriosam eaque labore mollitia porro.</span></p>
</div>

이렇게 작성된다.

 

<a href="#top">맨 위로</a>

클릭시 맨 위로 이동

 

---

 

@html - media

*음악재생

  <h1>미디어관련</h1>
  <h2>음악재생</h2>
  <audio src="../sample/audio/major.mp3" controls muted autoplay></audio>

• 해당경로에 있는 .mp3파일을 재생한다.
• autoplay는 브라우저 정책상 지원되지 않을 수 있다.

 

*비디오재생

  <h2>비디오재생</h2>
  <video src="../sample/video/small.mp4" controls style="width:300px;"></video>

  <iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/gGCwgCe3WtQ" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen></iframe>

1. 경로에 있는 sample폴더 내 .mp4파일 재생
2. 유튜브 영상(유튜브-공유-퍼가기 / 안되는 영상도 있음) 재생하기

 

 

 

---

 

@html - form

*form 관련태그

• 사용자 입력 값을 서버로 전송하기 위한 태그

1. action : 서버주소 아무것도 작성하지 않았다면 현재 페이지 주소로 전송
2. method : 전송방식 GET (기본값) / POST

   a.GET : 사용자 입력값이 요청 url에 붙여 전송

   b.POST : 사용자 입력값을 숨김처리 (전송메세지 body에 작성)

 

 <form action="">
    <label for="userId">아이디 : </label>
    <input type="text" id="userId" name="userId" value="honggd" placeholder="아이디를 입력하세요"/>
    <br>
    <input type="submit" value="제출">
  </form>

• for속성이 input태그의 id속성과 연결되어야 한다.
• id속성은 페이지 내 태그의 고유식별값
• 페이지 내 id는 중복될 수 없다.
• name속성이 있어야 서버로 전송된다.

 

 

*input 관련태그

 

**text 관련 input 태그

• fieldset : form 하위에서 영역구분 태그
• legend : fieldset의 title

<fieldset>
      <legend>text관련 input태그</legend>
      <label for="userName">이름 : </label>
      <input type="text" id="userName" name="userName" value="홍길동" readonly>
      <br>
      <!-- label+input[type=password] -->
      <!-- label+input:password -->
      <label for="userPassword">비밀번호 : </label>
      <input type="password" name="userPassword" id="userPassword" maxlength="16">
      <br>
      <!-- label+input:email -->
      <label for="userEmail">이메일 : </label>
      <input type="email" name="userEmail" id="userEmail">
      <br>

      <label for="homepage">홈페이지 : </label>
      <input type="url" name="homepage" id="homepage" value="https://abc.com">
      <br>

      <label for="phone">전화번호 : </label>
      <input type="tel" name="phone" id="phone">
      <br>
      <label for="memo">메모 : </label>
      <textarea name="memo" id="memo" cols="30" rows="10" style="resize:none;">abc
def
ghi</textarea>
    </fieldset>

메모칸 확대/축소안됨

 

**숫자관련 input 태그

    <fieldset>
      <legend>숫자관련 input태그</legend>
      <label for="score">점수 : </label>
      <input type="number" name="score" id="score" min="0" max="100" step="5">
      <br>

      <label for="numRange">범위 : </label>
      <input type="range" name="numRange" id="numRange" min="-100" max="100" step="10">
      <br>

    </fieldset>

• 점수 최소값 0 , 최대값 100으로 설정
• 5씩 증가/감소
• -100~100까지 10씩 증가/감소 

 

 

**선택관련 태그

<fieldset>
      <legend>선택관련 태그</legend>
      <label for="nation">국적 : </label>
      <select name="nation" id="nation">
        <option value="">선택</option>
        <optgroup label="Asia">
          <option value="ko" selected>한국</option>
          <option value="ch">중국</option>
          <option value="jp">일본</option>
        </optgroup>
        <optgroup label="Europe">
          <option value="fr">프랑스</option>
          <option value="gm">독일</option>
          <option value="en">영국</option>
        </optgroup>
      </select>
      <br>
      <label for="car">차 : </label>
      <input type="text" name="car" id="car" list="carList">
      <datalist id="carList">
        <option value="소나타">소나타</option>
        <option value="그랜져">그랜져</option>
        <option value="제네시스">제네시스</option>
      </datalist>

    </fieldset>

• 선택값은 한국으로 설정됨
• label=Asia ,Europe으로 설정
• 자동차가 옵션으로 보여짐

 

 

**날짜/시간관련 input태그

    <fieldset>
      <legend>날짜/시간관련 input태그</legend>
      <label for="today">날짜 : </label>
      <input type="date" name="today" id="today" value="2002-02-02">
      <br>
      <label for="when">시간 : </label>
      <input type="time" name="when" id="when" value="21:33">
      <br>
      <label for="meeting">시간 : </label>
      <input type="datetime-local" name="meeting" id="meeting" value="2022-04-07T21:33">
    </fieldset>

 

 

**radio/checkbox관련 input태그

<fieldset>
      <legend>radio/checkbox관련 input태그</legend>

      <div>
        성별 : 
        <input type="radio" name="gender" id="gender-male" value="male">
        <label for="gender-male">남</label>
        <input type="radio" name="gender" id="gender-female" value="female">
        <label for="gender-female">여</label>
        <br>
        취미 :
        <input type="checkbox" name="hobby" id="hobby-game" value="게임">
        <label for="hobby-game">게임</label>
        <input type="checkbox" name="hobby" id="hobby-music" value="음악">
        <label for="hobby-music">음악</label>
        <input type="checkbox" name="hobby" id="hobby-movie" value="영화">
        <label for="hobby-movie">영화</label>
        <br>
        <label for="forEmail">이메일수신여부 : </label>
        <input type="checkbox" name="forEmail" id="forEmail" checked>

      </div>
    </fieldset>

• radio : 택일
• checkbox : 여러개 선택 가능
• 체크하지 않으면 아예 전송되지 않음
• 체크박스가 하나인 경우 , value를 생략해도 서버측에서 구분 가능

 

 

**기타

  <fieldset>
      <legend>기타</legend>
      <label for="myColor">컬러 : </label>
      <input type="color" name="myColor" id="myColor" value="#ff0000" disabled>
 
      <br>
      <label for="upFile">파일 : </label>
      <input type="file" name="upFile" id="upFile">
      <br>
      <label for="hidden">안보이지만 전송 : </label>
      <input type="hidden" name="hidden" id="hidden" value="helloworld">
      <br>

    </fieldset>

• 라인 4 : disabled속성은 서버측으로 전송되지 않는다

 

 

**form안의 input태그 value속성을 초기값으로 변경

**button태그의 기본type은 submit

    <input type="submit" value="제출">
    <input type="reset" value="초기화"> <!--이부분-->
    <input type="button" value="그냥버튼">

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