[Day6] HTML 6 - div 페이지, 반응형웹, form, canvas,svg, 멀티미디어, youtube

[Day6] HTML 6 [11/9]

 

--복습--

1. 화면 구현

header / row / footer

<style>
  *{
     box-sizing: border-box;
  }
  
  html{
    font-family:"Lucida Sans", sans-serif;
  }
  
  /* .클래스명 */
  /* #아이디명 */
  .header{
    background-color: #9933cc;
    color:white;
    padding: 15px;
  }
  .footer{
     background-color: #0099cc;
    color:#ffffff;
    padding: 15px;
    text-align: center;
    font-size: 12px;
  }
  
  .row::after{
     content: "";
     display: table;
     clear: both;
  }
  
  /*
  css selector  60가지
  [속성=속성값]{
  }
  */
  [class*="col-"]{
     float:right;
     padding: 15px;
  }
</style>

- class*="col-" : col-이 들어가있는 클래스 전부

- body 말고 html에 줘도 됨

- 폰트 공백있으면 "" 묶어주기

- row-footer 붙어있기 때문에 row::after 추가

<style>
  /* css selector   >   공백 */
  .menu > ul{         /*  직계자식 O, 후손 X */
     list-style-type: none;
     padding: 0;
     margin:  0;
  }
  .menu li{             /*  직계자식 O, 후손 O */
     background-color: #33b5e5;
     margin-bottom: 7px;
     padding: 8px;
     color: white;
     /* 박스 그림자 효과 */
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }
  
  .menu li:hover{
    background-color: #0099cc;
  }
  
  .aside{
     background-color: #33b5e5;
     text-align:center;
     font-size:14px;
     padding: 15px;
     color: white;
     /* 박스 그림자 효과 */
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }
</style>

 - 직계자식(>), 후손(공백)

 

[반응형 웹]

<style>
  /* mobile phone */
   [class*="col-"]{
      width: 100%;
   } 
      
   /* tablets */
   @media only screen and ( min-width:600px ){
        .col-s-3 {width: 25%;}
        .col-s-9 {width: 75%;}
        .col-s-12 {width: 100%;}
   }
   
     /* desktop */
   @media only screen and ( min-width:768px ){
        .col-3 {width: 25%;}
        .col-6 {width: 50%;}
   } 
</style>

- media only screen : 화면에 출력할때만

<div class="header">
		<h1>Chania</h1>
	</div>
	<div class="row">
		<div class="col-3 col-s-3 menu">
			<ul>
				<li>The Flight</li>
				<li>The City</li>
				<li>The Island</li>
				<li>The Food</li>
			</ul>
		</div>
		<div class="col-6 col-s-9">
			<h1>The City</h1>
			<p>Chania is the capital of the Chania region on the island of
				Crete. The city can be divided in two parts, the old town and the
				modern city.</p>
		</div>
		<div class="col-3 col-s-12">
		   <div class="aside">
		      <h2>What?</h2>
		      <p>Chania is a city on the island of Crete.</p>
		      <h2>Where?</h2>
		      <p>Crete is a Greek island in the Mediterranean Sea.</p>
		      <h2>How?</h2>
		      <p>You can reach Chania airport from all over Europe.</p>
		   </div>
		</div>
	</div>
	<div class="footer">
		<p>Resize the browser window to see how the content respond to the
			resizing.</p>
	</div>

 

 

2. 이름과 나이를 입력받아서 입력받은 이름과 나이를 출력하는 코딩을 하세요. 

<form action="ex02_ok.jsp" method="get">
 <label for="name">이름 </label> <input type="text" id="name" name="name"  autofocus="autofocus" value="홍길동"><br>
 <label for="age">나이 </label> <input type="text" id="age" name="age" value="20"><br>

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

<%
    // ?name=홍길동&age=20
    String name = request.getParameter("name");
    int age = Integer.parseInt( request.getParameter("age") );  // "20" -> 20    
%>

이름 : <%= name %><br>
<%-- jsp 주석처리
나이 : <%= age %> <br>
 --%>

---

<form action="" method="post" enctype="multipart/form-data">
  <!-- 남자/여자  두 가지 값 중에  반드시  하나만 선택할 때 : 라디오 버튼 -->
  <!-- 체크박스  : 여러 가지 중에 0, 여러 개를 선택할 때-->
  
  <!-- 그룹 묶어주는 처리 속성 : name -->
  성별 : 
  <input type="radio"  name="gender" value="m"  checked="checked">남자
  <input type="radio"  name="gender"  value="w">여자
  <br>
  좋아하는 과목 선택 ? 
  <br>
  <input type="checkbox" name="fsubject" value="kor">국어
  <input type="checkbox" name="fsubject" value="eng">영어
  <input type="checkbox" name="fsubject" value="mat">수학
  <input type="checkbox" name="fsubject" value="pe">체육

  <br>
  게시글 제목 : <input type="text"  name="title" size="50"  style="border:1px solid gray;width:300px"><br>
  <!-- 한줄 X, 여러 줄  -->
  게시글 내용 :  <textarea rows="10" cols="50"></textarea> <br>
  <br>
  <!-- ( 기억 ) 첨부파일 있는 경우에는 form 태그의 method="post" 라야 된다.  -->
  <!-- 개발자 직접 서버 첨부(전송)된 파일을  저장 또는 파일업로드 라이브러리 사용 -->
  첨부파일 : <input type="file" name="attachFile"><br>
  첨부파일 : <input type="file" name="attachFile"><br>
  첨부파일 : <input type="file" name="attachFile"><br>
  첨부파일 : <input type="file" name="attachFile"><br>
  <br>
  멀티 첨부 파일 : <input type="file" name="attachFile"  multiple="multiple"><br>
  <input type="submit">
</form>

- radio : 두가지값 중에 하나 반드시 체크 

- checkbox : 여러가지중에 여러개

- 첨부 파일 전송 -> 서버에 파일 위치 저장( 코딩 - 개발자 직접 )  + 파일업로드 라이브러리

---

autocomplete="on"   사용자 이전에 입력한 값을 기본으로 자동 완성 속성 

<form action="ex04_ok.jsp" method="get"  autocomplete="off">
 
   <!-- 12:05 수업 시작~! -->
   
   <!-- 브라우저 지원하는 색상  -->
  <!-- 선택한 색상의 배경색으로 지정 - 사용자 반응 처리 js,jquery -->
   <input type="color"  id="bgcolor"><br>
   
   생년월일 : <input type="date" id="birth"><br>
   
   <button type="button"  onclick="birth_test();">생일확인</button>
   <script>
       // var i = 1;
       function birth_test(){
    	   //  console.log( "test " + i++ );
    	   // input입력태그들의 값은 value 속성 읽/쓰  ( 기억 )
    	   // js
    	   // var birth = document.getElementById("birth").value;
    	   // console.log( "생일 : " +  birth    );
    	   
    	   // jquery 
    	   // jquery method - val()
    	   var birth = $("#birth").val();
    	   console.log( "jquery 생일 : " +  birth    );
       }
   </script>
   <br>
   <input type="datetime-local"><br>
   <input type="datetime"><br>
   
   <br><br>
   설문(투표) 기간 :  <!--  시작 ~ 종료 -->
   <input type="date"   min="2022-11-05" max="2022-11-12">
   <br>
   <!-- 년도와 월만 선택 가능  -->
   month : <input type="month">
   <br>
   <!-- ***** type="hidden" 입력값을 숨김-->
   
   <!-- 서브밋 기능이 있다. -->
   image : <input type="image" src="../images/favicon.ico">
   <!-- <a><img></a> -->
   <br>
   
   <!-- js .전공자  -->
   <!-- on input  이벤트는 슬라이더 변경(움직임)할때 마다 일어나는 이벤트 -->
   <!-- on change  이벤트는  value 속성값이 변경될 때 일어나는 이벤트 -->
   range : <input type="range" min="0"   max="100"  value="0" 
oninput="volumn_change(  this )">
   <input  id="volumnValue"  value="0"  
     style="text-align: center">
   <script>
       function volumn_change(  rangeobject ){
    	   document.getElementById("volumnValue").value =  rangeobject.value;
       }
   </script>  
     
   <br> 
   search : <input type="search">
   <br>
   <!-- 000-0000-0000  전화번호 형식 -->
   tel : <input type="tel"  pattern="[0-9]{3}-\d{4}-\d{4}">
   <br>
   text : <input type="text"  pattern="[0-9]{3}-\d{4}-\d{4}">
   <br>
   <!-- 년, 46번째 주 -->
   week : <input type="week">
   <br>
   time : <input type="time">
   <br>
   
   
   
   
   <!-- 서브밋 기능 X, 일반 버튼 인데  js, jquery 사용해서 서브밋 구현 -->
   <input type="button"  value="제출">
 
</form>

  <script>
      // jquery  코딩.     
      /*
      $("input[type='button'][value='제출']").click(function() {
      	alert("test-3");
      });
      */
      
      /*
      // jquery selector      :button == input[type='button'],    button
      $(":button").click(function() {    	  
    	  // 입력값에 대한 유효성 검사를 한 후에 .. 
    	  
      	 $("form")[0].submit();
      });
      */
  </script>

 <!-- 
 현재 페이지에는 존재하지만 보이지 않도록 숨기겠다. - 상태관리
  -->
  
 <input type="hidden"  value="<%= age %>"  name="age">

---

form 속성 ->  input  form속성

 

[밖에있는 input 안에서 적용하는법]

<label for="age">나이 </label> 
 <!-- form="form1" 속성 추가-->
 <input type="text" id="age" name="age" value="20"  form="form1"><br>

 

[유효성 검사 안하고 submit]

<form action="ex05_01.jsp"  id="form2"  novalidate="novalidate">
     <label for="name">이름 </label> <input type="text" id="name" name="name"  autofocus="autofocus" value="홍길동"  required="required"><br>
     <label for="age">나이 </label>  <input type="text" id="age" name="age" value="20"><br> 
     <input type="submit" formtarget="_blank"  formnovalidate="formnovalidate">
</form>

- 모든 입력 태그의 유효성 검사 무효화 novalidate="novalidate"

- formnovalidate="formnovalidate" 서브밋 될 때 유효성 검사 X

 

[action 다른페이지로 넘겨주는법 form]

<form action="ex05_01.jsp"  id="form1" method="post" >
     <label for="name">이름 </label> <input type="text" id="name" name="name"  autofocus="autofocus" value="홍길동"><br>
     <input type="submit"  formmethod="get">
     <!-- formaction="ex05_02.jsp"속성 -->
     <input type="submit"  formaction="ex05_02.jsp"  formenctype="multipart/form-data"> 
     <br>
     첨부파일  <Input type="file">
</form>

- enctype="multipart/form-data"

---

<input list="deptlist">
<datalist  id="deptlist">
   <option value="ACCOUNTING"></option>
   <option value="RESEARCH"></option>
   <option value="SALES"></option>
   <option value="OPERATIONS"></option>
</datalist>

---

그래픽 :  canvas(천), svg 태그

 

canvas 태그는

  - 웹 페이지에 그래픽을 그리는 데 사용되는 태그

  - [js를 사용]해서 그래픽을 그리는 데 사용되는 컨테이너 역할

  - 원, 텍스트, 이미지 등등

  - id 속성은 필수

  - width, height 속성  크기 지정. 

 

ex_1)

<canvas id="myCanvas" width="200" height="100"  style="border:1px solid #000"></canvas>

<script>
   // 1. 캔버스 요소를 얻어와야 된다.
   var c = document.getElementById("myCanvas");
   var ctx =  c.getContext("2d");
   
   // 선
   ctx.moveTo(0, 0);
   ctx.lineTo(200, 100);
   ctx.stroke(); // 타격, 때리기
   
   // 원
   ctx.beginPath();
   ctx.arc( 95,50, 40, 0, 2 * Math.PI);
   ctx.stroke();
   // 텍스트
   ctx.font =   "30px Arial";
   ctx.strokeText("Hello Word",10, 50); 
</script>

ex_2)

<img  id="scream" alt="scream" src="../images/img_the_scream.jpg">

<p><button onclick="scream_drawing();">캔버스</button></p>

<canvas id="myCanvas" width="240" height="300"  style="border:1px solid #000"></canvas>

<script>
   function scream_drawing(){
	   var c = document.getElementById("myCanvas");
	   var ctx =  c.getContext("2d");
	   
	   var screamimage =  document.getElementById("scream");
	   ctx.drawImage(screamimage, 10, 10);
   }
</script>

 

   [ svg ]

   - SVG  그래픽을 위한 컨테이너

   - SVG 는 XML 형식의  벡터 기반 그래픽 정의

   - 벡터 기반 ? 확장 가능한 그래픽 

<svg style="width: 100px;height:100px">
   <circle  cx="50" cy="50"   r="40"  stroke="green" stroke-width="4" fill="yellow" />
</svg>

<svg style="width: 400px;height:100px">
   <rect width="400" height="100" 
   style="stroke:rgb(0,0,0);stroke-width:10;fill:rgb(0,0,255);" />
</svg>

 <br>
 <svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
  </svg>
  
   <br>
<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

 

svg와 canvas 차이점

- svg       :  xml + 2d 그래픽 언어

- canvas :  js     + 2d      " 

---

멀티미디어

    1. 웹 상에서 멀티미디어는 사운드, 음악, 비디오, 영화 및 애니메이션.

     2. 일반적인 비디오 형식 :  .mpg,  .mpeg, .avi, .wmv, .mov, .swf, .webm. .mp4 등등

       (    html 표준 :   mp4. ogg. webm 만 지원한다....   )

            YouTube 에서는 mp4 형식을 권장한다. 

     3. 일반적인 오디오 형식 : .wav, .ogg, .mp3, .wma 등등

      (    html 표준 :   mp3, .ogg, .wav  만 지원한다....   )

 

 

비디오

1.  html 태그     <video>  태그를 사용. - 웹 페이지에 비디오를 표시.

2. width, height 속성을 하지 않으면 동영상이 로드 되는 동안 페이지가 깜빡일 수 있다. 

3.  controls 속성 추가 ( 재생, 일시정지, 볼륨, 등등 비디오 컨트롤 하는 속성)

 

<video src="movie.mp4"  width="320" height="240" controls="controls"></video>

<video  width="320" height="240" autoplay="autoplay" muted="muted">
  <source src="movie.mp4"  type="video/mp4">
  <source src="movie.ogg"  type="video/ogg">
  현재 브라우저는 지원하지 않습니다.
</video>

- control : 

- source 자식 태그 : 브라우저 선택

- autoplay 자동실행,  muted 조용한, 낮은 == 묵음

 

 오디오

 <audio controls autoplay  muted="muted">
    <source src="horse.mp4"  type="audio/mpeg">
    <source src="horse.ogg"  type="audio/ogg">
    현재 브라우저는 지원하지 않습니다. 
 </audio>

- 참고: 크롬 브라우저는 대부분의 경우 자동 재생을 허용하지 않는다.
                 ( 음 소거 + 자동재생 가능 ) 

---

플러그인 :  브라우저의 표준 기능을 확장하는 컴퓨터 프로그램

 - JAVA 애플릿 실행  ( 대부분 브라우저 지원 X )

 - MS  ActiveX 실행 ( X )

 - Flash 실행 ( X )

 - 지도 실행

 등등

 

1. 모든 브라우저 지원

2. 애플릿, ActiveX, Flash 등등 플러그인 .. X -> html 문서를 포함하는 데 사용할 수 도 있다. 

<object width=""  height="" data="sample.html"></object>
<object data="audi.jpeg"></object>

<embed width=""  height="" src="sample.html">
<embed src="audi.jpeg"><!--  종료 태그 X , html5 X-->

---

YouTube 동영상

1. html로 동영상을 재생하는 가장 쉬운 방법? YouTube 동영상 

2. YouTube 동영상 ID

     예) https://www.youtube.com/watch?v=    [       IrceIe4x1PI    ]

     [       IrceIe4x1PI    ] == YouTube 동영상 ID

     이 YouTube 동영상 ID 를 이용해서 html 에서 동영상을 재생할 수 있다.

3. 웹 사이트에서 필요한 동영상 -> YouTube 동영상 업로드

4. YouTube 동영상 ID  기록

5. iframe 태그 

<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

<!-- 자동 재생 + 음소거 -->
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1"></iframe>

<!-- 컨트롤러 표시( X )   controls=0,  1(기본값) -->
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"></iframe>

<!-- 
loop=0  비디오가 1번 재생
loop=1   비디오 무한 반복 재생
 -->
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?loop=1"></iframe>

---

[ html API ] + js

1. 지리적 위치

2. 드래그 / 드롭

3. 웹 스토지( 저장소 )  

4. 웹 작업자

5. SSE