Notice
Recent Posts
Recent Comments
ยซ   2024/12   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
In Total
๊ด€๋ฆฌ ๋ฉ”๋‰ด

A Joyful AI Research Journey๐ŸŒณ๐Ÿ˜Š

[8] 230106 Ch. 7 HTML๊ณผ CSS๋กœ ์›น์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ: ์›น ์‚ฌ์ดํŠธ ์ž‘์„ฑ, HTML ๋ฌธ์„œ · CSS ํŒŒ์ผ ์ž‘์„ฑํ•˜๊ธฐ, ์™„์„ฑ๋œ ํŽ˜์ด์ง€ ๋ณด๊ธฐ [K-๋””์ง€ํ„ธ ํŠธ๋ ˆ์ด๋‹ 8์ผ] ๋ณธ๋ฌธ

๐ŸŒณBootcamp Revision 2023โœจ/HTML5, CSS3, JSP

[8] 230106 Ch. 7 HTML๊ณผ CSS๋กœ ์›น์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ: ์›น ์‚ฌ์ดํŠธ ์ž‘์„ฑ, HTML ๋ฌธ์„œ · CSS ํŒŒ์ผ ์ž‘์„ฑํ•˜๊ธฐ, ์™„์„ฑ๋œ ํŽ˜์ด์ง€ ๋ณด๊ธฐ [K-๋””์ง€ํ„ธ ํŠธ๋ ˆ์ด๋‹ 8์ผ]

yjyuwisely 2023. 1. 6. 12:39

230106 Fri 8th class

Ch. 6 CSS ๋ ˆ์ด์•„์›ƒ๊ณผ ์• ๋‹ˆ๋ฉ”์ด์…˜ (์ฃผ์ œ๋ณ„๋กœ ๋ฌถ๊ธฐ ์œ„ํ•ด ์•„๋žซ๊ธ€๋กœ ๊ธ€ ๋‚ด์šฉ ์˜ฎ๊น€.)
Ch. 7 HTML๊ณผ CSS๋กœ ์›น์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ
์ง„๋„: p. 221 ~  (๊ต์žฌ: HTML5 + CSS3 + JavaScript๋กœ ๋ฐฐ์šฐ๋Š” ์›นํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ์ดˆ, ์ €์ž: ์ฒœ์ธ๊ตญ)

 

HTML5+CSS3+JavaScript๋กœ ๋ฐฐ์šฐ๋Š” ์›นํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ์ดˆ | ์ฒœ์ธ๊ตญ - ๊ต๋ณด๋ฌธ๊ณ 

HTML5+CSS3+JavaScript๋กœ ๋ฐฐ์šฐ๋Š” ์›นํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ์ดˆ | ์›นํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ดˆ๋ณด์ž๋„ ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๋Š” ์›น ๊ฐœ๋ฐœ ์ง€์นจ์„œ!์ด ์ฑ…์€ ์›นํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ฒ˜์Œ ๋ฐฐ์šฐ๋Š” ์ดˆ๋ณด์ž๋“ค์„ ์œ„ํ•ด ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์ฐจ๊ทผ์ฐจ๊ทผ ์„ค๋ช…ํ•œ๋‹ค. 1~3์žฅ์—

product.kyobobook.co.kr

 

์˜ค๋Š˜ ๋ฐฐ์šด ๊ฒƒ ์ค‘ ๊ธฐ์–ตํ•  ๊ฒƒ์„ ์ •๋ฆฌํ–ˆ๋‹ค.


์ง€๋‚œ ์ˆ˜์—…์—์„œ ๋ฐฐ์šด ๊ฒƒ ์ค‘ ๋‹ค์‹œ ๊ธฐ์–ตํ•  ๊ฒƒ:

- ๋งˆ์šฐ์Šค ์˜ฌ๋ ธ์„ ๋•Œ ํ…์ŠคํŠธ ๋œจ๊ฒŒ ํ•˜๋Š” ๋ฒ•
title :
์ด๋ฏธ์ง€ ์œ„์— ๋งˆ์šฐ์Šค ํฌ์ธํ„ฐ๋ฅผ ์˜ฌ๋ ค๋†“์•˜์„ ๋•Œ ํ’์„  ๋„์›€๋ง์ฒ˜๋Ÿผ ๋œจ๊ฒŒ ํ•œ๋‹ค.


- ์•„์ด๋”” ์„ ํƒ์ž (#) ์“ธ ๋•Œ ๋ถ™์—ฌ์„œ ์“ด๋‹ค.

#๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ํ•˜๋‚˜์˜ ์š”์†Œ๋งŒ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค.
๊ณ ์œ ๋ช…์‚ฌ์ด๋‹ค. ๋™์ผ ์ด๋ฆ„์€ ์•ˆ ๋œ๋‹ค.

ex) #special{ color : red } 

ex) <h1> ์š”์†Œ ์ค‘์—์„œ ์•„์ด๋””๊ฐ€ "special"์ธ ์š”์†Œ๋ฅผ ์„ ํƒํ•จ

h1#special { color : blue; }
div#box2{transform:translate(100px,0);background:orange;} /*x์ถ• 100px, y์ถ• 0๋งŒํผ ์ด๋™*/

 


- <div> p.76  ์ฐธ๊ณ : <div> ํƒœ๊ทธ

:(Division, divide) ํŽ˜์ด์ง€๋ฅผ ๋…ผ๋ฆฌ์ ์ธ ์„น์…˜์œผ๋กœ ๋ถ„๋ฆฌํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ํƒœ๊ทธ์ด๋‹ค.
์›น ํŽ˜์ด์ง€์˜ ๊ณต๊ฐ„์„ ๋ถ„ํ• ํ•˜์—ฌ ๋ ˆ์ด์•„์›ƒ์„ ์ž‘์„ฑํ•˜๋Š” ๋ฐ ์ฃผ๋กœ ์“ฐ์ธ๋‹ค.

๊ฐ€์ƒ์˜ ๋ ˆ์ด์•„์›ƒ์„ ์„ค๊ณ„ํ•˜๋Š”๋ฐ ์“ฐ์ด๋ฉฐ, ์ฃผ๋กœ CSS์™€ ์—ฐ๋™ํ•˜์—ฌ ์“ฐ์ธ๋‹ค.

  • ์—ฌ๋Ÿฌ ํƒœ๊ทธ๋ฅผ ํ•œ ๋ฒˆ์— ๋ฌถ์–ด์„œ ์˜ฎ๊ธฐ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.
  • ๋ธ”๋ก ์ˆ˜์ค€์˜ ์š”์†Œ๋กœ์„œ ํ•˜๋‚˜์˜ ์ค„์„ ์ „๋ถ€ ์ฐจ์ง€ํ•œ๋‹ค. 
  • ์ค„ ๋ฐ”๊ฟˆ์ด ๋œ๋‹ค.

ex) ๊ตฌ์„ฑ ์š”์†Œ

  • [p์š”์†Œ](๋ฌธ๋‹จ(Paragraph)์„ ํ‘œ์‹œ): ๋„ค์ด๋ฒ„ ์•ˆ์ „ ํŽธ๋ฆฌ ์ด์šฉ
  • [<button>]: naver ๋กœ๊ทธ์ธ
  • [<a>(์•„์ด๋””)] [<a>(๋น„๋ฐ€๋ฒˆํ˜ธ ์ฐพ๊ธฐ)] [<a>(ํšŒ์›๊ฐ€์ž…)]
  • [[๋กœ๊ณ ] [๊ฒ€์ƒ‰์–ด๋ฅผ ์ž…๋ ฅ] [๋ฒ„ํŠผ]]

- ์˜๋ฏธ์  ์š”์†Œ(Semantic elements)๋ฅผ ์ด์šฉํ•œ ๋ ˆ์ด์•„์›ƒ p.216

 <div id="header"> ๋Œ€์‹ ์— <header> ๊ฐ™์€ ๋” ์ง๊ด€์ ์ธ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.


- Table ์†์„ฑ ์‚ฌ์šฉ์œผ๋กœ ์นธ ๊ฐ„๊ฒฉ ๋™์ผํ•˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ•

๋ถ€๋ชจ์š”์†Œ ํƒœ๊ทธ:

display: table;
table-layout: fixed;

์ž์‹์š”์†Œ ํƒœ๊ทธ :

display: table-cell;


์ฐธ๊ณ : https://m.blog.naver.com/haru2zipsa/221863227341โ€‹

 

- ์ด๋ฏธ์ง€ ํฌ๊ธฐ ์กฐ์ •

2022.12.30 - [1. Revision 2023/HTML5] - [3] 221230 Ch2 HTML5 ๊ธฐ๋ณธ ์š”์†Œ
width = "150" height = "150"์ฒ˜๋Ÿผ ์ˆซ์ž ๋ณ€๊ฒฝํ•˜๋ฉด์„œ ์ด๋ฏธ์ง€ ํฌ๊ธฐ ์กฐ์ • ๊ฐ€๋Šฅํ•˜๋‹ค.

<img src="image/Nasa2.jpg" width="50" height="50"/>


- ๋น„๊ฒŒ์ด์…˜ ๋ฐ” p.180 ๋ฉ”๋‰ด ๋งŒ๋“ค๊ธฐ

display:inline;/* block ์š”์†Œ -> inline ์š”์†Œ๋กœ ๋ณ€๊ฒฝ, ์ˆ˜ํ‰์œผ๋กœ ๋œ๋‹ค. */ 
text-transform:uppercase; /*์ „์ฒด ๋Œ€๋ฌธ์ž*/
padding:0 10px; /*์ƒํ•˜ ํŒจ๋”ฉ: 0 ํ”ฝ์…€, ์ขŒ์šฐ ํŒจ๋”ฉ: 10 ํ”ฝ์…€, ๋‹จ์–ด์™€ ๋‹จ์–ด ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์ด ๋ฒŒ์–ด์ง„๋‹ค.*/
letter-spacing:10px; /*์•ŒํŒŒ๋ฒณ๊ณผ ์•ŒํŒŒ๋ฒณ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์ด ๋ฒŒ์–ด์ง„๋‹ค.*/

- ์™ธ๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ (External style sheet)

2023.01.03 - [1. Revision 2023/CSS3] - [5] 230103 Ch4 CSS3 ์Šคํƒ€์ผ ์‹œํŠธ ๊ธฐ์ดˆ

<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>

 

css ํด๋”์— ์œ„์น˜ํ•œ๋‹ค. 
<link> ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ํ—ค๋“œ ๋ถ€๋ถ„์— ์žˆ์–ด์•ผ ํ•œ๋‹ค. 

type ๋’ค์—๋Š” ์™ธ๋ถ€ ํŒŒ์ผ์˜ ์ข…๋ฅ˜๋ฅผ ์•Œ ์ˆ˜ ์žˆ๋‹ค. type ="text/css"
rel(relationship)์€ HTML ํŒŒ์ผ๊ณผ ์™ธ๋ถ€ ํŒŒ์ผ๊ณผ์˜ ๊ด€๊ณ„๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. rel="stylesheet"
href์— ์™ธ๋ถ€ํŒŒ์ผ์˜ ์œ„์น˜๋ฅผ ์ ์–ด๋‘”๋‹ค. href="css/outter_CSS.css"

์˜ˆ์‹œ) 

<head>
<meta charset="UTF-8">
<title>์™ธ๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ (External style sheet)</title>
<link type ="text/css" rel="stylesheet" href="css/outter_CSS.css">
</head>

Ch. 7 HTML๊ณผ CSS๋กœ ์›น์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ

์ฑ…์˜ ๋ชฉ์ฐจ
-์›น์‚ฌ์ดํŠธ ์ž‘์„ฑ
-HTML ๋ฌธ์„œ ์ž‘์„ฑํ•˜๊ธฐ
-CSS ํŒŒ์ผ ์ž‘์„ฑํ•˜๊ธฐ
-์™„์„ฑ๋œ ํŽ˜์ด์ง€ ๋ณด๊ธฐ

1. ์›น ์‚ฌ์ดํŠธ ์ž‘์„ฑ p. 242

1.1 ์š”๊ตฌ ์‚ฌํ•ญ ๋ถ„์„

๊ฐ€์žฅ ๋จผ์ € ํ•ด์•ผ ํ•  ์ผ์€ ์›น์‚ฌ์ดํŠธ์˜ ๋ชฉํ‘œ๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๋ฌด์—‡์„ ์œ„ํ•œ ์‚ฌ์ดํŠธ์ธ์ง€๋ฅผ ๋ถ„๋ช…ํ•˜๊ฒŒ ํ•ด์•ผ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.

  • ์›น ์‚ฌ์ดํŠธ์˜ ๋ชฉํ‘œ
  • ์˜ˆ์‚ฐ
  • ์ผ์ •


1.2 ์„ค๊ณ„(Plan)

๋‹ค์Œ ์‚ฌํ•ญ์„ ๊ฒฐ์ •ํ•œ๋‹ค.

  • ์›น ์‚ฌ์ดํŠธ์˜ ๊ธฐ๋Šฅ ๋‚˜์—ด
  • ์›น ์‚ฌ์ดํŠธ์—์„œ ํ•„์š”ํ•œ ์›น ํŽ˜์ด์ง€ ๋‚˜์—ด
  • ์›น ์‚ฌ์ดํŠธ์˜ ๋ฉ”๋‰ด ๋‚˜์—ด 
  • ๋‚ด๋น„๊ฒŒ์ด์…˜ ๊ตฌ์กฐ ๊ฒฐ์ •: ์‚ฌ์ดํŠธ ์•ˆ์—์„œ ํŽ˜์ด์ง€๊ฐ€ ์–ด๋–ป๊ฒŒ ์—ฐ๊ฒฐ๋˜๋Š”์ง€๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค.

ex) HOME / ABOUT US / NEWS / MY ACCOUNT / CONTACTS
HOME ๋ฐ‘์— ์‡ผํ•‘ ์นดํŠธ ๋ณด๊ธฐ, ํšŒ์› ๊ฐ€์ž…, ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ถ„์‹ค์ด ์žˆ๋‹ค

์•„๋ž˜ HTML ๋ฌธ์„œ์™€ CSS ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๊ฒŒ ๋œ๋‹ค.

  1. index.html: Webshop์˜ ํ™ˆ ํ™”๋ฉด, ์ƒํ’ˆ ์นดํ…Œ๊ณ ๋ฆฌ, ๋กœ๊ณ , ๋กœ๊ทธ์ธ ๋“ฑ์ด ํฌํ•จ๋˜์–ด ์žˆ๋‹ค.

  2. register.html: ํšŒ์› ๊ฐ€์ž… ํ™”๋ฉด, ๋‹ค์–‘ํ•œ html5 ์ž…๋ ฅ ์–‘์‹์„ ์ด์šฉํ•ด ๋ณธ๋‹ค.

  3. shopcart.html: ํ˜„์žฌ ์‡ผํ•‘ ์นดํŠธ์— ๋“ค์–ด ์žˆ๋Š” ์ƒํ’ˆ์„ ๋ณด์—ฌ์ค€๋‹ค.

  4. computer.html: index.html ํ™”๋ฉด ์•ˆ์— ํฌํ•จ๋œ๋‹ค. ์ปดํ“จํ„ฐ ์ƒํ’ˆ์„ ๋ณด์—ฌ์ฃผ๋Š” ํ™”๋ฉด์ด๋‹ค. 

  5. clothing.html: index.html ํ™”๋ฉด ์•ˆ์— ํฌํ•จ๋œ๋‹ค. ์˜๋ฅ˜ ์ƒํ’ˆ์„ ๋ณด์—ฌ์ฃผ๋Š” ํ™”๋ฉด์ด๋‹ค.

  6. music.html: index.html ํ™”๋ฉด ์•ˆ์— ํฌํ•จ๋œ๋‹ค. ์Œ์•… ํŒŒ์ผ์„ ํŒ๋งคํ•˜๋Š” ํ™”๋ฉด์ด๋‹ค.

  7. movie.html: index.html ํ™”๋ฉด ์•ˆ์— ํฌํ•จ๋œ๋‹ค. ์˜ํ™” ํŒŒ์ผ์„ ํŒ๋งคํ•˜๋Š” ํ™”๋ฉด์ด๋‹ค. 

  8. mystyle.css: index.html์— ๋Œ€ํ•œ ์Šคํƒ€์ผ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ํŒŒ์ผ์ด๋‹ค. 

* p.247
target์„ ์ง€์ •ํ•˜์—ฌ์„œ ๋งํฌ๋ฅผ ํด๋ฆญํ•˜๋ฉด ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๊ฐ€ target์—์„œ ์˜คํ”ˆ๋œ๋‹ค. 

a target="iframe1" href="computer.html"> ์ปดํ“จํ„ฐ </a>



* p. 262
๋งˆ์šฐ์Šค๋ฅผ ๋‚ด๋น„๊ฒŒ์ด์…˜์— ์˜ฌ๋ ธ์„ ๋•Œ ๊ธ€์ž๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ•œ ์ค„ ์ „์ฒด๊ฐ€ ์„ ํƒ๋œ๋‹ค.

a:hover{display: block} /*๊ธ€์ž ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ•œ ์ค„ ์ „์ฒด๊ฐ€ ์„ ํƒ๋œ๋‹ค. */
/*์œ„์ฒ˜๋Ÿผ ๋ธ”๋ก ์š”์†Œ๋กœ ๋ณ€๊ฒฝํ•ด์•ผ๋งŒ์ด ์ „์ฒด์˜ ๋ฐฐ๊ฒฝ์ƒ‰์ด ๋ณ€๊ฒฝ๋œ๋‹ค.*/



* a์™€ a:hover๋ฅผ ๋”ฐ๋กœ ์ง€์ •ํ•œ๋‹ค.

a{text-decoration:none; color:white;}
a:hover{display: block; text-decoration:none; color: white; background-color:red;}



* ํฐํŠธ ์‚ฌ์ด์ฆˆ ์œ„ ์•„๋ž˜์˜ ์—ฌ๋ฐฑ:

line-height:28px;

- ์ƒํ’ˆ ์ •๋ณด ํŽ˜์ด์ง€ p. 253
computer.html

<body>
	<div id="product1">
		<img src="computer.png" alt="์ปดํ“จํ„ฐ ์ด๋ฏธ์ง€" width="100" height="100">
		<p> ์‹ฌํ”Œํ•˜๊ณ  ์Šฌ๋ฆผํ•œ ๋ณธ์ฒด์— ์ฝ”์–ดi5 3470๊ณผ์ง€ํฌ์Šค GT630์„ ์žฅ์ฐฉ
			CPU: ์ธํ…” ์ฝ”์–ดi5 3470 (์•„์ด๋น„๋ธŒ๋ฆฟ์ง€ 3์„ธ๋Œ€) ์‚ฌ์šฉ<br>
			๊ฐ€๊ฒฉ: 1,200,000์›
		</p>
		<input type="button" value="์‡ผํ•‘์นดํŠธ์— ์ถ”๊ฐ€ํ•˜๊ธฐ">
	</div>
	
	<div id="product2">
		<img src="images/notebook.png" alt="๋…ธํŠธ๋ถ ์ด๋ฏธ์ง€" width="100" height="100">
		<p> Full-HD๋กœ ์„ ๋ช…ํ•œ ํ™”๋ฉด, ISPํŒจ๋„๋กœ ์‹œ์•ผ๊ฐ๋„ ์ข‹๋‹ค!
			CPU: ์ธํ…” ์ฝ”์–ดi7 3630 QM, CPU: ์ธํ…” ์ฝ”์–ดi7 3630 QM<br>
			๊ฐ€๊ฒฉ: 1,200,000์›
		</p>
		<input type="button" value="์‡ผํ•‘์นดํŠธ์— ์ถ”๊ฐ€ํ•˜๊ธฐ">
	</div>
</body>

๊ฒฐ๊ณผ)


- ์Œ์•… ํŒ๋งค ํŽ˜์ด์ง€ p. 253
music.html

<body>
	<h4>Save the Last Dance for Me</h4>
	<!-- autoplay๋Š” ์ž๋™์‹œ์ž‘์ด๋‹ค. controls๋Š” ์ œ์–ด ๋ฒ„ํŠผ์„ ํ™”๋ฉด์— ๋ณด์ด๊ฒŒ ํ•œ๋‹ค.  -->
	<audio controls autoplay>
		<source src="audio/old_pop.mp3" type="audio/mpeg">
		<source src="audio/old_pop.ogg" type="audio/ogg">
		๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์˜ค๋””์˜ค ์š”์†Œ๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
	</audio>
	<input type = "button" value = "์‡ผํ•‘์นดํŠธ์— ์ถ”๊ฐ€ํ•˜๊ธฐ">
</body>

๊ฒฐ๊ณผ)


- ์˜ํ™” ํŒ๋งค ํŽ˜์ด์ง€ p. 254
movie.html

<head>
<meta charset="UTF-8">
<title>movie</title>
	<style>h4, video{
		padding: 0; 
		margin: 0;
	}</style>
</head>
<body>
	<h4>Toy Story 30</h4>
	<video width="300" height="200" controls>
		<source src="video/movie.mp4" type="video/mp4">
		<source src="video/movie.webm" type="video/webm">
		๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋น„๋””์˜ค ์š”์†Œ๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
	</video>
	<br>
	<input type = "button" value = "์‡ผํ•‘์นดํŠธ์— ์ถ”๊ฐ€ํ•˜๊ธฐ">
</body>

๊ฒฐ๊ณผ)


- ์‡ผํ•‘ ์นดํŠธ ํŽ˜์ด์ง€ p. 255 - 257 
shopcart.html

<head>
<meta charset="UTF-8">
<title>shop cart</title>
<style>
	body{
		height: 100%;
		background-color: #f3f1e9;
	}
	
	table{
		width: 100%;
		border-collapse: collapse; //ํ…Œ์ด๋ธ”์˜ ๊ฒน์น˜๋Š” ๊ฒฝ๊ณ„์„ ์€ ํ•˜๋‚˜๋กœ ๋งŒ๋“ ๋‹ค. 
		text-align: center;
	}
	
	table caption{
		color: red;
		text-decoration: underline;
	}
</style>
</head>
<body>
	<form action="#">
	<table border="1">
	
		<caption>Shopping Cart</caption>
		<tr>
			<th> ํ’ˆ๋ชฉ </th>
			<th> ๊ฐ€๊ฒฉ </th>
			<th> ์ˆ˜๋Ÿ‰ </th>
			<th> ํ•ฉ๊ณ„ </th>
		</tr>
		<tr>
			<td> ์ปดํ“จํ„ฐ์„ธํŠธ </td>
			<td> 2,000,000์› </td>
			<td> <input type="number" min="0" step="1" value ="0"></td>
			<td> <input type="text" size="6" value ="0"></td>
		</tr>
		<tr>
			<td> ํ‹ฐ์…”์ธ  </td>
			<td> 50,000์› </td>
			<td> <input type="number" min="0" step="1" value ="0"></td>
			<td> <input type="text" size="6" value ="0"></td>
		</tr>
		<tr>
			<td> ์Œ์•…ํŒŒ์ผ </td>
			<td> 1,000์› </td>
			<td> <input type="number" min="0" step="1" value ="0"></td>
			<td> <input type="text" size="6" value ="0"></td>
		</tr>
		<tr>
			<td> ์˜ํ™”ํŒŒ์ผ </td>
			<td> 5,000์› </td>
			<td> <input type="number" min="0" step="1" value ="0"></td>
			<td> <input type="text" size="6" value ="0"></td>
		</tr>	
	</table> <!-- table ๋ -->
	<input type = "button" value = "๊ณ„์‚ฐ"	>
	<input type = "submit" value = "๊ตฌ๋งค">
	<input type = "reset" value = "์ดˆ๊ธฐํ™”">
	</form> <!-- form ๋๋‚จ -->
</body>

๊ฒฐ๊ณผ)


๊ธฐํƒ€

CCapture.js - A library to capture canvas-based animations
https://github.com/spite/ccapture.js/


728x90
๋ฐ˜์‘ํ˜•

'๐ŸŒณBootcamp Revision 2023โœจ > HTML5, CSS3, JSP' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[56] 230320 JSP Ch. 3 JSP๋กœ ์‹œ์ž‘ํ•˜๋Š” ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ, Ch. 4 ํ•„์ˆ˜ ์ดํ•ด ์š”์†Œ [K-๋””์ง€ํ„ธ ํŠธ๋ ˆ์ด๋‹ 56์ผ]  (0) 2023.03.20
[56] 230320 JSP Ch. 1 ๋“ค์–ด๊ฐ€๊ธฐ, Ch. 2 ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ์ดˆ, Ch. 13 ์ดํด๋ฆฝ์Šค๋ฅผ ์ด์šฉํ•œ ์›น ๊ฐœ๋ฐœ [K-๋””์ง€ํ„ธ ํŠธ๋ ˆ์ด๋‹ 56์ผ]  (0) 2023.03.20
[7] 230105 Ch. 6 CSS ๋ ˆ์ด์•„์›ƒ๊ณผ ์• ๋‹ˆ๋ฉ”์ด์…˜: ๋ ˆ์ด์•„์›ƒ์˜ ๊ธฐ์ดˆ, ์š”์†Œ ์œ„์น˜ ์ •ํ•˜๊ธฐ, <div> ์š”์†Œ ยท ์˜๋ฏธ์  ์š”์†Œ๋ฅผ ์ด์šฉํ•œ ๋ ˆ์ด์•„์›ƒ, ํšจ๊ณผ, CSS3 ๋ณ€ํ™˜ ยท 3์ฐจ์› ๋ณ€ํ™˜ ยท ์• ๋‹ˆ๋ฉ”์ด์…˜ [K-๋””์ง€ํ„ธ ํŠธ๋ ˆ์ด๋‹ 7์ผ]  (0) 2023.01.05
[6] 230104 Ch. 5 CSS3 ๋ฐ•์Šค ๋ชจ๋ธ๊ณผ ์‘์šฉ: ๋ฐ•์Šค ๋ชจ๋ธ, ๊ฒฝ๊ณ„์„ , ๋งˆ์ง„๊ณผ ํŒจ๋”ฉ, ๋ฐฐ๊ฒฝ ์„ค์ •ํ•˜๊ธฐ, ๋งํฌ ยท ๋ฆฌ์ŠคํŠธ ยท ํ…Œ์ด๋ธ” ์Šคํƒ€์ผ [K-๋””์ง€ํ„ธ ํŠธ๋ ˆ์ด๋‹ 6์ผ]  (0) 2023.01.04
Comments