[Day4] HTML 4 - ul,li, div, jquery, emmet

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

[Day4] HTML 4 [11/7]

 

--๋ณต์Šต--

   <style>
   p{
      background-image: url(''๊ฒฝ๋กœURL);
      width:  px;
      height: cm;
      border:1px solid gary;
      font-size: ;
      padding:
      margin:0 auto;
   }
   </style>

 

- ๊ฒฐ๊ณผ ์ด๋ฏธ์ง€๋ฅผ ๋ณด๊ณ  <style> ํƒœ๊ทธ๋ฅผ ์ž‘์„ฑํ•˜์„ธ์š”.

<style>
  table{
    width:100%;
    border:1px solid #ddd;
    border-collapse: collapse;
  }
  th, td{
     border:1px solid #ddd;
     padding: 8px;
     text-align: left;
  }
  
  tr:nth-child(even){
     background-color: #ddd;
  }
</style>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<style>
  table{
    width: 100%;
  }
  th, td{
     border:1px solid #96D4D4;
     border-radius: 10px;
  }
</style>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<table>
  <tr>
    <th colspan="3">2022๋…„</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <!-- align="center"  valign="middle" --> 
    <td style="text-align: center;" rowspan="2" colspan="2">์ถ•์ œ</td> 
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
  </tr>
  </table>

<style>
   table{
      board:1px solid black;
      border-collapse: collapse;
      width:100%;
   }
   th, td{
      border:1px solid black;
   }   
   tr:nth-child(even), th:nth-child(even),  td:nth-child(even){
     /* background-color: rgb(150, 212,212); + ์•ŒํŒŒ(a)==ํˆฌ๋ช…๋„ 0~1*/
     background-color: rgba(150, 212,212,0.4);
   }
   
   /*
   th:nth-child(even),  td:nth-child(even){
       background-color: rgba(150, 212,212,0.4);
   }
   */
</style>
<table>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
    <th>FRI</th>
    <th>SAT</th>
    <th>SUN</th>
  </tr>
  <!-- tr*5>td*7>{&nbsp;} -->
  <tr>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  </tr>
  <tr>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  </tr>
  <tr>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  </tr>
  <tr>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  </tr>
  <tr>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  	<td>&nbsp;</td>
  </tr>
</table>

<style>
  table{
    width: 100%;
    border-collapse: collapse;
  }
  th, td{
     /* border:1px solid #ddd; */
     border-bottom: 1px solid #ddd;
  }
  
  /* css ์„ ํƒ์ž(selector)             :not() */
  tr:hover:not(tr:first-child){
     background-color: #d6eeee;
  }
</style>
<table>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Points</th>
		</tr>
		<tr>
			<td>Peter</td>
			<td>Griffin</td>
			<td>$100</td>
		</tr>
		<tr>
			<td>Lois</td>
			<td>Griffin</td>
			<td>$150</td>
		</tr>
		<tr>
			<td>Joe</td>
			<td>Swanson</td>
			<td>$300</td>
		</tr>
		<tr>
			<td>Cleveland</td>
			<td>Brown</td>
			<td>$250</td>
		</tr>
	</table>

 

- ํ…Œ์ด๋ธ”์˜ ๋„ˆ๋น„๋ฅผ 100%๋กœ ์„ค์ •ํ•˜๊ณ , ์ฒซ ๋ฒˆ์งธ ์—ด์˜ ๋„ˆ๋น„๋ฅผ ํ…Œ์ด๋ธ”์˜ 70%๋กœ ์„ค์ •ํ•˜๊ณ , ๋‘ ๋ฒˆ์งธ ํ–‰์˜ ๋†’์ด๋ฅผ 100px๋กœ ์„ค์ •ํ•˜๋Š” ์ฝ”๋”ฉ์„ ํ•˜์„ธ์š”.

<table>
  <tr>
    <th style="width: 70%">Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr style="height: 100px">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

- ์œ„์˜ ํ…Œ์ด๋ธ”(13)์˜ ์ฒซ ๋ฒˆ์งธ, ๋‘ ๋ฒˆ์งธ ์—ด์˜ ์Šคํƒ€์ผ(๋ฐฐ๊ฒฝ์ƒ‰ ๋นจ๊ฐ•)์„ ์ง€์ •๋Š” ์ฝ”๋”ฉ์„ ํ•˜์„ธ์š”.

<table>
	   <!-- 
	   caption: ์บก์…˜,    (์‚ฌ์ง„์‚ฝํ™” ๋“ฑ์— ๋ถ™์ธ ์„ค๋ช… )
	   ํ…Œ์ด๋ธ” ๋ถ™์ธ ์„ค๋ช…
	    -->
	   <caption>ํ…Œ์ด๋ธ” ์„ค๋ช…</caption>
	   <!-- ํ–‰์ด ์•„๋‹ˆ๋ผ ์—ด์— ์Šคํƒ€์ผ ์ง€์ •ํ•˜๊ณ ์žํ•œ๋‹ค๋ฉด --> 
	   <!-- ์ฃผ์˜ํ• ์ : ์ œํ•œ์ ์ด๋‹ค.( backgroud, width, border, visibility ์†์„ฑ) -->
	   <!-- visibility: collapse์†์„ฑ ์„ ์‚ฌ์šฉํ•˜์—ฌ ์—ด์„ ์ˆจ๊ธธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค . -->
	   <colgroup>
	     <col span="2" style="background-color: red">
	     <col style="background-color: blue">
	   </colgroup>
	   
		<tr>
			<th  style="background-color: red">First Name</th>
			<th>Last Name</th>
			<th>Points</th>
		</tr>
		<tr>
			<td  style="background-color: red">Peter</td>
			<td style="background-color: red">Griffin</td>
			<td>$100</td>
		</tr>
		<tr>
			<td  style="background-color: red">Lois</td>
			<td  style="background-color: red">Griffin</td>
			<td>$150</td>
		</tr>
		<tr>
			<td  style="background-color: red">Joe</td>
			<td  style="background-color: red">Swanson</td>
			<td>$300</td>
		</tr>
		<tr>
			<td  style="background-color: red">Cleveland</td>
			<td  style="background-color: red">Brown</td>
			<td>$250</td>
		</tr>
	</table>

- caption : ํ…Œ์ด๋ธ” ์„ค๋ช…

- colgroup : ํ…Œ์ด๋ธ”์˜ ์นผ๋Ÿผ(์—ด) ๊ทธ๋ฃน

   col : ์นผ๋Ÿผ(์—ด)๋‹จ์œ„ ๊ด€๋ฆฌ

- ํ…Œ์ด๋ธ” ํŒจ๋”ฉ ๋ฐ ๊ฐ„๊ฒฉ

<body>
	<!-- table>tr*3>td*3>{ํ™๊ธธ๋™} -->
	<table border="1" bordercolor="red" cellpadding="10px"  cellspacing="10px">
	 <!-- cellpadding="10px" ์†์„ฑ : ์…€์˜ ๊ฐ€์žฅ์ž๋ฆฌ์™€ ์…€ ๋‚ด์šฉ ์‚ฌ์ด์˜ ๊ณต๊ฐ„ -->
	 <!-- cellspacing="10px" ์†์„ฑ : ์…€๊ณผ ์…€ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ -->
		<tr>
			<td>ํ™๊ธธ๋™</td>
			<td>ํ™๊ธธ๋™</td>
			<td>ํ™๊ธธ๋™</td>
		</tr>
		<tr>
			<td>ํ™๊ธธ๋™</td>
			<td>ํ™๊ธธ๋™</td>
			<td>ํ™๊ธธ๋™</td>
		</tr>
		<tr>
			<td>ํ™๊ธธ๋™</td>
			<td>ํ™๊ธธ๋™</td>
			<td>ํ™๊ธธ๋™</td>
		</tr>
	</table>
</body>

 -----

<style>
  table, th, td{
     /* border="1" bordercolor="red"  */
     border:1px solid red;
  }
  
   /* cellpadding="10px"  */
  th, td{
     padding: 10px;
  }
  
  /* cellspacing="10px" */
  table{
     border-spacing: 10px;
  }
</style>
<table>
		<tr>
			<td>ํ™๊ธธ๋™</td>
			<td>ํ™๊ธธ๋™</td>
			<td>ํ™๊ธธ๋™</td>
		</tr>
		<tr>
			<td>ํ™๊ธธ๋™</td>
			<td>ํ™๊ธธ๋™</td>
			<td>ํ™๊ธธ๋™</td>
		</tr>
		<tr>
			<td>ํ™๊ธธ๋™</td>
			<td>ํ™๊ธธ๋™</td>
			<td>ํ™๊ธธ๋™</td>
		</tr>
	</table>

ํ…Œ์ด๋ธ” ์˜ˆ์‹œ)

<table style="width:100%;border:1px solid red">
   <tr style="height:150px;">
      <td>
        <h1>TOP</h1>
      </td>
   </tr>
   <tr>
     <td>
       <table style="width:100%">
	      <tr>
		       <td style="width:150px"></td>
		     <td align="left">
		     <a href="#"><img style="width:22px;height:22px" alt="" src="http://ojsimg.ohmynews.com/images/ohmynews/common/tts.svg">๋ณธ๋ฌธ๋“ฃ๊ธฐ</a>
		     </td>
		     <td align="right">
		     52 12
		     </td>
	     </tr>
       </table>
     </td>
   </tr>
</table>

<hr>
<table style="width:100%;border:1px solid red">
   <tr style="height:150px;">
      <td colspan="3">
        <h1>TOP</h1>
      </td>
   </tr>
   <tr>
     <td style="width:150px"></td>
     <td align="left">
     <a href="#"><img style="width:22px;height:22px" alt="" src="http://ojsimg.ohmynews.com/images/ohmynews/common/tts.svg">๋ณธ๋ฌธ๋“ฃ๊ธฐ</a>
     </td>
     <td align="right">
     52 12
     </td>
   </tr>
</table>

-> table ์•ˆ์“ฐ๊ณ  position ํƒœ๊ทธ๋กœ div ์œ„์น˜ ๋ฐ”๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Œ !

์ด๋ ‡๊ฒŒ ํ•˜๋Š”๊ฒŒ ๋” ์ข‹์Œ, table์€ ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ํž˜๋“ค์–ด!

- ๋ชจ๋“  td  align="center" 
- ํ…Œ์ด๋ธ”์˜ ๋„ˆ๋น„๋Š” ์„ค์ • O,  ์…€์˜ ๋„ˆ๋น„๋ฅผ ์„ค์ • X 
- ํ…Œ์ด๋ธ”์˜ ๋†’์ด๋Š” ๋‚ด์šฉ์ด ์ž‘์„ ๋•Œ๋Š” 200px ์œ ์ง€ํ•˜์ง€๋งŒ ๋‚ด์šฉ์ด ๋งŽ์„ ๋•Œ๋Š” ๋†’์ด๋Š” ์˜๋ฏธ๊ฐ€ ์—†์–ด์ง„๋‹ค. 
- ํ…Œ์ด๋ธ”์˜ ๋„ˆ๋น„,๋†’์ด,  ์…€์˜ ๋„ˆ๋น„, ๋†’์ด๋ฅผ ์„ค์ •ํ•˜๋”๋ผ๋„ ์•ŒํŒŒ๋ฒณ, ์ˆซ์ž ์ธ ๊ฒฝ์šฐ์—๋Š” ๊นจ์ง€๋”๋ผ.
- ๋ฌธ์ œ์  ํ•ด๊ฒฐ -> css ์ˆ˜์—….

<style>
   table{
     width:200px;
     height:200px;
     text-align: center;
   }
   table, th, td{
     border:1px solid gray;
   }
</style>
<!-- table>tr*2>td*2>{$} -->
<table>
	<tr>
		<td style="width: 50%;height:50%">ใ„ฑใ„ดใ„ทใ„น ใ… ใ…‚ ใ……ใ…‡ ใ…ˆ ใ…Š ใ…‹ ใ…Œ ใ… ใ…Ž ใ„ฑใ„ดใ„ทใ„น ใ… ใ…‚ ใ……ใ…‡ ใ…ˆ ใ…Š ใ…‹ ใ…Œ ใ… ใ…Ž</td>
		<!-- <td style="width: 50%;height:50%">123456789012345678901234567890123456789012345678901234567890</td> -->
		<td style="width: 50%;height:50%">1234</td>
	</tr>
	<tr>
		<td style="width: 50%;height:50%">ใ„ฑใ„ดใ„ทใ„น ใ… ใ…‚ ใ……ใ…‡ ใ…ˆ ใ…Š ใ…‹ ใ…Œ ใ… ใ…Ž ใ„ฑใ„ดใ„ทใ„น ใ… ใ…‚ ใ……ใ…‡ ใ…ˆ ใ…Š ใ…‹ ใ…Œ ใ… ใ…Ž</td>
		<td style="width: 50%;height:50%">abcdefghijklmnopqrstuvwxyz</td>
	</tr>
</table>
<hr>
<table>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
</table>

html - ๋ชฉ๋ก(list)

 

์›น ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ชฉ๋ก์˜ ๊ด€๋ จ๋œ ํ•ญ๋ชฉ ์ง‘ํ•ฉ์„ ๊ทธ๋ฃนํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ํƒœ๊ทธ - ๋ชฉ๋กํƒœ๊ทธ

- ์ˆœ์„œ ์žˆ๋Š” ๋ชฉ๋ก( ordered list== ol ํƒœ๊ทธ)

- ์ˆœ์„œ ์—†๋Š” ๋ชฉ๋ก(unordered list == ul ํƒœ๊ทธ)

- li == list item == ๋ชฉ๋ก ์•„์ดํ…œ(ํ•ญ๋ชฉ)

 

<ol type="i">
  <li>๊น€๊ฐ€์œจ</li>
  <li>์กฐ๋ฏผ๊ฒฝ</li>
  <li>์ž„ํฌ์ง„</li>
  <li>์ด์žฌ๋ฏผ</li>
  <li>์—„ํƒœํ˜</li>
  <li>ํ™ฉ์ˆ˜๋นˆ</li>
  <li>๋ฐ•ํ˜œ์€</li>
</ol>

 <!-- ul type ์†์„ฑ =   disk(๊ธฐ๋ณธ๊ฐ’) , circle, square -->
<ul type="square">
  <li>๊น€๊ฐ€์œจ</li>
  <li>์กฐ๋ฏผ๊ฒฝ</li>
  <li>์ž„ํฌ์ง„</li>
  <li>์ด์žฌ๋ฏผ</li>
  <li>์—„ํƒœํ˜</li>
  <li>ํ™ฉ์ˆ˜๋นˆ</li>
  <li>๋ฐ•ํ˜œ์€</li>
</ul>

- ์ค‘์ฒฉ ๋ชฉ๋ก

	<!-- ol>li*5>{item-$} -->
	<ol start="21">
		<li>item-1</li>
		<li>item-2</li>
		<li type="A">item-3</li>
		<li>item-4</li>
		<li>item-5</li>
	</ol>

 

- li ํƒœ๊ทธ ์•ˆ์— ์ƒˆ๋กœ์šด ๋ชฉ๋ก ๋˜๋Š” ์ด๋ฏธ์ง€ ๋˜๋Š” ๋งํฌ ํƒœ๊ทธ๊ฐ€ ํฌํ•จ๋  ์ˆ˜ ์žˆ๋‹ค.

	<!-- ol>li*3>{$์กฐ} -->
	<ul>
		<li>1์กฐ
			<ol type="i">
			    <li><a href="#">1์กฐ ํŒ€ ์›น ์‚ฌ์ดํŠธ</a></li>
				<li>๊น€๊ฐ€์œจ
				   <ol>
				       <li>ํŒ€์žฅ</li>
				       <li>์˜ค๋ผํด</li>
				   </ol>
				</li>
				<li>์กฐ๋ฏผ๊ฒฝ</li>
				<li>์ž„ํฌ์ง„</li>
				<li>์ด์žฌ๋ฏผ</li>
				<li>์—„ํƒœํ˜</li>
				<li>ํ™ฉ์ˆ˜๋นˆ</li>
				<li>๋ฐ•ํ˜œ์€</li>
			</ol>
		</li>
		<li>2์กฐ
			<ol type="i">
				<li>๊น€๊ฐ€์œจ</li>
				<li>์กฐ๋ฏผ๊ฒฝ</li>
				<li>์ž„ํฌ์ง„</li>
				<li>์ด์žฌ๋ฏผ</li>
				<li>์—„ํƒœํ˜</li>
				<li>ํ™ฉ์ˆ˜๋นˆ</li>
				<li>๋ฐ•ํ˜œ์€</li>
			</ol>
		</li>
		<li>3์กฐ
			<ol type="i">
				<li>๊น€๊ฐ€์œจ</li>
				<li>์กฐ๋ฏผ๊ฒฝ</li>
				<li>์ž„ํฌ์ง„</li>
				<li>์ด์žฌ๋ฏผ</li>
				<li>์—„ํƒœํ˜</li>
				<li>ํ™ฉ์ˆ˜๋นˆ</li>
				<li>๋ฐ•ํ˜œ์€</li>
			</ol>
		</li>
	</ul>

ex05.html - Navigation(ํ•ญํ•ด) Menu  ( ๋ณต์Šต๋ฌธ์ œ )

<style>
   body{
      /* border:1px solid red; */
      padding: 0;
      margin: 0;      
   }
   
   ul, li{
      /* border:1px solid gray;  */
      /* ๋ธ”๋Ÿญ๋ชจ๋“œ */
   }
   
   ul{
      /* list-style-type: decimal; */
      list-style-type: none;
      padding: 0;
      margin: 0;
      /* border: 2px solid red; */ 
      background-color: #333;
   
      overflow: hidden;       /* ์ด๋Ÿฐ ์ƒํ™ฉ์— ์ด ์†์„ฑ  ()์•”๊ธฐ)  */   
   }
   
   li{
     /*  margin: 0; */
     float: left;
   }
   
  /* ๋ธ”๋Ÿญ๋ชจ๋“œ, ์ธ๋ผ์ธ๋ชจ๋“œ */
  /* a ํƒœ๊ทธ :  ์ธ๋ผ์ธ๋ชจ๋“œ์ด๊ธฐ ๋•Œ๋ฌธ์— width ์†์„ฑ ์„ค์ • X -> ๋ธ”๋Ÿญ๋ชจ๋“œ ๋ณ€๊ฒฝ */ 
  ul li a{
     color: white;
     /* background-color: red; */
     /* width:300px; */
     display: block;
     text-align: center;
     text-decoration: none;
     padding: 16px;
  }
  
  ul li a:hover{
      background-color: #111;
      color:orange; 
  }
  
  ul li:nth-child(1){
    background-color: red;
  }
</style>
<body>
<!-- ul>li*4>a[href='#'] -->
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">About</a></li>
</ul>
</body>

- float : ๋ฉ”๋‰ด ์˜†์œผ๋กœ (๋‘ฅ๋‘ฅ)

- overflow : ์˜†์œผ๋กœ ๋งŒ๋“ค์—ˆ์„๋•Œ ul ํƒœ๊ทธ overflow ์—†์• ์ฃผ๊ธฐ

 

 

 html ๋ชฉ๋ก - ol, ul, li

+ dl ( definition or description list ), dt, dd

+ dt ( term or subject in a definition or description list )

                  ์šฉ์–ด ๋˜๋Š” ์ œ๋ชฉ       dl ํƒœ๊ทธ ์•ˆ์—์„œ 

+ dd ( A definition or description in a definition or description list )

 <dl>
    <dt>html</dt>
    <dd>hypertext markup language</dd>
    <dt>jsp</dt>
    <dd>java server page</dd> 
 </dl>

  1. ๋ชจ๋“  html ์š”์†Œ(ํƒœ๊ทธ)์—๋Š” ์š”์†Œ ์œ ํ˜•์— ๋”ฐ๋ผ ๊ธฐ๋ณธ ํ‘œ์‹œ( display )๊ฐ’์ด ์žˆ๋‹ค.

  2. ํ‘œ์‹œ( display) 

       ใ„ฑ) ๋ธ”๋Ÿญ๋ชจ๋“œ -  ์ „์ฒด ๋„ˆ๋น„, : p, li, hn, dl, dt,dd, ol,ul,li, hr, blockquote,    [div] ๋“ฑ๋“ฑ

       ใ„ด) ์ธ๋ผ์ธ๋ชจ๋“œ - ์ƒˆ ๋ผ์ธ(์ค„)์—์„œ ์‹œ์ž‘ X, ํ•„์šฉํ•œ ๋„ˆ๋น„ ๋งŒํผ๋งŒ ์ฐจ์ง€.

                                 : img, a, span, i, q,sub,sup, b,   button, input ๋“ฑ๋“ฑ                                  

    ์ฐธ๊ณ ) ์ธ๋ผ์ธ ์š”์†Œ(ํƒœ๊ทธ) ๋Š”  ๋ธ”๋ก ์ˆ˜์ค€ ์š”์†Œ(ํƒœ๊ทธ)๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์—†๋‹ค. 

    

   3. div ์š”์†Œ                                           /              span ์š”์†Œ

      1) ์›น ํŽ˜์ด์ง€์˜ ๋ฐฐ์น˜( layout )

      2) ๋ธ”๋Ÿญ ๋ชจ๋“œ

      3) ๋‹ค๋ฅธ html ์š”์†Œ์˜ ์ปจํ…Œ์ด๋„ˆ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.

* span : ์ธ๋ผ์ธ,  ํ…์ŠคํŠธ ์ปจํ…Œ์ด๋„ˆ๋กœ ์‚ฌ์šฉ

 

   4. ์š”์†Œ - ํ•„์ˆ˜ ์†์„ฑ         id, class, style ๊ณตํ†ต

 

<style>
  span{
     border: 1px solid gray;
     width:200px;
     display:  inline-block; 
     text-align: center;
  }
</style>

* ์ธ๋ผ์ธ ์œ ์ง€ํ•˜๋˜ ๋ธ”๋Ÿญ๋ชจ๋“œ(width ๊ฐ’ ์ฃผ๊ธฐ ์œ„ํ•ด)

 

์‚ฌ์šฉ์ž๊ฐ€ ๋ฒ„ํŠผ ๋ˆ„๋ฅด๋ฉด ์ˆจ๊ธฐ๊ธฐ

<button onclick="spanHide();">์ˆจ๊ธฐ๊ธฐ(hide)</button>
<button onclick="spanShow();">๋ณด์ด๊ธฐ(show)</button>
<br>
<br>
<span id="sp01" >๊น€๊ฐ€์œจ</span><br> 
<span id="sp02">์กฐ๋ฏผ๊ฒฝ</span><br> 
<span id="sp03">์ž„ํฌ์ง„</span><br> 
<span id="sp04">์ด์žฌ๋ฏผ</span><br> 
<span id="sp05">์—„ํƒœํ˜</span><br> 
<span id="sp06">ํ™ฉ์ˆ˜๋นˆ</span><br> 
<span id="sp07">๋ฐ•ํ˜œ์€</span><br>

JS

    // js ์ฝ”๋”ฉํ•˜๋Š” ์˜์—ญ
    // js ํ•จ์ˆ˜ ์„ ์–ธ - 3๊ฐ€์ง€ ๊ณ ๋ ค( ๊ธฐ๋Šฅ, ๋งค๊ฐœ๋ณ€์ˆ˜, ๋ฆฌํ„ด๊ฐ’ )
    // [js ๋Œ€์†Œ๋ฌธ์ž ๊ตฌ๋ถ„ํ•œ๋‹ค. ]

<script>
    function spanHide() {
		// window.alert("์ˆจ๊ธฐ๊ธฐ ๋ฒ„ํŠผ ํด๋ฆญ๋จ!!!");
		
		// js ํŽ˜์ด์ง€ ์ด๋™
		// document.location = "http://www.naver.com";		
		// location.href = "http://www.naver.com";
		
		// js๋กœ  span ์š”์†Œ๋ฅผ ์–ป์–ด์™€์„œ ์ˆจ๊ฒจ๋ผ. 
		// style="display: none;" ์ด ์ฝ”๋”ฉ์„ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ๋กœ ์ˆ˜์ •
		document.getElementById("sp01").style.display = "none";
		document.getElementById("sp02").style.display = "none";
		document.getElementById("sp03").style.display = "none";
		document.getElementById("sp04").style.display = "none";
		document.getElementById("sp05").style.display = "none";
		document.getElementById("sp06").style.display = "none";
		document.getElementById("sp07").style.display = "none";
		
	    window.alert("1์กฐ์› ์ˆจ๊น€!!!");
	} 
    
    function spanShow() { 
		document.getElementById("sp01").style.display = "inline-block";
		document.getElementById("sp02").style.display = "inline-block";
		document.getElementById("sp03").style.display = "inline-block";
		document.getElementById("sp04").style.display = "inline-block";
		document.getElementById("sp05").style.display = "inline-block";
		document.getElementById("sp06").style.display = "inline-block";
		document.getElementById("sp07").style.display = "inline-block";
		
	    window.alert("1์กฐ์› ๋‚˜ํƒ€๋ƒ„!!!");
	} 
</script>
<script> 
   function spanHide(){
	   // ์š”์†Œ๋ฅผ ์–ป์–ด์˜ค๋Š” 1๋ฒˆ์งธ ๋ฐฉ๋ฒ•   getElementById(id);
	   // ์š”์†Œ๋ฅผ ์–ป์–ด์˜ค๋Š” 2๋ฒˆ์งธ ๋ฐฉ๋ฒ•   getElementsByTagName(tagName);
	   var spans = document.getElementsByTagName("span");	   
	   //window.alert( spans.length );
	   for (var i = 0; i < spans.length; i++) {		
		   spans[i].style.display = "none";
	  } // for
	   
   }
   function spanShow(){
	   var spans = document.getElementsByTagName("span");	    
	   for (var i = 0; i < spans.length; i++) {		
		   spans[i].style.display = "inline-block";
	  } // for
	   
   }
</script>

-> better ์ฝ”๋”ฉ

<button onclick="spanHide();">์ˆจ๊ธฐ๊ธฐ(hide)</button>
<button onclick="spanShow();">๋ณด์ด๊ธฐ(show)</button>
<br>
<br>
<div id="team01">
	<span id="sp01" >๊น€๊ฐ€์œจ</span><br> 
	<span id="sp02">์กฐ๋ฏผ๊ฒฝ</span><br> 
	<span id="sp03">์ž„ํฌ์ง„</span><br> 
	<span id="sp04">์ด์žฌ๋ฏผ</span><br> 
	<span id="sp05">์—„ํƒœํ˜</span><br> 
	<span id="sp06">ํ™ฉ์ˆ˜๋นˆ</span><br> 
	<span id="sp07">๋ฐ•ํ˜œ์€</span><br> 
</div>
<script> 
    function spanHide() { 
		document.getElementById("team01").style.display = "none";		
	} 
    
    function spanShow() { 
		document.getElementById("team01").style.display = "block"; 
	} 
</script>

-> ๋‹ค๋ฅธ ๋ฐฉ์‹

 js ์ฝ”๋”ฉ์„        jquery ์ฝ”๋”ฉ์œผ๋กœ ์ˆ˜์ •

 jQuery ๋Š” js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. 

         

         1) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ถ”๊ฐ€

            https://jquery.com/

-> google cdn -> 3.x ์Šค๋‹ˆํŽซ -> ํ…œํ”Œ๋ฆฟ์— ์ถ”๊ฐ€ํ•˜๊ธฐ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<button id="btnHide" >์ˆจ๊ธฐ๊ธฐ(hide)</button>
<button id="btnShow">๋ณด์ด๊ธฐ(show)</button>

<br>
<br> 
 
	<span id="sp01" >๊น€๊ฐ€์œจ</span><br> 
	<span id="sp02">์กฐ๋ฏผ๊ฒฝ</span><br> 
	<span id="sp03">์ž„ํฌ์ง„</span><br> 
	<span id="sp04">์ด์žฌ๋ฏผ</span><br> 
	<span id="sp05">์—„ํƒœํ˜</span><br> 
	<span id="sp06">ํ™ฉ์ˆ˜๋นˆ</span><br> 
	<span id="sp07">๋ฐ•ํ˜œ์€</span><br>
<script> 
    // ๊ธฐ์–ต)  script ํƒœ๊ทธ๋Š” ํ•ญ์ƒ     /body ์œ„์— ์ฝ”๋”ฉ.
    // js ์ˆจ๊ธฐ๊ธฐ ๋ฒ„ํŠผ ์–ป์–ด์˜ฌ๋•Œ๋Š”     document.getElementById("btnHide")
    // $ == jQuery
    $("#btnHide").click(  function (){   // ์ต๋ช… ํ•จ์ˆ˜
    	// window.alert("ํด๋ฆญ ์ด๋ฒคํŠธ ํ™•์ธ!!!");
       /*
    	 var spans = document.getElementsByTagName("span");	    
	   	 for (var i = 0; i < spans.length; i++) {		
	   		   spans[i].style.display = "none";
	   	  } // for
   	   */
   	   
   	   // jquery ํ•จ์ˆ˜ : css(์†์„ฑ๋ช…, ์†์„ฑ๊ฐ’);
   	   $("span").css("display", "none");
    } );
    
    $("#btnShow").click(  function (){   // ์ต๋ช… ํ•จ์ˆ˜ 
   	   $("span").css("display", "inline-block");
    } );
</script>

1. https://ko.wikipedia.org/wiki/%EC%97%90%EB%B0%8B_(%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4)

2. ์—๋ฐ‹(Emmet)์€ HTML, XML, XSL ๋ฌธ์„œ ๋“ฑ์„ ํŽธ์ง‘ํ•  ๋•Œ ๋น ๋ฅธ ์ฝ”๋”ฉ์„ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ์ด๋‹ค. 

3. ์›๋ž˜ ์  ์ฝ”๋”ฉ(Zen Coding)์œผ๋กœ ๋ถ€๋ฅด๋‹ค๊ฐ€ ์—๋ฐ‹(Emmet)์œผ๋กœ ์ด๋ฆ„์„ ๋ณ€๊ฒฝํ–ˆ๋‹ค.

4. [1] ๋งค์šฐ ๊ฐ„๋‹จํ•œ ๋ช‡ ๊ฐ€์ง€ ์ฝ”๋“œ๋งŒ ์ž…๋ ฅํ•˜๋ฉด, ์ž๋™์œผ๋กœ ์™„์ „ํ•œ HTML ์ฝ”๋“œ๋ฅผ ์ƒ์„ฑํ•ด ์ค€๋‹ค.

5. https://emmet.io/

6. Installation

ใ„ฑ. Go to Help > Install New Software… in your Eclipse IDE

ใ„ด. Add http://download.emmet.io/eclipse/updates/ in update sites

ใ„ท. Check Emmet for Eclipse group in available plugins list, click Next button and follow the installation instructions

ใ„น. Restart Eclipse

 7. Emmet์€ css selector์™€ ์œ ์‚ฌํ•œ ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•œ๋‹ค.    

     Ctrl + E

 

์ค‘์ฒฉ์—ฐ์‚ฐ์ž 

      1.   >   ์ž์†(์ง๊ณ„์ž์‹)

      2.  +   ํ˜•์ œ์ž๋งค( ๋™์ผํ•œ ์ˆ˜์ค€์˜ ์š”์†Œ )

      3.  ^    ์ƒ์œ„ ์ˆ˜์ค€(๋“ฑ๋ฐ˜)

      4.  ()

<!-- div>ul -->
<div>
	<ul></ul>
</div>

<!-- div>ul>li -->
<div>
	<ul>
		<li></li>
	</ul>
</div>

<!-- div+ul -->
<div></div>
<ul></ul>

<!-- div+ul+ol -->
<div></div>
<ul></ul>
<ol></ol>

<!-- div+p+bq -->
<div></div>
<p></p>
<blockquote>๊ธด์ธ์šฉ๋ฌธ</blockquote>

<!-- 
<div>
	<p></p>
</div>
<p></p>
 -->
 <!-- div>p+p -->
 <div>
 	<p></p>
 	<p></p>
 </div>
 
 <!-- div>p^p -->
 <div>
 	<p></p>
 </div>
 <p></p>
 
 <!-- 
 <div>
   <p>
       <ul></ul>
   </p>   
 </div>
 <p></p>
  -->
  <!-- div>p>ul^^p -->
  <div>
  	<p>
  		<ul></ul>
  	</p>
  </div>
  <p></p>
  
  <!-- div+div>p>span+em^bq -->
  <div></div>
  <div>
  	<p><span></span><em></em></p>
  	<blockquote></blockquote>
  </div>
  
  <!-- div>ul>li+li+li+li+li -->
  <div>
  	<ul>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ul>
  </div>
  
  <!-- div>ul>li*5  (ํšŸ์ˆ˜) -->
  <div>
  	<ul>
  		<li>ํ™๊ธธ๋™1</li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ul>
  </div>
  
  <!-- ul>li*5>{ํ™๊ธธ๋™-} -->
  <!-- ul>li*5>{ item-$ } -->
  <!-- ul>li*5>{ item-$ } -->
  <!-- ul>li*5>{ item-$$$ } -->
  <ul>
  	<li> item-001 </li>
  	<li> item-002 </li>
  	<li> item-003 </li>
  	<li> item-004 </li>
  	<li> item-005 </li>
  </ul>

<!-- ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ -->

์˜๋ฏธ๊ฐ€ ๋ถ€์—ฌ๋œ ํƒœ๊ทธ

<div>
  <header>
     <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
     </ul>
  </header>
  <footer>
     <p></p>
  </footer>
</div>

๊ทธ๋ฃนํ™”

<!-- div>header>ul>li*2>a^^^footer>p -->
<div>
	<header>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</header>
	<footer>
		<p></p>
	</footer>
</div>
</body>
</html>

<!-- ํ•˜์œ„ ๊ทธ๋ฃนํ™” -->
<!-- div>(header>ul>li*2>a)+(footer>p) -->
<div>
	<header>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</header>
	<footer>
		<p></p>
	</footer>
</div>

<!-- ^^^          () -->

<!-- table>(tr>th*3)+(tr>td*3)*3 -->
<!-- table>(tr>th*3)+tr*3>td*3 -->

<table>
   <tr>
   	<th></th>
   	<th></th>
   	<th></th>
   </tr>   
   <tr>
   	<td></td>
   	<td></td>
   	<td></td>
   </tr>
   <tr>
   	<td></td>
   	<td></td>
   	<td></td>
   </tr>
   <tr>
   	<td></td>
   	<td></td>
   	<td></td>
   </tr>
</table>

<!-- div>dl>(dt+dd)*5 -->
<div>
	<dl>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
	</dl>
</div>

์†์„ฑ์—ฐ์‚ฐ์ž :   ์š”์†Œ์˜ ์†์„ฑ์„ ์ˆ˜์ •(์ถ”๊ฐ€)ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•˜๋Š” ์—ฐ์‚ฐ์ž. 

* ์š”์†Œ๋ช… ์—†์ด #box ํ•˜๋ฉด ๋ฐ”๋กœ div ์ƒ์„ฑ

<!-- div -->
  
  <!-- ์š”์†Œ[์†์„ฑ๋ช…=์†์„ฑ๊ฐ’][์†์„ฑ๋ช…=์†์„ฑ๊ฐ’] -->
  <!-- div[id='box'][class='ss17  ss16  ss15'] -->
  <div id="box" class="ss17  ss16  ss15"></div>
  
  <!-- div#์•„์ด๋””๋ช….ํด๋ž˜์Šค๋ช… -->
  <!-- div[id='box'] -->
  <!-- div#box -->
  <!-- div#box.ss17 -->
  <!-- div#box.ss17.ss16.ss15 -->
  <div id="box" class="ss17 ss16 ss15"></div> 
  
  <!-- ์š”์†Œ๋ช…X #box -->
  <div id="box"></div>
  
  
<!--   a[href='http://www.sist.co.kr'].16[target='_blank']>{์Œ์šฉ๊ต์œก์„ผํƒ€}^br -->
<a href="http://www.sist.co.kr"  class="16"  target="_blank">์Œ์šฉ๊ต์œก์„ผํƒ€</a><br>

<h3>๋ฒˆํ˜ธ ๋งค๊ธฐ๊ธฐ</h3>

<!-- ul>li.item*5 -->
<!-- ul>li.item$*5>{item-$$$} -->
<ul>
	<li class="item1">item-001</li>
	<li class="item2">item-002</li>
	<li class="item3">item-003</li>
	<li class="item4">item-004</li>
	<li class="item5">item-005</li>
</ul>
 
 <!-- ์—ญ์ˆœ์œผ๋กœ ๋ฒˆํ˜ธ๋งค๊ธฐ๊ธฐ          $ ๋’ค์— @- ๋ฅผ ๋ถ™์ด๋ฉด ๋œ๋‹ค.  -->
 <!-- ul>li.item$@-*5>{item-$$$} --> 
 <ul>
 	<li class="item5">item-001</li>
 	<li class="item4">item-002</li>
 	<li class="item3">item-003</li>
 	<li class="item2">item-004</li>
 	<li class="item1">item-005</li>
 </ul>
 
 
 <!-- ๋ฒˆํ˜ธ ๋งค๊ธฐ๊ธฐ 1๋ถ€ํ„ฐ~ X ,    11๋ถ€ํ„ฐ ~ -->
 <!-- ul>li*5>{item$} -->
 <!-- ul>li*5>{item$@11} -->
 <ul>
 	<li>item11</li>
 	<li>item12</li>
 	<li>item13</li>
 	<li>item14</li>
 	<li>item15</li>
 </ul> 
 
 <!-- ul>li*5>{item$@-11} -->
<ul>
	<li>item15</li>
	<li>item14</li>
	<li>item13</li>
	<li>item12</li>
	<li>item11</li>
</ul>  
 
 
 
 <!-- { ํ…์ŠคํŠธ } -->
 <a href="">click<b>here</b></a> 
 <!-- a>{click}+b>{here} -->
 <a href="">click<b>here</b></a>  
 <!-- a{click}>b{here} -->
 <a href="">click<b>here</b></a>
 
 
 <p>Click <a href="">here</a> to continue</p>
 <!-- p>{Click} ์ฐจ์ด์ -->
 <!-- p{Click}   ์ฐจ์ด์ --> 
 <!-- p{Click}>a{here}+{ to continue} -->
 <p>Click<a href="">here</a> to continue</p>
 
 
 <!-- (header>ul.nav>li*5)+footer -->
 <header>
 	<ul class="nav">
 		<li></li>
 		<li></li>
 		<li></li>
 		<li></li>
 		<li></li>
 	</ul>
 </header>
 <footer></footer>
 
 <!-- p>lorem -->
 <!-- ์ตœ๊ณ ์„ ์•…๋ก -->
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 Doloremque consequatur sit voluptatibus nihil laborum id
 quo voluptatem optio minima a explicabo veritatis quod 
 commodi ipsa placeat ratione totam. Accusantium eligendi.
</p>
 
 <!-- ul>li*10>lorem1 -->
 <ul>
 	<li>Lorem.</li>
 	<li>Omnis!</li>
 	<li>Nisi!</li>
 	<li>Officia.</li>
 	<li>Ab!</li>
 	<li>Quos!</li>
 	<li>Sint.</li>
 	<li>Vel.</li>
 	<li>Sequi.</li>
 	<li>Praesentium.</li>
 </ul>

 <!-- ul>li*10>lorem2 -->
<ul>
	<li>Lorem ipsum.</li>
	<li>Ab numquam!</li>
	<li>Ducimus alias.</li>
	<li>Magnam omnis!</li>
	<li>Minima fuga.</li>
	<li>Modi unde.</li>
	<li>Adipisci totam.</li>
	<li>Nulla omnis!</li>
	<li>Inventore sint.</li>
	<li>Blanditiis nam.</li>
</ul>
์ €์ž‘์žํ‘œ์‹œ

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

[Day6] HTML 6 - div ํŽ˜์ด์ง€, ๋ฐ˜์‘ํ˜•์›น, form, canvas,svg, ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด, youtube  (0) 2022.11.10
[Day5] HTML 5 - ํ™ˆ๋ฉ”๋‰ด, button, div float, media, iframe, head tag, ๋ฐ˜์‘ํ˜• ์›น, ์ด๋ชจํ‹ฐ์ฝ˜, ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ, ๊ทœ์น™, form, select, option, get, post  (0) 2022.11.08
[Day3] HTML 3 - ์ด๋ฏธ์ง€, ์ด๋ฏธ์ง€๋งต, picture, favicon,table  (0) 2022.11.07
[Day2] HTML 2 - ์—ฌ๋Ÿฌ๊ฐ€์ง€ ํƒœ๊ทธ  (0) 2022.11.06
[Day1] HTML 1 - ๊ฐœ์š”, HTML ์š”์†Œ, ์†์„ฑ (ํƒœ๊ทธ)  (0) 2022.11.03
  • ๋„ค์ด๋ฒ„ ๋ธ”๋Ÿฌ๊ทธ ๊ณต์œ ํ•˜๊ธฐ
  • ๋„ค์ด๋ฒ„ ๋ฐด๋“œ์— ๊ณต์œ ํ•˜๊ธฐ
  • ํŽ˜์ด์Šค๋ถ ๊ณต์œ ํ•˜๊ธฐ
  • ์นด์นด์˜ค์Šคํ† ๋ฆฌ ๊ณต์œ ํ•˜๊ธฐ
๐Ÿ‘จ‍๐Ÿ’ป Web Development/HTML | CSS | JS | jQuery ๊ด€๋ จ ๊ธ€
๊ธ€ ๋”๋ณด๊ธฐ

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