[Day5] HTML 5 - ํ™ˆ๋ฉ”๋‰ด, button, div float, media, iframe, head tag, ๋ฐ˜์‘ํ˜• ์›น, ์ด๋ชจํ‹ฐ์ฝ˜, ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ, ๊ทœ์น™, form, select, option, get, post

๐Ÿ‘จ‍๐Ÿ’ป Web Development/HTML | CSS | JS | jQuery / / 2022. 11. 8. 23:20

[Day5] HTML 5 [11/8]

 

* float + ๋„ˆ๋น„ 50% ํ•ด๋„ ๋‹ค์Œ ํ–‰์œผ๋กœ ๋„˜์–ด๊ฐ€๋Š” ์ด์œ 

-> border์ด 1px ์”ฉ ์žก๊ณ ์žˆ๊ธฐ ๋•Œ๋ฌธ~!

<style>
border : 1px solid gray,
float : left,
width: 50%;
</style>

ํ™ˆ ๋ฉ”๋‰ด ์„ ํƒ

 

<style>
  ul{
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  li{
    float: left;
  }
  ul li a{
    display: block;
    color: #666;
    padding: 14px 16px;
    text-decoration: none;
    text-align: center;
  }
  ul li a.active{
    background-color: #04AA6D;
    color: white;
  }
  li:last-child{
    float: right;
  }
  li:nth-child(4)-> li:last-child{
    float: right;
  }
  ul#main li a:hover:not(active){
    background-color: #ddd
  }
</style>
<body>
  <ul id="main">
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</body>
<style>
  div#demo{
    background-color: black;
    color: white;
    padding: 20px;
  }
  p:hover{
    color: red
  }

</style>
<script>
  function hide() {
    document.gtElementById("demo").style.display="none";
  
  //jquery
  $("#btnShow").click(function(){
    $("#demo").css("display,"block");
    = $("#demo").show();
  });
  
  //๋งŒ์•ฝ button ํƒœ๊ทธ์— ์•„์ด๋””๊ฐ€ ์—†๋‹ค๋ฉด?
  $("button").click(function (){
    // window js๊ฐ์ฒด๋Š” ์ตœ์ƒ์œ„ ๋ถ€๋ชจ ๊ฐ์ฒด์ด๊ธฐ์— ์ƒ๋žต๊ฐ€๋Šฅ
    alert("๋ฒ„ํŠผ ํด๋ฆญ๋จ!");
    
    // button ์ฐพ์•„์˜ค๊ธฐ
    // $("button:nth-child(1)").click(function(){
    // $("button:last-of-type").click(function(){
    // $("button").first().click(function (){ 
    // $("button").last().click(function (){ 
    
    
    // ์ด๊ฒƒ๋„ window ์ƒ๋žต
    document.href="์ด๋™๊ฒฝ๋กœ";
</script>
<body>
  <button onclick="hide();">์ˆจ๊ธฐ๊ธฐ</button>
  <button onclick id="btnShow">๋ณด์ด๊ธฐ</button>

  <div id="demo">
    <h2>Lorem</h2>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Ea error asperiosres</p>
  </div>



</body>

 

layout(๋ฐฐ์น˜) ๋ฐฉ๋ฒ•

1) css float ์†์„ฑ - ์ง€๊ธˆ

2) css flexbox

3) css ํ”„๋ ˆ์ž„์›Œํฌ - ๋ถ€ํŠธ์ŠคํŠธ๋žฉ(bootstrap)

4) css ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ

 

div(๋ฐฐ์น˜, layout) + css

 

id ๊ฐ’์œผ๋กœ

<style>
   *{
      box-sizing: border-box;    
   }
   
   body{
      font-family: Arial, Helvetica, sans-serif;
   }
   
   div#header{
     background-color: #666;
     color:white;
     padding: 30px;
     text-align: center;
     font-size: 35px;
   }
   div#footer{
     background-color: #777;
     color:white;
     padding: 15px;
     text-align: center;
     font-size: 25px;
   }
</style>
<style>
  div#nav{
    background-color: #ccc;
    width: 30%;
    height: 300px;
    padding: 20px;
    
    float: left;
  }
  
  div#nav ul{
    /*  background-color: red; */
     list-style-type: none;
     padding: 0;
     /* margin: 0; */
  }
  
  div#article{
      background-color: #f1f1f1;
      min-height: 300px;
       width: 70%;
       padding:20px;
       
       float: left;
  }
</style>
<style>
  /* <div style="clear: left;"></div> */
  div#section::after{
     content: "";
     display: table;
     clear: both;
  }
</style>
<body>
 
<h2>div(๋ฐฐ์น˜, layout) + css  ex01.html</h2> 

 <!-- header>h2>{Cites - ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ( sematic elements )} -->
 <div id="header">
 	<h2>Cites - sematic elements</h2>
 </div>
 <!-- section>(nav>ul>li*3>a[href='#'])+(article>(h2>{London}^p*2>lorem)*3) -->
 <div id="section">
 	<div id="nav">
 		<ul>
 			<li><a href="#">London</a></li>
 			<li><a href="#">Paris</a></li>
 			<li><a href="#">Seoul</a></li>
 		</ul>
 	</div>
    <div id="article">
 		<h2>London</h2>
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse ratione dolorem fuga ipsa odio voluptate in quas cumque error at rem iure doloribus accusamus vel assumenda! Impedit quidem aliquam maiores?</p>
 		<p>Necessitatibus minima rerum dolorum hic adipisci perspiciatis nostrum molestiae amet accusamus quia beatae repellendus cum aliquam sapiente excepturi odio iste ipsum dolorem tempora blanditiis. Quo minus suscipit id cum totam.</p>
 		<h2>Paris</h2>
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eligendi repellendus nam aperiam placeat explicabo tempore quasi nulla atque delectus eius laudantium est officia amet at doloremque enim nisi blanditiis.</p>
 		<p>Harum ea est dolore animi officia quisquam cumque in. Beatae voluptatum inventore tempora ratione minus explicabo tenetur dicta recusandae earum libero aut ab quibusdam tempore? Debitis itaque nulla voluptates delectus.</p>
 		<h2>Seoul</h2>
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam laudantium non expedita omnis facilis quod explicabo tempora tempore pariatur sapiente velit est laborum dolorum ad quae aperiam quia cumque quidem.</p>
 		<p>Natus quisquam neque ipsum dolores quidem. Ad distinctio commodi voluptatum eveniet nobis at reiciendis aperiam veritatis itaque cumque facilis cum incidunt explicabo iure illum. Eligendi ullam aperiam excepturi nisi quos.</p>
 	</div>
 </div>
 <!-- footer>h2{Footer} -->
 
 <!-- float:left  -->
 <!-- 
 <div style="clear: left;"></div>
  -->
  
 <div id="footer">
 	<h2>Footer</h2>
 </div>
 
</body>

* footer ์ž๋™์œผ๋กœ float : left ๋กœ ์ž๋™์œผ๋กœ ์ ์šฉ (width ํผ์„ผํŠธ ๋‚จ์œผ๋ฉด)

* section๊ณผ footer ๋‚˜๋ˆ ์ฃผ๊ธฐ์œ„ํ•ด <div style="clear: left;"></div> ๋„ฃ์–ด์คŒ (์š”์ฆ˜ ์ด๋ ‡๊ฒŒ ์•ˆํ•จ)

  -> 

<style>
  /* <div style="clear: left;"></div> */
  div#section::after{
     content: "";
     display: table;
     clear: both;
  }
</style>

header์™€ footer๋กœ

<style>
    
   *{
      box-sizing: border-box;    /* css ์ˆ˜์—… */
   }
   
   body{
      font-family: Arial, Helvetica, sans-serif;
   }
   
  header{
     background-color: #666;
     color:white;
     padding: 30px;
     text-align: center;
     font-size: 35px;
   }
   footer{
     background-color: #777;
     color:white;
     padding: 15px;
     text-align: center;
     font-size: 25px;
   }
</style>
<style>
  nav{
    background-color: #ccc;
    width: 30%;
    height: 300px;
    padding: 20px;
    
    float: left;
  }
  
  nav ul{
    /*  background-color: red; */
     list-style-type: none;
     padding: 0;
     /* margin: 0; */
  }
  
  article{
      background-color: #f1f1f1;
      min-height: 300px;
       width: 70%;
       padding:20px;
       
       float: left;
  }
</style>
<style>
  /* <div style="clear: left;"></div> */
  section::after{
     content: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
     display: table;
     clear: both;
  }
</style>

<style>
   /* ๋ฐ˜์‘ํ˜• ์›น  */
   /* ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ */
   /*    %           */
   @media ( max-width:800px ){
       nav, article{
          width:100%;
          height:auto;
       }
   }
</style>
<body>
<!-- 
    [html layout(๋ฐฐ์น˜) ๋ฐฉ๋ฒ•]
    *** 1. css float ์†์„ฑ ***
    2. css flexbox
    3. css ํ”„๋ ˆ์ž„์›Œํฌ - ๋ถ€ํŠธ์ŠคํŠธ๋žฉ( Bootstrap )
    4. css ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ
 -->
<h2>div(๋ฐฐ์น˜, layout) + css</h2>

 
 <!-- header>h2>{Cites - ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ( sematic elements )} -->
 <header>
 	<h2>Cites -  sematic elements  </h2>
 </header>
 <!-- section>(nav>ul>li*3>a[href='#'])+(article>(h2>{London}^p*2>lorem)*3) -->
 <section>
 	<nav>
 		<ul>
 			<li><a href="#">London</a></li>
 			<li><a href="#">Paris</a></li>
 			<li><a href="#">Seoul</a></li>
 		</ul>
 	</nav>
 	<article>
 		<h2>London</h2>
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse ratione dolorem fuga ipsa odio voluptate in quas cumque error at rem iure doloribus accusamus vel assumenda! Impedit quidem aliquam maiores?</p>
 		<p>Necessitatibus minima rerum dolorum hic adipisci perspiciatis nostrum molestiae amet accusamus quia beatae repellendus cum aliquam sapiente excepturi odio iste ipsum dolorem tempora blanditiis. Quo minus suscipit id cum totam.</p>
 		<h2>Paris</h2>
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eligendi repellendus nam aperiam placeat explicabo tempore quasi nulla atque delectus eius laudantium est officia amet at doloremque enim nisi blanditiis.</p>
 		<p>Harum ea est dolore animi officia quisquam cumque in. Beatae voluptatum inventore tempora ratione minus explicabo tenetur dicta recusandae earum libero aut ab quibusdam tempore? Debitis itaque nulla voluptates delectus.</p>
 		<h2>Seoul</h2>
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam laudantium non expedita omnis facilis quod explicabo tempora tempore pariatur sapiente velit est laborum dolorum ad quae aperiam quia cumque quidem.</p>
 		<p>Natus quisquam neque ipsum dolores quidem. Ad distinctio commodi voluptatum eveniet nobis at reiciendis aperiam veritatis itaque cumque facilis cum incidunt explicabo iure illum. Eligendi ullam aperiam excepturi nisi quos.</p>
 	</article>
 </section>
 <!-- footer>h2{Footer} -->
 <footer>
 	<h2>Footer</h2>
 </footer>
</body>

* max-width 800๊นŒ์ง€๋Š” ์ด๊ฒŒ ์ ์šฉ 

 

์‹œ๋ฉ˜ํŠธ( semantic == ์˜๋ฏธ๋ก ์ ์ธ  ) ํƒœ๊ทธ

 1. ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ ? ์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ํƒœ๊ทธ(์š”์†Œ)

 2. ๋ˆ„๊ตฌํ•œํ…Œ ์˜๋ฏธ?   ๋ธŒ๋ผ์šฐ์ €์™€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ํƒœ๊ทธ

 3. ์˜๋ฏธ O - header ( div id='header'), form, table, section, nav ๋“ฑ๋“ฑ 

     ์˜๋ฏธ X - div , span

  4. ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ์˜ ์ข…๋ฅ˜

     1) header - ์†Œ๊ฐœ ๋‚ด์šฉ์ด๋‚˜ ํƒ์ƒ‰ ๋งํฌ์˜ ์ง‘ํ•ฉ์— ๋Œ€ํ•œ ์ปจํ…Œ์ด๋„ˆ

     2) section - ๋ฌธ์„œ์˜ ์„น์…˜(์ œ๋ชฉ์ด ์žˆ๋Š” ์ฃผ์ œ๋ณ„ ์ปจํ…์ธ  ๊ทธ๋ฃน)์„ ์ •์˜ํ•˜๋Š” ํƒœ๊ทธ

                          ์žฅ/์†Œ๊ฐœ/๋‰ด์Šค ํ•ญ๋ชฉ/ ์—ฐ๋ฝ์ฒ˜ ์ •๋ณด

     3) article -  ๊ธฐ์‚ฌ(๊ทธ ์ž์ฒด์— ์˜๋ฏธ), ๋…๋ฆฝ์ ์ธ ์ž์ฒด์— ํฌํ•จ๋œ ๋‚ด์šฉ์„ ์ง€์ •ํ•˜๋Š” ํƒœ๊ทธ

                      - ์›น ํŽ˜์ด์ง€์˜ ๋‚˜๋จธ์ง€ ๋ถ€๋ถ„๊ณผ ๋…๋ฆฝ์ ์œผ๋กœ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ์–ด์•ผ ๋œ๋‹ค.

                         ์‹ ๋ฌธ๊ธฐ์‚ฌ๋“ค, ์ œํ’ˆ ์นด๋“œ, ์‚ฌ์šฉ์ž ์˜๊ฒฌ, ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€, ํฌ๋Ÿผ ๊ฒŒ์‹œ๊ธ€.

       ์ฐธ๊ณ )  section ํƒœ๊ทธ ์•ˆ์—  article ์ค‘์ฒฉ๋˜์–ด์งˆ ์ˆ˜ ๋„ ์ž‡๊ณ ,

                 article  ํƒœ๊ทธ ์•ˆ์— section ์ค‘์ฒฉ ๋˜์–ด์งˆ ์ˆ˜๋„ ์žˆ๋‹ค. 

      4) footer - ๋ฐ”๋‹ฅ๊ธ€, ๋ฌธ์„œ๋‚˜ ๊ตฌ์—ญ์˜ ๋ฐ”๋‹ฅ๊ธ€์„ ์ •์˜ํ•˜๋Š” ํƒœ๊ทธ      

                      - ์ €์ž‘๊ถŒ ์ •๋ณด, ์—ฐ๋ฝ์ฒ˜ ์ •๋ณด, ์‚ฌ์ดํŠธ ๋งต , ๋งจ ์œ„๋กœ ๋งํฌ, ๊ด€๋ จ๋œ ๋ฌธ์„œ

       5) nav - ํƒ์ƒ‰ ๋งํฌ์˜ ์ง‘ํ•ฉ์„ ์ •์˜ํ•˜๋Š” ํƒœ๊ทธ

                     ๋ฌธ์„œ์˜ ๋ชจ๋“  ํƒ์ƒ‰๋งํฌ๋“ค์ด nav ํƒœ๊ทธ ์•ˆ์— ์žˆ์–ด์•ผ ๋˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. 

                     ์ฃผ์š” ๋งํฌ

       6) aside - ํ•œ์ชฝ์œผ๋กœ , ๋”ฐ๋กœ

                       - ์–ด๋–ค ์ฃผ์š” ๋‚ด์šฉ๊ณผ ๊ด€๋ จ๋œ ์–ด๋–ค ์ฝ˜ํ…์ธ ๋ฅผ ์ •์˜ํ•˜๋Š” ํƒœ๊ทธ

        7) figure/figcaption - ๊ทธ๋ฆผ, ๋„ํ‘œ, ์‚ฌ์ง„, ์ฝ”๋“œ ๋ชฉ๋ก ๋‚ด์šฉ์„ ์ •์˜ํ•˜๋Š” ํƒœ๊ทธ 

            ์˜ˆ)

            <figure>
               <img />
               <figcaption>์ด๋ฏธ์ง€ ์„ค๋ช…</figcaption>
            </figure>

        8) details, main, mark, summary, time

 

html - iframe ํƒœ๊ทธ

 

  1.   inline + frame  = iframe

       ์ผ๋ ฌ๋กœ ๋Š˜์–ด์„      ์œˆ๋„์šฐ , ์ฐฝ 

       ์ง๋ ฌ์˜ 

   2. ์ธ๋ผ์ธํ”„๋ ˆ์ž„์€ ํ˜„์žฌ html ๋ฌธ์„œ ๋‚ด์— ๋˜ ๋‹ค๋ฅธ ๋ฌธ์„œ๋ฅผ ํฌํ•จํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ.

   3. ์›น ํŽ˜์ด์ง€   [ ๋‚ด์— ]  ์›น ํŽ˜์ด์ง€๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ.

                         ์™œ ?  

      ์˜ˆ) ํ˜„์žฌ ๋‚ ์งœ/์‹œ๊ฐ„ ์ •๋ณด๋ฅผ  ๋ชจ๋“  ์›น ํŽ˜์ด์ง€์— ์šฐ์ธก ์ƒ๋‹จ์— ์ถœ๋ ฅ.

      http://trio.co.kr/club/public/clock.html

  4. 500 ํŽ˜์ด์ง€ ์ด์ƒ์˜ ์›น ํŽ˜์ด์ง€.. ์ž‘์„ฑ  - ์ˆ˜์ •, ์‚ญ์ œ( ์œ ์ง€, ๋ณด์ˆ˜)

<body onload="show()" style="margin:0;padding:0">
<div id="clock" align=center style="margin:0;padding:1px;font-size:9pt;width:9em;color:00f;background-color:cfc;"></div>

<script> 
function show(){
  var now=new Date();
  var dy=now.getDate();
  var mt=now.getMonth()+1;
  var hr=now.getHours();
  var mn=now.getMinutes();
  var sc=now.getSeconds();
  var ampm="<sup>์˜ค์ „</sup>";
  if (hr>=12) ampm="<sub>์˜คํ›„</sub>";
  if (hr>12) hr=hr-12;
  if (hr==0) hr=12;
//  if (hr<=9) hr="0"+hr;
  if (mn<=9) mn="0"+mn;
  if (sc<=9) sc="0"+sc;
  clock.innerHTML=" <b>"+mt+"</b>/<b>"+dy+"</b> "+ampm+" "+hr+":"+mn+":" +sc;
  setTimeout("show()",1000);
} 
</script> 

</body>

->

<!-- (a>lorem1^br)*5 -->
  <a href="">Lorem.</a>  <br>
  <a href="">Provident.</a>  <br>
  <a href="">Libero.</a>  <br>
  <a href="">Recusandae!</a>  <br>
  <a href="">At.</a>  <br>
  
  <!-- ์ธ๋ผ์ธ๋ชจ๋“œ -->
  <iframe name="datetime" title=""ํ˜„์žฌ ๋‚ ์งœ/์‹œ๊ฐ„" src="http://trio.co.kr/club/public/clock.html" frameborder="1"></iframe>
  <iframe name="datetime" title=""ํ˜„์žฌ ๋‚ ์งœ/์‹œ๊ฐ„" src="http://trio.co.kr/club/public/clock.html" style="border:1px solid red"></iframe>
  <!-- ํ”„๋ ˆ์ž„์˜ ํ…Œ๋‘๋ฆฌ ์ œ๊ฑฐ -->
  <iframe name="datetime" title=""ํ˜„์žฌ ๋‚ ์งœ/์‹œ๊ฐ„" src="http://trio.co.kr/club/public/clock.html" style="border:none;"></iframe>

head ํƒœ๊ทธ

1. head ํƒœ๊ทธ

    - ์›นํŽ˜์ด์ง€์˜ ์ •๋ณด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ

    - ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ( ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ )์˜ ์ปจํ…Œ์ด๋„ˆ

    - html ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ? html ๋ฌธ์„œ์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ

    - ํ™”๋ฉด ํ‘œ์‹œ X

    - ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ   ๋ฌธ์„œ ์ œ๋ชฉ, ์Šคํƒ€์ผ, ์Šคํฌ๋ฆฝํŠธ

                           ๊ทธ ์™ธ์˜ ๋ฉ”ํƒ€ ์ •๋ณด๋ฅผ ์ •์˜ 

    

  2. head ํƒœ๊ทธ์˜ ์ž์‹ ํƒœ๊ทธ

     1) title :   ๋ฌธ์„œ ์ œ๋ชฉ

     2) style :  ๋ฌธ์„œ ์Šคํƒ€์ผ ์ •๋ณด ์ •์˜

     3) script :์Šคํฌ๋ฆฝํŠธ

     4) meta  :

             ใ„ฑ)   meta charset="UTF-8"  ์›น ๋ฌธ์„œ์—์„œ ์‚ฌ์šฉ๋œ ์ธ์ฝ”๋”ฉ(๋ฌธ์ž์…‹) ์ •์˜

              meta ์ข…๋ฅ˜ ๊ฒ€์ƒ‰ ( *** )

      5) link :   css   ์™ธ๋ถ€ ๋ฆฌ์†Œ์Šค(์ž์›)๊ณผ ์—ฐ๊ฒฐ ํƒœ๊ทธ 

      6) base :  ํŽ˜์ด์ง€์˜ ๋ชจ๋“  ์ƒ๋Œ€ ์ฃผ์†Œ์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ์ฃผ์†Œ ๋ฐ ๋Œ€์ƒ์„ ์ง€์ •ํ•˜๋Š” ํƒœ๊ทธ. 

           ๊ธฐ์ดˆ

๋ฐ˜์‘ํ˜• ์›น

  1. ๋ชจ๋“  ์žฅ์น˜์—์„œ ์›น ํŽ˜์ด์ง€๊ฐ€ ๋ณด๊ธฐ ์ข‹๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ.

  2. ๋‹ค์–‘ํ•œ ํ™”๋ฉด ํฌ๊ธฐ์™€ ๋ทฐํฌํŠธ์— ๋งž๊ฒŒ ์ž๋™์œผ๋กœ ์กฐ์ •๋˜๊ฒŒ ํ•˜๋Š” ๊ฒƒ.

  3. <meta name="viewport" content="width=device-width, initial-scale=1.0"> ์ฝ”๋”ฉ ์ถ”๊ฐ€

  4. ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ

     1) ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€ ์ฒ˜๋ฆฌ

         ๋„ˆ๋น„(width) ์†์„ฑ:   %

     2) ๋ฐ˜์‘ํ˜• ํ…์ŠคํŠธ ์ฒ˜๋ฆฌ :  vw                    [v]iewport [w]idth

     <h1 style="font-size:10vw"></h1>

     

     ๋ทฐํฌํŠธ๋Š” ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์˜ ํฌ๊ธฐ์ด๋‹ค.

     1vw == ๋ทฐํฌํŠธ ๋„ˆ๋น„์˜ 1%

     

     ๋ทฐํฌํŠธ(๋ธŒ๋ผ์šฐ์ € ์ฐฝ ํฌ๊ธฐ) ๋„ˆ๋น„๊ฐ€  50cm ์ธ ๊ฒฝ์šฐ   1vw ==  0.5cm 

     ๋ทฐํฌํŠธ(๋ธŒ๋ผ์šฐ์ € ์ฐฝ ํฌ๊ธฐ) ๋„ˆ๋น„๊ฐ€  100cm ์ธ ๊ฒฝ์šฐ  1vw ==  1cm 

    3) ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ  @media ์ฝ”๋”ฉ.

      - ๋ฐ˜์‘ํ˜• ์›น 

      - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํ…์ŠคํŠธ์™€ ์ด๋ฏธ์ง€์˜ ํฌ๊ธฐ๋ฅผ ์žฅ์น˜์— ๋งž์ถฐ ์กฐ์ •...

      

      @media(max-width:800px){
          nav, section{
            width:100%;
            font-size:10vw;
          }
      }

์ด๋ชจํ‹ฐ์ฝ˜

 

   1. ์ด๋ชจํ‹ฐ์ฝ˜์€ ์ด๋ฏธ์ง€ ๋˜๋Š” ์•„์ด์ฝ˜ ์ฒ˜๋Ÿผ ์ถœ๋ ฅ์ด ๋˜์ง€๋งŒ ๋ฌธ์ž์ด๋‹ค. 

   2. meta charset="UTF-8" ์ถ”๊ฐ€

 

 <h1> &#128516;  </h1>
 <h1> &#128525;  </h1>
 <h1 style="font-size: 48px"> &#128151;  </h1>

  [ html ์ฝ”๋”ฉ ๊ทœ์น™(๊ฐ€์ด๋“œ) ]  

  1. ๋ฌธ์„œ ์œ ํ˜• ์„ ์–ธ DOCTYPE html  : ๋Œ€๋ฌธ์ž ๊ถŒ์žฅ

  2. ์š”์†Œ(ํƒœ๊ทธ) : ์†Œ๋ฌธ์ž ๊ถŒ์žฅ

  3. ๋ชจ๋“  ์š”์†Œ๊ฐ€ ์ข…๋ฃŒํƒœ๊ทธ๊ฐ€ ํ•„์š”ํ•œ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. 

     meta, br , hr , img X

   4. img src = ""          = ๋“ฑํ˜ธ ์—ฐ์‚ฐ์ž ์•ž ๋’ค์— ๊ณต๋ฐฑ ์‚ฌ์šฉ X

   5. p ํƒœ๊ทธ๋Š” ๋ฐ˜๋“œ์‹œ ์ข…๋ฃŒ ํƒœ๊ทธ๋ฅผ ์ฝ”๋”ฉํ•˜์ž. 

   ***** 6. ์š”์ฒญURL( ํด๋”๋ช…, ํŒŒ์ผ๋ช… )์€ ๋ฐ˜๋“œ์‹œ ๋Œ€์†Œ๋ฌธ์ž๋ฅผ ๊ตฌ๋ถ„ํ•œ๋‹ค. *****

   http://localhost/webPro/html/days05/ex06.html -> ์›น์„œ๋ฒ„(ํ†ฐ์บฃ) 

   7. ํŒŒ์ผ ํ™•์žฅ์ž :    .html             .htm

      ์™ธ๋ถ€ css ํŒŒ์ผ :  .css

      ์™ธ๋ถ€ js ํŒŒ์ผ   :   .js     

html Form(์–‘์‹)

    1. html form(์–‘์‹)ํƒœ๊ทธ๋Š” ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ์ˆ˜์ง‘ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ํƒœ๊ทธ.

       []

       []               -> ์ „์†ก ->                                     ์„œ๋ฒ„ ์ „์†ก

       []    

    2. form ํƒœ๊ทธ์— ์‚ฌ์šฉ๋˜๋Š” ์ž…๋ ฅํƒœ๊ทธ   

    3. ์„œ๋ฒ„ ์ „์†ก - ์„œ๋ธŒ๋ฐ‹( submit ) == ์ œ์ถœํ•˜๋‹ค. 

     

  <form action="ex08_ok.jsp"  method="get"> 
  <!-- <form  action="" method="get"> -->
     
     <label for="id">์•„์ด๋””</label> : <input type="text"   id="id" name="id" autofocus="autofocus"  placeholder="์•„์ด๋””๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”."><br>   
     <label for="passwd">๋น„๋ฐ€๋ฒˆํ˜ธ</label> : <input type="password"   id="passwd" name="passwd" maxlength="15" ><br>
     <input type="checkbox"  id="autosave" name="autosave"  value="y"><label for="autosave">์•„์ด๋”” ์ž๋™ ์ €์žฅ</label><br>
     
     <input type="submit" value="๋กœ๊ทธ์ธ">
     <input type="reset">
     
  </form>
method=get
http://localhost/webPro/html/days05/ex08_ok.jsp
?์š”์ฒญํŒŒ๋ผ๋ฏธํ„ฐ=๊ฐ’&์š”์ฒญํŒŒ๋ผ๋ฏธํ„ฐ=๊ฐ’&...

http://localhost/webPro/html/days05/ex08_ok.jsp
?      ์š”์ฒญ ํŒŒ๋ผ๋ฏธํ„ฐ ==  QueryString
id=admin
&
passwd=1234
&
autosave=y
<%
     // WAS
     // ์ž๋ฐ” ์ฝ”๋”ฉ~   [์Šคํฌ๋ฆฝํŠธ๋ฆฟ]
     String id = request.getParameter("id");
     String passwd = request.getParameter("passwd");

%>
                     <!-- ํ‘œํ˜„์‹ -->
> ์ž…๋ ฅํ•œ ์•„์ด๋”” : <%= id %><br>
> ์ž…๋ ฅํ•œ ๋น„๋ฐ€๋ฒˆํ˜ธ : <%=  passwd %><br>

-> ํŽ˜์ด์ง€ ๋ฆฌ์†Œ์Šค์—์„œ ์•ˆ๋ณด์ž„ = WAS๊ฐ€ JSP์•ˆ ์ž๋ฐ”ํŒŒ์ผ ์ปดํŒŒ์ผ

-> ์š”์ฒญ ๋ฐ›๋Š”๊ฒŒ WebServer

 

 

* autofocus - ์ปค์„œ ๊นœ๋นก

* type password, maxlength

* name ์†์„ฑ์œผ๋กœ ๋„˜๊ฒจ์คŒ

* input ํƒœ๊ทธ๋Š” ๋ฌด์กฐ๊ฑด form ํƒœ๊ทธ ์•ˆ์—!

**** action ์†์„ฑ๊ฐ’์ด ์—†๋Š” ๊ฒฝ์šฐ๋Š” ์ž๊ธฐ ์ž์‹  ์š”์ฒญ URL ์š”์ฒญํ•œ๋‹ค. (action=""์— ์•„๋ฌด๊ฒƒ๋„ ์•ˆ๋“ค์–ด์žˆ๋Š”๊ฒฝ์šฐ)

  <form action="ex08_ok.jsp"  method="get"> 
  <!-- <form  action="" method="get"> -->

 

get   : querystring(?) ๋„˜์–ด๊ฐ=๋ณด์•ˆ์— ๋ถˆ๋ฆฌ, https๋กœ ๋ฐ”๊พธ๋ฉด querystring ์•”ํ˜ธํ™”๋จ(ํ†ต์‹ ํ”„๋กœํ† ์ฝœ)
post : querystring(?) ์•ˆ๋„˜์–ด๊ฐ=๋ณด์•ˆ์— ์œ ๋ฆฌ, ์ฒจ๋ถ€ํŒŒ์ผ, 

**  label ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  ? ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅ ์š”์†Œ์— ์ดˆ์ ์„ ๋งž์ถ”๋ฉด
     ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ฐ€ ๋ ˆ์ด๋ธ”์„ ์†Œ๋ฆฌ๋‚ด์–ด ์ฝ์–ด์ฃผ๋Š” ์—ญํ• ๋„ ํ•˜๊ณ , ๋ผ๋””์˜ค๋ฒ„ํŠผ, ์ฒดํฌ๋ฐ•์Šค
     ๊ฐ€ ํ† ๊ธ€์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉํ•œ๋‹ค. 

 

** for ์†์„ฑ ์„ค์ • - ๋ฌถ์„ ์š”์†Œ๋ฅผ ์ง€์ •. (label๊ณผ input์„ ๋ฌถ์–ด์„œ ๋™๊ธฐํ™”, id ๊ฐ’์œผ๋กœ ๋ฌถ์Œ)

 

 

 

body

	<h3>ex08_02.html - html Form(์–‘์‹)</h3>

	<form id="form1" action="ex08_ok.jsp" method="get">

		<label for="id">์•„์ด๋””</label> : <input type="text" required="required"
			id="id" name="id" autofocus="autofocus" placeholder="์•„์ด๋””๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”."><br>
		<label for="passwd">๋น„๋ฐ€๋ฒˆํ˜ธ</label> : <input type="password" id="passwd"
			name="passwd" maxlength="15"><br> <input
			type="checkbox" id="autosave" name="autosave" value="y"><label
			for="autosave">์•„์ด๋”” ์ž๋™ ์ €์žฅ</label><br> ๋‚˜์ด : <input type="number"
			id="age" readonly="readonly" value="20" name="age" min="0" max="150"><br>
		์ด๋ฉ”์ผ : <input type="email" disabled="disabled"><br>

		<!-- <input type="submit" value="๋กœ๊ทธ์ธ"> -->

		<input type="button" value="๋กœ๊ทธ์ธ" onclick="server_submit();"> <input
			type="reset">

	</form>

- required / placeholder / autofocus / maxlength / readonly / disabled /  

- submit -> ์„œ๋ฒ„๋กœ ์ž…๋ ฅ๊ฐ’ ์ œ์ถœ

  button  -> onclick ์†์„ฑ ์ค˜์„œ js ํ˜ธ์ถœํ•ด์•ผํ•จ (server_submit())

  <script>
      function server_submit(){
    	  // console.log("์ผ๋ฐ˜ ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ ํด๋ฆญํ•จ!!!");
    	  var f1 = document.getElementById("form1");
    	  
    	  // js    submit() ํ•จ์ˆ˜
    	  f1.submit();
      }
  </script>

 

 

 

	<form action="ex08_02_ok.jsp">
		์†Œ์œ ํ•œ ์ž๋™์ฐจ๋ฅผ ์„ ํƒํ•˜์„ธ์š”. <br>
		<!-- ๋‹ค์ค‘ ์„ ํƒ  multiple="multiple"-->
		<select name="cars" id="cars" >

			<optgroup label="๊ตญ์™ธ">
				<option value="1">BMW</option>
				<!-- value ์†์„ฑ๊ฐ’์„ ์ƒ๋žตํ•˜๋ฉด ํ…์ŠคํŠธ๊ฐ’๊ณผ ๋™์ผํ•˜๋‹ค. -->
				<option value="AUDI">AUDI</option>
				<option>VOLVO</option>
			</optgroup>
			<optgroup label="๊ตญ๋‚ด">
				<!-- ์ด ์˜ต์…˜์„ ๊ธฐ๋ณธ์œผ๋กœ ์„ ํƒ(select) ํ•ด ๋†“๊ณ  ์‹ถ๋‹ค. -->
				<option selected="selected">KIA</option>
				<option selected="selected">SM</option>
			</optgroup>

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

 - select, option

์ €์ž‘์žํ‘œ์‹œ

'๐Ÿ‘จโ€๐Ÿ’ป Web Development > HTML | CSS | JS | jQuery' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Day1] CSS 1 - ๊ฐœ์š”, ์Šคํƒ€์ผ ์ ์šฉ ๋ฐฉ๋ฒ•  (0) 2022.11.10
[Day6] HTML 6 - div ํŽ˜์ด์ง€, ๋ฐ˜์‘ํ˜•์›น, form, canvas,svg, ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด, youtube  (0) 2022.11.10
[Day4] HTML 4 - ul,li, div, jquery, emmet  (0) 2022.11.07
[Day3] HTML 3 - ์ด๋ฏธ์ง€, ์ด๋ฏธ์ง€๋งต, picture, favicon,table  (0) 2022.11.07
[Day2] HTML 2 - ์—ฌ๋Ÿฌ๊ฐ€์ง€ ํƒœ๊ทธ  (0) 2022.11.06
  • ๋„ค์ด๋ฒ„ ๋ธ”๋Ÿฌ๊ทธ ๊ณต์œ ํ•˜๊ธฐ
  • ๋„ค์ด๋ฒ„ ๋ฐด๋“œ์— ๊ณต์œ ํ•˜๊ธฐ
  • ํŽ˜์ด์Šค๋ถ ๊ณต์œ ํ•˜๊ธฐ
  • ์นด์นด์˜ค์Šคํ† ๋ฆฌ ๊ณต์œ ํ•˜๊ธฐ
๐Ÿ‘จ‍๐Ÿ’ป Web Development/HTML | CSS | JS | jQuery ๊ด€๋ จ ๊ธ€
๊ธ€ ๋”๋ณด๊ธฐ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”