๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ’ป Deep Wide Programming/Html & Css

[์ƒํ™œ์ฝ”๋”ฉ] Web 11๊ฐ•, 12๊ฐ•, 13๊ฐ•, 14๊ฐ•, 15๊ฐ•

728x90
๋ฐ˜์‘ํ˜•

์ตœํ›„์˜ ๋ฌธ๋ฒ• ์†์„ฑ & img

<img> image๋ฅผ ๋„ฃ๊ณ  ์‹ถ์„ ๋•Œ ์“ฐ๋Š” tag

<img>๋ผ๋Š” ํƒœ๊ทธ์˜ ์ด๋ฆ„๋งŒ์œผ๋กœ๋Š” ์ •๋ณด๊ฐ€ ๋ถ€์กฑํ•œ ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ƒˆ๋กœ์šด ๋ฌธ๋ฒ•์„ ์ถœ์—ฐ์‹œ์ผฐ๋‹ค. 

<img src=" ">

์ด๋ฏธ์ง€ ์†Œ์Šค์˜ ๋งํฌ ์ฃผ์†Œ๋ฅผ "" ์‚ฌ์ด์— ๋„ฃ์–ด์ค€๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์›นํŽ˜์ด์ง€์— ํ•ด๋‹น ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

unsplash์—์„œ ๋ฌด๋ฃŒ ์ด๋ฏธ์ง€๋ฅผ ํ•˜๋‚˜ ๊ณจ๋ผ ๋‚˜์˜ webํด๋”์— ๋‹ค์šด๋กœ๋“œ ๋ฐ›์•„์„œ, ํ•ด๋‹น ์ด๋ฏธ์ง€ ๋„ค์ž„์„ "" ์‚ฌ์ด์— ๋„ฃ์–ด์ฃผ์—ˆ๋‹ค.

์ด๋ฏธ์ง€ ํฌ๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ์ปค์„œ, ํ™”๋ฉด์— ๋”ฑ ๋งž์ถ”๊ธฐ ์œ„ํ•ด width="100%"๋„ ์ถ”๊ฐ€ํ•ด์ฃผ์—ˆ๋‹ค. 

<img src="diving.image.jpg" width="100%">

๊ฒ€์€ ๋ฐ‘์ค„ ์นœ ์ € ๋‘๊ฐœ์™€ ๊ฐ™์€ ๊ฒƒ๋“ค์„, Attribute๋ผ๊ณ  ํ•œ๋‹ค!

 

(์ขŒ) ์›น๋ธŒ๋ผ์šฐ์ €์—์„œ ์—ด์–ด๋ณธ ๋‚ด๊ฐ€ ๋งŒ๋“  htmlํŒŒ์ผ, (์šฐ) ์ž‘์—… ์ค‘์ธ ์—๋””ํ„ฐ Visual Studio Code ํ™”๋ฉด

 

๋ถ€๋ชจ์ž์‹๊ณผ ๋ชฉ๋ก

<parent>
        <child></child>
</parent

๋ถ€๋ชจ ํƒœ๊ทธ, ์ž์‹ ํƒœ๊ทธ๋ผ๋Š”๊ฒŒ ์žˆ๋‹ค. 

์šฐ๋ฆฌ์˜ ๊ธฐํš์„œ ์ค‘ ์•„์ง ์™ผ์ชฝ ๋ฐ”๋ฅผ ๋งŒ๋“ค์ง€ ๋ชปํ–ˆ๋Š”๋ฐ, ์ด๊ฒƒ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋ถ€๋ชจ/์ž์‹ ํƒœ๊ทธ๋ฅผ ํ™œ์šฉํ•˜๊ฒŒ ๋œ๋‹ค. 

 

๋ชฉ์ฐจlist tag

<ul>
  <li></li> 
</ul> 

 

li๋Š” ๋ฐ˜๋“œ์‹œ ul ๋ถ€๋ชจํƒœ๊ทธ๋ฅผ ๊ฐ–๊ณ  ์žˆ๊ณ , ul ๋ถ€๋ชจํƒœ๊ทธ๋Š” ๋ฐ˜๋“œ์‹œ li ์ž์‹ํƒœ๊ทธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

<li>์˜ ๋ถ€๋ชจ ํƒœ๊ทธ์ธ <ul>๋กœ list(๋ชฉ์ฐจ)์˜ ์˜์—ญ ๊ตฌ๋ถ„์ด ๊ฐ€๋Šฅํ•˜๋‹ค. 

์ฝ”๋“œ ์งค๋•Œ, ์‹œ๊ฐ์„ฑ ๋†’์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด ์ž์‹ํƒœ๊ทธ ํŒŒํŠธ tap ๋“ค์—ฌ์“ฐ๊ธฐ ํ™œ์šฉํ•˜๊ธฐ. 

 

<ul>์„ <ol>๋กœ ๋ฐ”๊พธ๋ฉด, ์•Œ์•„์„œ ๋„˜๋ฒ„๋ง์„ ํ•ด์ค€๋‹ค!

 

ul= unrdered List
ol = ordered List

 

 

<Table> ํ‘œ๋งŒ๋“ค๊ธฐ
3๋Œ€๊ฐ€ ๊ฐ™์ด ๋‹ค๋‹˜. 

 

๋ฌธ์„œ์˜ ๊ตฌ์กฐ์™€ ์Šˆํผ์Šคํƒ€๋“ค

์Šˆํผ์Šคํƒ€ tag๋“ค!

<title> </title>
์›นํŽ˜์ด์ง€์˜ ํƒ€์ดํ‹€์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค!
๊ฒ€์ƒ‰์—”์ง„ ๊ฐ™์€ ๊ธฐ๊ณ„๋“ค์€, ์ฑ…ํ‘œ์ง€์™€ ๊ฐ™์€ ์ •๋ณด๋กœ ์‚ฌ์šฉํ•œ๋‹ค. ๋”ฐ๋ผ์„œ <title> tag๋ฅผ ์“ฐ์ง€ ์•Š๋Š” ๊ฒƒ์€ ๊ต‰์žฅํžˆ ์†ํ•ด๋‹ค. 

 

ํ•œ๊ตญ์–ด ์ถœ๋ ฅ์ด ์ž˜ ์•ˆ๋  ๋•Œ! utf8์ด๋ผ๋Š” ์–ธ์–ด๋กœ ์—ด ์ˆ˜ ์žˆ๋„๋ก ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ๋งํ•ด์ฃผ๋Š” ๊ฒƒ. 

<meta charset="utf-8"> 

๋ฉ”ํƒ€ ์บ๋ฆญํ„ฐ ์„ธํŠธ = _____๋ผ๋Š” ๋œป. 

 

 

 Web์˜ ์•ฝ์† 

<!doctype html>
<html>
<head> </head>
<body> </body>
</html>

 

HTML ํƒœ๊ทธ์˜ ์ œ์™•, link ๊ฑธ์–ด์ฃผ๊ธฐ

anchor์˜ ์ฒซ๊ธ€์ž๋ฅผ ๋”ด,

<a> ์ •๋ณด์˜ ๋ฐ”๋‹ค์— ์ •๋ฐ•ํ•œ๋‹ค๋Š” ์˜๋ฏธ = link๋ฅผ ์˜๋ฏธํ•œ๋‹ค.
๋งํฌ ํŽ˜์ด์ง€๋กœ ํŽ˜์ด์ง€ ์ด๋™

<a
 href="๋งํฌ์—ฌ๊ธฐ์— ๋ณต๋ถ™">๋งํฌ ๊ฑธ์–ด์ค„ ๋‹จ์–ด</a>
๋งํฌ ํŽ˜์ด์ง€ ์ƒˆํƒญ์œผ๋กœ ์—ด๊ธฐ
<a
 href="๋งํฌ์—ฌ๊ธฐ์— ๋ณต๋ถ™" target="_blank">๋งํฌ ๊ฑธ์–ด์ค„ ๋‹จ์–ด</a>
๋งํฌ๊ฐ€ ๋ฌด์—‡์ธ์ง€, ํด๋ฆญ ์ „์— ๋ฏธ๋ฆฌ ์•Œ๋ ค ์ฃผ๊ณ  ์‹ถ๋‹ค.
<a href="๋งํฌ์—ฌ๊ธฐ์— ๋ณต๋ถ™" target="_blank" title="๋ถ€์—ฐ์„ค๋ช…">๋งํฌ ๊ฑธ์–ด์ค„ ๋‹จ์–ด</a>

 

๋งํฌ๋Š” ๊ฐ๊ฐ์˜ ์ •๋ณด๋ฅผ ์ฑ…์ฒ˜๋Ÿผ ์—ฎ๋Š” ์—ญํ• !

 

728x90
๋ฐ˜์‘ํ˜•