AI๊ต์œก๊ณผ์ • - HTML.2

๋‹จ๋น„ยท2022๋…„ 10์›” 24์ผ
0

AI๊ต์œก๊ณผ์ •

๋ชฉ๋ก ๋ณด๊ธฐ
17/69

๐Ÿ˜ฃ ๋‹ทํ™ˆ ํ˜ธ์ŠคํŒ… ์ฃผ์˜์‚ฌํ•ญ

  • HTML ๋””๋ ‰ํ† ๋ฆฌ์— ํŒŒ์ผ ์—…๋กœ๋“œ
  • ์ฒซ ํŽ˜์ด์ง€๋Š” ํ•ญ์ƒ index.html๋กœ ์—…๋กœ๋“œ(๋ฌด์กฐ๊ฑด ์†Œ๋ฌธ์ž)

  • FTP(File Transfer Protocol)
    • ํด๋ผ์ด์–ธํŠธ - ์„œ๋ฒ„(C/S)์šฉ ํ”„๋กœํ† ์ฝœ
    • ํด๋ผ์ด์–ธํŠธ๊ฐ€ ํŒŒ์ผ์„ ์š”์ฒญํ•˜๋ฉด ์„œ๋ฒ„๊ฐ€ ์š”์ฒญ๋œ ํŒŒ์ผ์„ ์ œ๊ณต
    • ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„๋กœ ํŒŒ์ผ์„ ์ „๋‹ฌ
    • ์ฃผ๋กœ ๋Œ€๋Ÿ‰์˜ ํŒŒ์ผ์„ ์ฒ˜๋ฆฌํ•  ๋•Œ ์‚ฌ์šฉ
    • ๊ธฐ๋ณธํฌํŠธ : 21๋ฒˆ
  • ํ˜ธ์ŠคํŒ…
    • ์„œ๋ฒ„ ์ปดํ“จํ„ฐ์˜ ์ „์ฒด ๋˜๋Š” ์ผ์ • ๊ณต๊ฐ„์„ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ž„๋Œ€ํ•ด์ฃผ๋Š” ์„œ๋น„์Šค
  • ftp-simle
    • ๋น„์ฃผ์–ผ์ŠคํŠœ๋””์˜ค์ฝ”๋“œ์— FTP ํ”„๋กœ๊ทธ๋žจ ์‚ฌ์šฉ

      f1 - ftp-simple: conpig -FTP connection setting ์„ ์„ ํƒ

      f1 - ftp-simple: remote directory open to workspace


  • ์•„์ดํ”„๋ ˆ์ž„
    • inline frame ์˜ ์•ฝ์ž

    • ์›น์‚ฌ์ดํŠธ ์•ˆ์— ๋˜ ๋‹ค๋ฅธ ์›น์‚ฌ์ดํŠธ๋ฅผ ์‚ฝ์ž…

      <iframe src="์‚ฝ์ž…ํ•  ํŽ˜์ด์ง€์˜ ์ฃผ์†Œ ๋˜๋Š” ๋ฌธ์„œ์œ„์น˜" style="ํฌ๊ธฐ๋ฅผ ์„ค์ •ํ•  css์ฝ”๋“œ"></iframe>
  • ํผ ํƒœ๊ทธ
    • ์›นํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉ์ž๋กœ๋ถ€ํ„ฐ ์ž…๋ ฅ์„ ๋ฐ›์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ

    • ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ ๋ณด๋‚ผ ๋•Œ form ์š”์†Œ๋ฅผ ์‚ฌ์šฉ

      		<form action="์„œ๋ฒ„์—๊ฒŒ ์ „๋‹ฌํ•  ํŒŒ์ผ์œ„์น˜" method="์ „์†ก๋ฐฉ๋ฒ•">
      	form ํƒœ๊ทธ ์•ˆ์— form ์š”์†Œ๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ ์ „๋‹ฌ
      </form>
  • ์ž…๋ ฅ ์ƒ์ž <input>
    • type ์†์„ฑ
      • text: ๋ฌธ์ž๋ฅผ ์ž…๋ ฅ ๋ฐ›๋Š” ๊ธ€์ƒ์ž
      • password: ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅ ๋ฐ›๋Š” ๊ธ€์ƒ์ž
      • radio: ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์˜ต์…˜ ์ค‘์—์„œ ๋‹จ ํ•˜๋‚˜์˜ ์˜ต์…˜๋งŒ์„ ์ž…๋ ฅ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๋ฒ„ํŠผ
        • ๊ทธ๋ฃน์„ ๋งบ๊ธฐ ์œ„ํ•ด name ์†์„ฑ์˜ ๊ฐ’์ด ๋™์ผํ•ด์•ผํ•จ
      • checkbox: ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์˜ต์…˜ ์ค‘์—์„œ ๋‹ค์ˆ˜์˜ ์˜ต์…˜์„ ์ž…๋ ฅ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๋ฒ„ํŠผ (์ž๋ฐ”์—์„œ ๋ฐฐ์—ด๋กœ ๋ฐ›์„ ์ˆ˜ ์žˆ์Œ)
      • file: ์›ํ•˜๋Š” ํŒŒ์ผ์„ ์„œ๋ฒ„๋กœ ์ „์†กํ•˜๊ธฐ ์œ„ํ•œ ๊ธ€์ƒ์ž
      • email: ์ด๋ฉ”์ผ์„ ์ž…๋ ฅ ๋ฐ›๋Š” ๊ธ€์ƒ์ž(@ ํ•„์š”)
      • url: ์›น์‚ฌ์ดํŠธ๋ฅผ ์ž…๋ ฅ ๋ฐ›๋Š” ๊ธ€์ƒ์ž(http ํ•„์š”)
      • tel: ์ „ํ™”๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅ ๋ฐ›๋Š” ๊ธ€์ƒ์ž(๋ชจ๋ฐ”์ผ์—์„œ ์ˆซ์ž ํ‚คํŒจํŠธ๋ฅผ ์ž๋™ ์‚ฌ์šฉ)
      • date: ์›ํ•˜๋Š” ๋‚ ์งœ๋ฅผ ์ž…๋ ฅ ๋ฐ›๋Š” ๊ธ€์ƒ์ž
      • number: ์›ํ•˜๋Š” ์ˆซ์ž๋ฅผ ์ž…๋ ฅ ๋ฐ›๋Š” ๊ธ€์ƒ์ž
        <input type="number" min="์ตœ์†Œ๊ฐ’" max="์ตœ๋Œ€๊ฐ’" step="์ฆ๊ฐ€๊ฐ’">
      • color: ์›ํ•˜๋Š” ์ƒ‰์ƒ์„ ์ž…๋ ฅ ๋ฐ›๋Š” ์š”์†Œ
        • ์„ ํƒํ•œ ์ƒ‰์ƒ์€ 16์ง„์ˆ˜ RGB์ปฌ๋Ÿฌ ๊ฐ’์œผ๋กœ ์„œ๋ฒ„์— ์ „๋‹ฌ
      • search: ๊ฒ€์ƒ‰์–ด๋ฅผ ์ž…๋ ฅ ๋ฐ›๋Š” ๊ธ€์ƒ์ž
      • range: ์ผ์ • ๋ฒ”์œ„ ์•ˆ์— ๊ฐ’๋งŒ์„ ์ž…๋ ฅํ•˜๋Š” ์กฐ์ ˆ๋ฐ”
        <input type="range" min="์ตœ์†Œ๊ฐ’" max="์ตœ๋Œ€๊ฐ’" value="ํ˜„์žฌ๊ฐ’">
      • hidden : ๋ณด์ด์ง€๋Š” ์•Š์œผ๋‚˜ ์„œ๋ฒ„์— ๊ฐ’์„ ์ „๋‹ฌํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์š”์†Œ
      • button: ์ด๋ฒคํŠธ๊ฐ€ ์—†๋Š” ์ผ๋ฐ˜ ๋ฒ„ํŠผ
      • reset: ์ž…๋ ฅ ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ดˆ๊ธฐํ™” ํ•˜๋Š” ๋ฒ„ํŠผ
      • submit: ์ž…๋ ฅ ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„์— ์ œ์ถœํ•˜๋Š” ๋ฒ„ํŠผ
    • ์†์„ฑ
      • name: ์š”์†Œ์˜ ์ด๋ฆ„์„ ์„ค์ •, ์„œ๋ฒ„์—์„œ ๊ฐ’์„ ์ „๋‹ฌ ๋ฐ›์„ ๋•Œ ํ‚ค๋กœ ์‚ฌ์šฉ
      • id: ์š”์†Œ์˜ ์œ ์ผํ•œ ์ด๋ฆ„์„ ์„ค์ •, HTML๋ฌธ์„œ์—์„œ ํ•ด๋‹น ์š”์†Œ์˜ ์Šคํƒ€์ผ์„ ์ฃผ๊ฑฐ๋‚˜ ๋™์ ์ธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•  ๋•Œ ์‚ฌ์šฉ(ํ•˜๋‚˜์˜ HTML ๋ฌธ์„œ์—์„œ ๋‹ค๋ฅธ ์š”์†Œ์™€ ๊ฐ’์ด ๊ฐ™์„ ์ˆ˜ ์—†์Œ)
      • maxlength: ๊ฐ’์˜ ์ตœ๋Œ€ ๊ธธ์ด๋ฅผ ์„ค์ •ํ•˜๋Š” ์†์„ฑ
      • placeholder: ์ž…๋ ฅ ์ „ ํŠน์ • ๋ฐ์ดํ„ฐ๋ฅผ ์ž…๋ ฅํ•˜๋„๋ก ์•ˆ๋‚ดํ•˜๋Š” ๊ฐ’
      • value: ์„œ๋ฒ„๋กœ ์ „๋‹ฌ๋œ ์ž…๋ ฅ ์–‘์‹์˜ ๊ฐ’์„ ์„ค์ •
      • checked: ๋ผ๋””์˜ค ๋˜๋Š” ์ฒดํฌ๋ฐ•์Šค ์ค‘์—์„œ ๋ฏธ๋ฆฌ ์„ ํƒํ•˜๋Š” ์˜ต์…˜์„ ์„ค์ •
      • readonly: ๋ฐ์ดํ„ฐ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์œผ๋‚˜ ์ˆ˜์ •ํ•  ์ˆ˜ ์—†๊ฒŒ ์„ค์ •
        • ์„œ๋ฒ„๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ์ „๋‹ฌ๋จ
      • disabled: ์ž…๋ ฅ ํ•„๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ฒŒ ์„ค์ •
        • ์„œ๋ฒ„๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ์ „๋‹ฌ๋˜์ง€ ์•Š์Œ
      • required: ๋ฐ์ดํ„ฐ๋ฅผ ํ•„์ˆ˜๋กœ ์ž…๋ ฅํ•˜๋„๋ก ๊ฐ•์ œํ•˜๋Š” ์„ค์ •

  • ๋ผ๋ฒจ
    • ํผ ์–‘์‹์— ์ด๋ฆ„์„ ๋ถ™์ด๋Š” ์š”์†Œ

    • ๋‹ค๋ฅธ ์š”์†Œ๋ฅผ ์—ฐ๊ฒฐํ•˜๋ฉด ํ•ด๋‹น ์˜์—ญ์ด ๋„“์–ด์ง

    • radio, checkbox์˜ ์Šคํƒ€์ผ์„ ์„ค์ •

      <label for="์š”์†Œ์˜ id">ํ…์ŠคํŠธ ๋˜๋Š” ์ด๋ฏธ์ง€</label>
  • ๋ฒ„ํŠผ
    • ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์€ <input type=โ€submitโ€>

    • ์ผ๋ฐ˜ ๋ฒ„ํŠผ์œผ๋กœ ์‚ฌ์šฉํ•˜๋ ค๋ฉด <button type=โ€buttonโ€></button>

      <button>๋ฒ„ํŠผ์— ์“ฐ์ผ ํ…์ŠคํŠธ</button>
  • ์„ ํƒ์ƒ์ž
    • ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์˜ต์…˜์ด ๋“œ๋กญ๋‹ค์šด ๋ฆฌ์ŠคํŠธ๋กœ ๋˜์–ด ์žˆ์œผ๋ฉฐ ๊ทธ ์ค‘์—์„œ ๋‹จ ํ•˜๋‚˜์˜ ์˜ต์…˜๋งŒ์„ ์„ ํƒ

      <select name=''>
      	<option value="">์•„์ดํ…œ1</option>
      	<option value="">์•„์ดํ…œ1</option>
      	...
      </select>
  • ์—ฌ๋Ÿฌ์ค„ ๊ธ€์ƒ์ž
    • ์—ฌ๋Ÿฌ์ค„์˜ ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅ๋ฐ›๋Š” ๊ธ€์ƒ์ž

      <textarea name="">value</textarea>

  • HTMl์˜ ๋””์Šคํ”Œ๋ ˆ์ด
    1. inline
      • content ํฌ๊ธฐ๋งŒํผ ์ž๋ฆฌ๋ฅผ ์ฐจ์ง€ํ•˜๋Š” ์š”์†Œ
      • ํ…์ŠคํŠธ, img, span
      • ๋ฌธ์ž(ํ…์ŠคํŠธ)์˜ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ
    2. block
      • ๋ผ์ธ์„ ๋ชจ๋‘ ์ฐจ์ง€ํ•˜๋Š” ์š”์†Œ
      • p, h, ul, li, divโ€ฆ
      • ๋ฉด์˜ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ
    • span ํƒœ๊ทธ
      • ์ค„ ๋‹จ์œ„๋กœ ์˜์—ญ์ด ์„ค์ •
      • inline ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ
    • div ํƒœ๊ทธ
      • ๋ฉด ๋‹จ์œ„๋กœ ์˜์—ญ์ด ์„ค์ •
      • block ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ
  • ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ
    • Semantic: ์˜๋ฏธ๋ก ์ ์ธ

    • ์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉ

      ๐Ÿ˜‹ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ์˜ ์žฅ์ 

    1. ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™”
    2. ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํŽ˜์ด์ง€๋ฅผ ํƒ์ƒ‰ํ•  ๋•Œ ๋„์›€
    3. ๋์—†๋Š” div๋ฅผ ํƒ์ƒ‰ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ํšจ์œจ์ 
    4. ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋ช…ํ™•ํ•œ ์˜๋ฏธ๋ฅผ ์ „๋‹ฌ
    • header
      • ํŽ˜์ด์ง€์˜ ์ œ๋ชฉ๊ณผ ๊ฐ™์€ ์†Œ๊ฐœ ๋‚ด์šฉ์„ ํฌํ•จ
      • heading ํƒœ๊ทธ๋‚˜ ๋กœ๊ณ  ์ €์ž‘๊ถŒ ์ •๋ณด, ๊ฒ€์ƒ‰ ์–‘์‹, ์ž‘์„ฑ์ž ์ด๋ฆ„ ๋“ฑ์„ ํฌํ•จ
    • nav
      • ๋ฉ”๋‰ด, ๋ชฉ์ฐจ ๋“ฑ์— ์‚ฌ์šฉ
    • main
      • ์ง€๋ฐฐ์ ์ธ ์ปจํ…์ธ  ์˜์—ญ์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ
    • section
      • ๊ตฌ์ฒด์ ์ธ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๊ฐ€ ์—†๋Š” ๋ฌธ์„œ์˜ ๋…๋ฆฝ์ ์ธ ์˜์—ญ์„ ๋‚˜ํƒ€๋ƒ„
      • ์„น์…˜์—๋Š” ํ•ญ์ƒ ์ œ๋ชฉ์ด ์žˆ๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์ 
    • article
      • ์ž์ฒด๋กœ ์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ์›น์‚ฌ์ดํŠธ ๋ถ€๋ถ„์ด๋ฉฐ, ๋…๋ฆฝ์ ์œผ๋กœ ๋ฐฐํฌ ๋˜๋Š” ์žฌ์‚ฌ์šฉ๋˜๋„๋ก ์˜๋„๋œ ๋ฌธ์„œ
      • ๊ฒŒ์‹œ๋ฌผ, ์žก์ง€ ๋˜๋Š” ์‹ ๋ฌธ๊ธฐ์‚ฌ
    • footer
      • ์ž‘์„ฑ์ž์— ๋Œ€ํ•œ ์ •๋ณด, ์ €์ž‘๊ถŒ ๋ฐ์ดํ„ฐ ๋˜๋Š” ๊ด€๋ จ ๋ฌธ์„œ์— ๋Œ€ํ•œ ๋งํฌ, ์นดํ”ผ๋ผ์ดํŠธ๋ฅผ ํฌํ•จ
    • aside
      • ๊ฐ„์ ์ ์œผ๋กœ ๋ฌธ์„œ์™€ ๊ด€๋ จ๋œ ๋‚ด์šฉ
      • ์‚ฌ์ด๋“œ๋ฐ” ๋˜๋Š” ์ฝœ์•„์›ƒ ์ƒ์ž


  • indent-rainbow : ๋“ค์—ฌ์“ฐ๊ธฐ์— ์ปฌ๋Ÿฌ๊ฐ€ ์ž…ํ˜€์ง

  • CSS(Cascading Style Sheets)
    • ์›น ํŽ˜์ด์ง€์˜ ํŠน์ • ์š”์†Œ ๋˜๋Š” ์š”์†Œ ๊ทธ๋ฃน์— ์ ์šฉํ•  ์Šคํƒ€์ผ ๊ทธ๋ฃน์„ ์ง€์ •ํ•˜๋Š” ๊ทœ์น™์„ ์ •์˜ํ•˜๋Š” ์–ธ์–ด
  • CSS ๋ฌธ๋ฒ•
    • HTML <head> ์š”์†Œ ์•ˆ์— <style> ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ CSS ๋ฌธ๋ฒ•์„ ์ ์šฉ

      ์„ ํƒ์ž {์†์„ฑ๋ช…1: ์†์„ฑ๊ฐ’;...}
  • ์ฃผ์„๋ฌธ
    • / ~ / ์‚ฌ์ด์— ๋‚ด์šฉ์„ ์ž…๋ ฅ
  • CSS๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•
    1. inline ์Šคํƒ€์ผ

      • HTML ์š”์†Œ ๋‚ด๋ถ€์— style ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•
    2. ๋‚ด๋ถ€ ์Šคํƒ€์ผ

      • HTML ๋ฌธ์„œ์˜ <head>~</head> ์‚ฌ์ด์— <style>~</style> ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•
    3. ์™ธ๋ถ€ ์Šคํƒ€์ผ

      • ์›น ์‚ฌ์ดํŠธ ์ „์ฒด์˜ ์Šคํƒ€์ผ์„ ํ•˜๋‚˜์˜ ํŒŒ์ผ์—์„œ ๋ณ€๊ฒฝ
      <link href="css ํŒŒ์ผ๊ฒฝ๋กœ" rel="stylesheet">

      ๐Ÿ˜‘ rel

      ํ˜„์žฌ ๋ฌธ์„œ์™€ ๋งํฌ๋œ ๋ฌธ์„œ ์‚ฌ์ด์˜ ์—ฐ๊ด€ ๊ด€๊ณ„๋ฅผ ๋ช…์‹œ

  • ์„ ํƒ์ž
    1. ์ „์ฒด ์„ ํƒ์ž

      • ์Šคํƒ€์ผ์„ ๋ชจ๋“  ์š”์†Œ์— ์ ์šฉ

      ๐Ÿ˜ฃ ๊ฐœ๋ณ„์ ์œผ๋กœ ์ ์šฉํ•œ ์Šคํƒ€์ผ์€ ์ „์ฒด ์„ ํƒ์ž์— ์ ์šฉํ•œ ์Šคํƒ€์ผ๋ณด๋‹ค ์šฐ์„ 

    2. ์š”์†Œ ์„ ํƒ์ž

      • ํŠน์ • ์š”์†Œ๊ฐ€ ์“ฐ์ธ ๋ชจ๋“  ์š”์†Œ์— ์Šคํƒ€์ผ์„ ์ ์šฉ

      ๐Ÿ™„ ์ƒ์†

      ๋ถ€๋ชจ ์š”์†Œ์˜ ์†์„ฑ๊ฐ’์ด ์ž์‹ ์š”์†Œ์—๊ฒŒ ์ „๋‹ฌ๋˜๋Š” ๊ฒƒ

profile
tistory๋กœ ์ด์ „! https://sweet-rain-kim.tistory.com/

0๊ฐœ์˜ ๋Œ“๊ธ€