Front End/HTML, CSS

์›น ํ‘œ์ค€

๐ŸŒ

์›น(Web)

์›น์ด๋ผ ํ•˜๋ฉด ์ธํ„ฐ๋„ท ๊ทธ ์ž์ฒด๋ฅผ ๋– ์˜ฌ๋ฆฌ๋Š” ์‚ฌ๋žŒ๋“ค์ด ๋งŽ๊ฒ ์ง€๋งŒ, ์‚ฌ์‹ค์€ ์ธํ„ฐ๋„ท์ด ์›น๋ณด๋‹ค ์กฐ๊ธˆ ๋” ํฌ๊ด„์ ์ธ ๊ฐœ๋…์ด๋‹ค. ์ธํ„ฐ๋„ท์€ ์ „ ์„ธ๊ณ„์ ์œผ๋กœ ์—ฐ๊ฒฐ๋œ ์ปดํ“จํ„ฐ ๋„คํŠธ์›Œํฌ ํ†ต์‹ ๋ง์„ ์˜๋ฏธํ•˜๋ฉฐ, ์›น์€ ๋ฌธ์„œ, ์ด๋ฏธ์ง€, ์˜์ƒ ๋“ฑ ๋‹ค์–‘ํ•œ ์ •๋ณด๋ฅผ ์—ฌ๋Ÿฌ ์‚ฌ๋žŒ๊ณผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ์ผ์ข…์˜ ๊ณต๊ฐ„์ด์ž ํ”Œ๋žซํผ์ด๋‹ค.

์›น ํ‘œ์ค€

์›น ํ‘œ์ค€์ด๋ž€ W3C(World Wide Web Consortium)์—์„œ ๊ถŒ๊ณ ํ•˜๋Š” โ€˜์›น์—์„œ ํ‘œ์ค€์ ์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ์ˆ ์ด๋‚˜ ๊ทœ์น™โ€™์œผ๋กœ, ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋– ํ•œ ์šด์˜์ฒด์ œ๋‚˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋”๋ผ๋„ ์›น ํŽ˜์ด์ง€๊ฐ€ ๋™์ผํ•˜๊ฒŒ ๋ณด์ด๊ณ  ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ์›น ํŽ˜์ด์ง€ ์ œ์ž‘ ๊ธฐ๋ฒ•์„ ๋‹ด๊ณ  ์žˆ๋‹ค. ์›น ๊ฐœ๋ฐœ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์–ธ์–ด์ธ HTML, CSS, JavaScript ๋“ฑ์˜ ๊ธฐ์ˆ ์„ ๋‹ค๋ฃจ๋ฉฐ ์ด๋“ค์€ ๊ฐ๊ฐ ํ™”๋ฉด์˜ ๊ตฌ์กฐ, ํ‘œํ˜„, ๋™์ž‘์„ ๋‹ด๋‹นํ•œ๋‹ค.

ํฌ๋กฌ, ์—ฃ์ง€, ์‚ฌํŒŒ๋ฆฌ, ์˜คํŽ˜๋ผ, ํŒŒ์ด์–ดํญ์Šค ๋“ฑ ์ตœ์‹  ์›น ๋ธŒ๋ผ์šฐ์ €๋“ค์€ ๋ชจ๋‘ ์›น ํ‘œ์ค€์„ ์ง€์›ํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ์›น ํ‘œ์ค€์— ๋งž์ถ”์–ด ์›นํŽ˜์ด์ง€๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ์–ด๋–ค ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋“  ๋™์ผํ•œ ๊ฒฐ๊ณผ๋ฌผ์„ ์–ป์„ ์ˆ˜ ์žˆ๊ณ , ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜ ๋•Œ๋ฌธ์— ํ™”๋ฉด์ด ์ œ๋Œ€๋กœ ํ‘œ์‹œ๋˜์ง€ ์•Š๊ฑฐ๋‚˜ ๊ธฐ๋Šฅ์ด ์ž‘๋™๋˜์ง€ ์•Š๋Š” ๋ฌธ์ œ ์ƒํ™ฉ์„ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค.

์›น ํ‘œ์ค€์˜ ์žฅ์ 

  1. ์œ ์ง€ ๋ณด์ˆ˜์˜ ์šฉ์ด์„ฑ

    ์›น ํ‘œ์ค€์œผ๋กœ HTML, CSS, JavaScript ๋“ฑ์˜ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์„ ์ •๋ฆฌํ•˜๊ธฐ ์ด์ „์—๋Š” ๊ตฌ์กฐ, ํ‘œํ˜„, ๋™์ž‘์ด ๋’ค์„ž์ธ ์ฝ”๋“œ, ์ฆ‰ ๊ด€์‹ฌ์‚ฌ ๋ถ„๋ฆฌ๊ฐ€ ์•ˆ๋œ ์ฝ”๋“œ๋„ ๋งŽ์•˜๊ธฐ ๋•Œ๋ฌธ์— ์–ด๋Š ํ•œ ๋ถ€๋ถ„์„ ์ˆ˜์ •ํ•˜๊ธฐ ์œ„ํ•ด ์ „๋ถ€ ๋œฏ์–ด๊ณ ์ณ์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ฐ ์˜์—ญ์ด ๋ถ„๋ฆฌ๋˜๋ฉฐ ์œ ์ง€ ๋ณด์ˆ˜๊ฐ€ ์šฉ์ดํ•ด์กŒ๊ณ  ์ฝ”๋“œ๊ฐ€ ๊ฒฝ๋Ÿ‰ํ™”๋˜๋ฉฐ ํŠธ๋ž˜ํ”ฝ ๋น„์šฉ ์—ญ์‹œ ๊ฐ์†Œํ•˜๋Š” ํšจ๊ณผ๊ฐ€ ์žˆ๋‹ค.

  1. ์›น ํ˜ธํ™˜์„ฑ ํ™•๋ณด

    ๊ณผ๊ฑฐ IE์˜ ActiveX ํ™˜๊ฒฝ์ฒ˜๋Ÿผ ์›น ์‚ฌ์ดํŠธ๊ฐ€ ํŠน์ • ์šด์˜์ฒด์ œ๋‚˜ ๋ธŒ๋ผ์šฐ์ €์— ์ข…์†์ ์ด๋ผ๋ฉด ๊ทธ ์™ธ ํ™˜๊ฒฝ์—์„œ๋Š” ์ •์ƒ์ ์œผ๋กœ ์‚ฌ์šฉ์ด ๋ถˆ๊ฐ€๋Šฅํ–ˆ๋‹ค. ์›น ํ‘œ์ค€์„ ์ค€์ˆ˜ํ•˜์—ฌ ์›น ์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•˜๋ฉด ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ์ข…๋ฅ˜๋‚˜ ๋ฒ„์ „, ์šด์˜ ์ฒด์ œ๋‚˜ ๋””๋ฐ”์ด์Šค์— ์ƒ๊ด€ ์—†์ด ๋™์ผํ•œ ์ปจํ…์ธ ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋‹ค.

  1. ๊ฒ€์ƒ‰ ํšจ์œจ์„ฑ ์ฆ๋Œ€

    ์ ์ ˆํ•œ HTML ์š”์†Œ(์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ ๋“ฑ)์˜ ์‚ฌ์šฉ, ์›น ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ์ •ํ™•ํ•œ ์ •๋ณด ์ž‘์„ฑ ๋“ฑ ๊ฒ€์ƒ‰ ํšจ์œจ์„ฑ๊ณผ ๊ด€๋ จ๋œ ๋‚ด์šฉ์„ ์›น ํ‘œ์ค€์—์„œ ๋‹ค๋ฃจ๊ณ  ์žˆ์–ด ๊ฒ€์ƒ‰์˜ ํšจ์œจ์„ฑ์„ ๋†’์ด๊ณ  ๊ฒ€์ƒ‰ ์—”์ง„์—์„œ์˜ ์ƒ์œ„ ๋…ธ์ถœ์— ์œ ๋ฆฌํ•œ ํšจ๊ณผ๊ฐ€ ์žˆ๋‹ค.

  1. ์›น ์ ‘๊ทผ์„ฑ ํ–ฅ์ƒ

    ์›น ํŽ˜์ด์ง€๋Š” ๋‹จ์ˆœํžˆ ๋ธŒ๋ผ์šฐ์ €, ์šด์˜์ฒด์ฒด, ๋””๋ฐ”์ด์Šค๋งŒ ๊ณ ๋ คํ•  ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์‹ค์งˆ์ ์œผ๋กœ ์›น์— ์ ‘๊ทผํ•˜๋Š” ์ฃผ์ฒด์ธ ์‚ฌ์šฉ์ž ์—ญ์‹œ ๊ณ ๋ คํ•ด์•ผ ํ•œ๋‹ค. ์›น ํ‘œ์ค€์€ ๋‹ค์–‘ํ•œ ์‚ฌ์šฉ์ž๋ฅผ ๊ณ ๋ คํ•˜๋Š” ๋‚ด์šฉ๋„ ํฌํ•จํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์›น ํ‘œ์ค€์— ๋งž์ถฐ ๊ฐœ๋ฐœํ•˜๋ฉด ์ ‘๊ทผ์„ฑ ๋ฌธ์ œ๋„ ๋งŽ์€ ๋ถ€๋ถ„์„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

Semantic HTML

์›น ํ‘œ์ค€์—์„œ๋Š” HTML์„ ์‹œ๋งจํ‹ฑ(semantic), ์ฆ‰ ์˜๋ฏธ ์žˆ๊ฒŒ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค. HTML์ด ๊ตฌ์กฐ๋ผ๋ฉด, ๋‹จ์ˆœํžˆ ๊ตฌ์กฐ๋ฅผ ๋„˜์–ด ์˜๋ฏธ๋ฅผ ๊ฐ–์ถ˜ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค๋Š” ๋œป์ด๋‹ค.

๋‹จ์ˆœํžˆ ์˜์—ญ์œผ๋กœ ๊ตฌ์กฐํ™”ํ•œ HTML
๊ฐ ์˜์—ญ์˜ ์˜๋ฏธ๋ฅผ ๋‚ดํฌํ•œ HTML

์‹œ๋งจํ‹ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ๊ฐ ์š”์†Œ์˜ ์ด๋ฆ„๋งŒ ๋ณด๊ณ ๋„ ํ™”๋ฉด์—์„œ ์–ด๋–ค ์—ญํ• ์„ ํ•˜๊ณ  ์–ด๋–ค ๋‚ด์šฉ์„ ๋‹ด๊ฒŒ ๋ ์ง€ ๋ช…ํ™•ํ•˜๊ฒŒ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. ์ด์ฒ˜๋Ÿผ ์š”์†Œ๊ฐ€ ์–ด๋–ค ๋‚ด์šฉ์„ ๋‹ด๊ฒŒ ๋ ์ง€ ์–ด๋–ค ๊ธฐ๋Šฅ์„ ํ•˜๊ฒŒ ๋ ์ง€ ํ™•์‹คํ•˜๊ฒŒ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€๊ณ ์žˆ๋Š” ์š”์†Œ๋ฅผ ์‹œ๋งจํ‹ฑ ์š”์†Œ๋ผ ํ•˜๊ณ  ์ด๋ฅผ ์ ์ ˆํžˆ ์‚ฌ์šฉํ•ด ๊ตฌ์„ฑํ•œ HTML์„ ์‹œ๋งจํ‹ฑ HTML์ด๋ผ ์ผ์ปซ๋Š”๋‹ค.

์‹œ๋งจํ‹ฑ HTML์˜ ํ•„์š”์„ฑ

  1. ๊ฐœ๋ฐœ์ž๊ฐ„ ์†Œํ†ต

    ์‹œ๋งจํ‹ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ ์š”์†Œ์˜ ์—ญํ• ๊ณผ ๋‚ด์šฉ์ด ์ด๋ฏธ ์ •ํ•ด์ ธ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ์ผ์ผ์ด ์˜์—ญ์˜ id๋‚˜ class๋ฅผ ์ •์˜ํ•˜๊ฑฐ๋‚˜ ์‚ฌ์ „์— ํ˜‘์˜ ํ•  ํ•„์š”์—†์ด ์›ํ• ํ•œ ์†Œํ†ต์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

  1. ๊ฒ€์ƒ‰ ํšจ์œจ์„ฑ

    ๊ฒ€์ƒ‰ ์—”์ง„์€ HTML ์ฝ”๋“œ๋ฅผ ๋ณด๊ณ  ๋ฌธ์„œ์˜ ๊ตฌ์กฐ๋ฅผ ํŒŒ์•…ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‹œ๋งจํ‹ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ์–ด๋–ค ์š”์†Œ์— ๋” ์ค‘์š”ํ•œ ๋‚ด์šฉ์ด ๋“ค์–ด์žˆ์„์ง€ ์šฐ์„  ์ˆœ์œ„๋ฅผ ์ •ํ•  ์ˆ˜ ์žˆ๊ณ , ์šฐ์„  ์ˆœ์œ„๊ฐ€ ๋†’๋‹ค๊ณ  ํŒŒ์•…๋œ ํŽ˜์ด์ง€๋ฅผ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ์ƒ๋‹จ์— ํ‘œ์‹œํ•˜๊ฒŒ ๋œ๋‹ค.

  1. ์›น ์ ‘๊ทผ์„ฑ

    ์›น ์ ‘๊ทผ์„ฑ์€ ๋‚˜์ด, ์„ฑ๋ณ„, ์žฅ์•  ์—ฌ๋ถ€, ์‚ฌ์šฉ ํ™˜๊ฒฝ์„ ๋– ๋‚˜ ํ•ญ์ƒ ๋™์ผํ•œ ์ˆ˜์ค€์˜ ์ปจํ…์ธ ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•จ์„ ๋œปํ•œ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์›น์„ ์‚ฌ์šฉํ•˜๋Š” ์ƒํ™ฉ์ด ์•„๋‹ˆ๋ผ๋ฉด(์Šคํฌ๋ฆฐ ๋ฆฌ๋” ๋“ฑ) ์ด๋Ÿฐ ์‹œ๋งจํ‹ฑ ์š”์†Œ๊ฐ€ ๊ฐ๊ฐ ์–ด๋–ค ์—ญํ• ์ธ์ง€ ํ™”๋ฉด ๊ตฌ์กฐ์— ๋Œ€ํ•œ ์ •๋ณด๊นŒ์ง€ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์–ด ์ปจํ…์ธ ๋ฅผ ๋” ์ •ํ™•ํ•˜๊ฒŒ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

์ž์ฃผ ์“ฐ์ด๋Š” ์‹œ๋งจํ‹ฑ ์š”์†Œ

์š”์†Œ ์ข…๋ฅ˜์„ค๋ช…
<header>ํŽ˜์ด์ง€๋‚˜ ์š”์†Œ์˜ ์ตœ์ƒ๋‹จ์— ์œ„์น˜ํ•˜๋Š” ๋จธ๋ฆฟ๋ง ์—ญํ• ์˜ ์š”์†Œ
<nav>๋ฉ”๋‰ด, ๋ชฉ์ฐจ ๋“ฑ์— ์‚ฌ์šฉ๋˜๋Š” ์š”์†Œ
<aside>๋ฌธ์„œ์™€ ์—ฐ๊ด€์€ ์žˆ์ง€๋งŒ, ์ง์ ‘์ ์ธ ์—ฐ๊ด€์€ ์—†๋Š” ๋‚ด์šฉ์„ ๋‹ด๋Š” ์š”์†Œ
<main>์ด๋ฆ„ ๊ทธ๋Œ€๋กœ ๋ฌธ์„œ์˜ ๋ฉ”์ธ์ด ๋˜๋Š” ์ฃผ์š” ์ฝ˜ํ…์ธ ๋ฅผ ๋‹ด๋Š” ์š”์†Œ
<article>๊ฒŒ์‹œ๊ธ€, ๋‰ด์Šค ๊ธฐ์‚ฌ ๋“ฑ ๋…๋ฆฝ์ ์œผ๋กœ ๊ตฌ๋ถ„ํ•ด ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์„ ์˜๋ฏธํ•˜๋Š” ์š”์†Œ. ๊ฐ๊ฐ์˜ <article>์„ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•œ ์ˆ˜๋‹จ์ด ํ•„์š”ํ•˜๋ฉฐ, ๋ณดํ†ต ์ œ๋ชฉ(<hgroup>)์„ ํฌํ•จํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•œ๋‹ค.
<section>๋ฌธ์„œ์˜ ๋…๋ฆฝ์ ์ธ ๊ตฌํš์„ ๋‚˜ํƒ€๋‚ด๋ฉฐ, ๋”ฑํžˆ ์ ํ•ฉํ•œ ์˜๋ฏธ์˜ ์š”์†Œ๊ฐ€ ์—†์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ์ œ๋ชฉ(<hgroup>)์„ ํฌํ•จํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค.
<hgroup>์ œ๋ชฉ์„ ํ‘œ์‹œํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์š”์†Œ๋กœ, <h1> ~ <h6> ์š”์†Œ๊ฐ€ <hgroup>์ด๋‹ค.
<footer>ํŽ˜์ด์ง€๋‚˜ ์š”์†Œ์˜ ์ตœํ•˜๋‹จ์— ์œ„์น˜ํ•˜๋Š” ๊ผฌ๋ฆฟ๋ง ์—ญํ• ์˜ ์š”์†Œ

<header>

  • ์ผ๋ฐ˜์ ์œผ๋กœ ํŽ˜์ด์ง€ ์ตœ์ƒ๋‹จ์— ์œ„์น˜ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์œผ๋ฉฐ, ์ด ๊ฒฝ์šฐ ์‚ฌ์ดํŠธ ์ „์ฒด์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋‚ด์šฉ์„ ๋‹ด๋Š”๋‹ค. ๋กœ๊ณ , ์‚ฌ์ดํŠธ ์ด๋ฆ„, ์‚ฌ์ดํŠธ ์ „์ฒด ๋ฉ”๋‰ด(<nav>), ๊ฒ€์ƒ‰ ํผ ๋“ฑ์˜ ์ปจํ…์ธ ๊ฐ€ ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ๋‹ค.
  • ๊ผญ ์‚ฌ์ดํŠธ ์ „์ฒด๊ฐ€ ์•„๋‹ˆ๋”๋ผ๋„ <article>, <main> ๋“ฑ ๋‹ค๋ฅธ ์š”์†Œ์˜ ๋จธ๋ฆฟ๋ง ์—ญํ• ๋กœ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

<nav>

  • ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ”์˜ ์—ญํ• ๋กœ, ์‚ฌ์ดํŠธ ๋‚ด์— ์ด์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋งํฌ๋“ค์„ ๋‹ด๋Š”๋‹ค.
  • <header>์— GNB๊ฐ€ ์œ„์น˜ํ•˜๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์ ์ด๋‚˜, ํ•„์š”์— ๋”ฐ๋ผ ์‚ฌ์ดํŠธ ์ „๋ฐ˜์— ๋‹ค์–‘ํ•˜๊ฒŒ ์œ„์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

<aside>

  • ๋ฉ”์ธ ์ปจํ…์ธ ์™€ ๊ด€๋ จ์ด ์žˆ๊ธด ํ•˜์ง€๋งŒ ์ง์ ‘์ ์ธ ์—ฐ๊ด€์€ ์—†๋Š” ๋‚ด์šฉ์ด ๋“ค์–ด๊ฐ„๋‹ค. ์ปจํ…์ธ ์˜ ๋ชฉ์ฐจ์— ๋”ฐ๋ฅธ ๋ถ๋งˆํฌ(๋ฐ”๋กœ๊ฐ€๊ธฐ)๋‚˜, ์œ„์ ฏ, ๊ด‘๊ณ ๋“ฑ์ด ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์ ์ด๋‹ค.

<main>

  • ํŽ˜์ด์ง€์˜ ๋ฉ”์ธ ์ปจํ…์ธ ๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ์š”์†Œ์ด๋ฉฐ, ํ•ด๋‹น ํŽ˜์ด์ง€์˜ ์ฃผ์ œ์™€ ๊ด€๋ จํ•œ ๋‚ด์šฉ์„ ํฌ๊ด„์ ์œผ๋กœ ํฌํ•จํ•˜๋Š” ์ผ์ข…์˜ ์ปจํ…Œ์ด๋„ˆ ์—ญํ• ์„ ๋งก๋Š”๋‹ค.

<article>

  • ๊ฒŒ์‹œ๊ธ€, ๋‰ด์Šค ๊ธฐ์‚ฌ ์ฒ˜๋Ÿผ ๋…๋ฆฝ์ ์œผ๋กœ ๊ตฌ๋ถ„ํ•ด ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์„ ์˜๋ฏธํ•˜๋ฉฐ, ์žฌ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„์ธ ๋งŒํผ ๊ฐ๊ฐ์˜ <article>์„ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œ๋ชฉ(<hgroup>) ๊ณผ ๊ฐ™์€ ์š”์†Œ๋ฅผ ํฌํ•จํ•ด์•ผ ํ•œ๋‹ค.

<section>

  • ๋ฌธ์„œ์˜ ๋…๋ฆฝ์ ์ธ ๊ตฌํš์„ ๋‚˜ํƒ€๋‚ด์ง€๋งŒ ๋”ฑํžˆ ์ ํ•ฉํ•œ ์˜๋ฏธ์˜ ์‹œ๋งจํ‹ฑ ์š”์†Œ๊ฐ€ ์—†์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ์ ํ•ฉํ•œ ์˜๋ฏธ์˜ ์š”์†Œ๊ฐ€ ์—†์„ ๋•Œ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์˜๋ฏธ ๋ถ€์—ฌ๋ฅผ ์œ„ํ•œ ์ œ๋ชฉ(<hgroup>)๊ณผ ๊ฐ™์€ ์š”์†Œ๋ฅผ ํฌํ•จํ•ด์•ผ ํ•œ๋‹ค.

<hgroup>

  • ์ œ๋ชฉ์„ ํ‘œ์‹œํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋ฉฐ, <h1> ๋ถ€ํ„ฐ <h6> ๊นŒ์ง€ ์žˆ๋‹ค.
  • ์ˆซ์ž๊ฐ€ ํด ์ˆ˜๋ก ๊ธ€์ž์˜ ํฌ๊ธฐ๋Š” ์ž‘์•„์ง€๋ฉฐ, ์ˆซ์ž๊ฐ€ ์ž‘์€ ์ œ๋ชฉ์ด ์ˆซ์ž๊ฐ€ ํฐ ์ œ๋ชฉ์„ ํฌํ•จํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉํ•ด ๊ฐ ๊ตฌ์—ญ๊ณผ ๋‚ด์šฉ์˜ ์ƒ๊ด€ ๊ด€๊ณ„์™€ ํฌํ•จ๊ด€๊ณ„๋ฅผ ํ•จ๊ป˜ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

    โ†’ ex. <h1>์ธ ์ „์ฒด ๋‚ด์šฉ(<article>) ์•ˆ์— <h2>์ธ ํ•ญ๋ชฉ(<section>)์ด ์žˆ๋Š” ํ˜•ํƒœ

<footer>

  • ํŽ˜์ด์ง€๋‚˜ ์š”์†Œ ์ตœํ•˜๋‹จ์— ์œ„์น˜ํ•˜๋Š” ๊ผฌ๋ฆฟ๋ง ์—ญํ• ์„ ํ•˜๋Š” ์š”์†Œ์ด๋ฉฐ, ์‚ฌ์ดํŠธ ์ œ๊ณต์ž, ์ €์ž‘๊ถŒ, ์ •์ฑ…, ์‚ฌ์ดํŠธ๋งต ๋“ฑ์˜ ๋‚ด์šฉ์„ ํฌํ•จํ•œ๋‹ค.

์›น ํ‘œ์ค€์„ ์œ„ํ•œ ๋งˆํฌ์—… ์‹œ ์ฃผ์˜์‚ฌํ•ญ

  1. ์ธ๋ผ์ธ ์š”์†Œ ์•ˆ์— ๋ธ”๋ก ์š”์†Œ๋Š” ๋„ฃ์ง€ ์•Š๋Š”๋‹ค

    ์ธ๋ผ์ธ ์š”์†Œ๋Š” ํ•ญ์ƒ ๋ธ”๋ก ์š”์†Œ ์•ˆ์— ๋“ค์–ด๊ฐ€์•ผ ํ•˜๋ฉฐ, ๋ฐ˜๋Œ€์˜ ๊ฒฝ์šฐ๋Š” ์žˆ์–ด์„  ์•ˆ๋œ๋‹ค.

  1. <b>, <i> ๋Œ€์‹  <strong>, <em>

    <b>์™€ <i>๋Š” ๊ฐ๊ฐ ๊ธ€์”จ๋ฅผ ๊ตต๊ฒŒ ๋งŒ๋“ค ๋•Œ, ๊ธ€์”จ๋ฅผ ๊ธฐ์šธ์ผ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์š”์†Œ์ด์ง€๋งŒ ์‹œ๋งจํ‹ฑํ•˜์ง€ ์•Š์€, ํ‘œํ˜„์„ ๊ธฐ์ค€์œผ๋กœ ์ด๋ฆ„์ด ์ง€์–ด์ง„ ์š”์†Œ์ด๊ธฐ ๋•Œ๋ฌธ์— ํ‘œํ˜„์€ ๋™์ผํ•˜๋ฉด์„œ๋„ ๋‚ด์šฉ๊นŒ์ง€ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š” <strong>, <em>์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

  1. <hgroup> ๋งˆ๊ตฌ์žก์ด๋กœ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ธฐ

    ํ•ด๋‹น ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ธ€์ž์˜ ํฌ๊ธฐ๊ฐ€ ์ปค์ง€๋‹ค ๋ณด๋‹ˆ ์˜๋ฏธ๊ฐ€ ์•„๋‹Œ ์Šคํƒ€์ผ์„ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋Š”๋ฐ, ์—„์—ฐํžˆ ๋‚ด์šฉ์˜ ๊ตฌ์กฐ์ ์ธ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง„ ์š”์†Œ์ด๊ธฐ ๋•Œ๋ฌธ์— ์Šคํƒ€์ผ๋งŒ์„ ๋ชฉ์ ์œผ๋กœ ์“ด๋‹ค๋ฉด ์‚ฌ์šฉ์ž์—๊ฒŒ ์™„์ „ํžˆ ์ž˜๋ชป๋œ ํ™”๋ฉด ๊ตฌ์กฐ ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•˜๊ฒŒ ๋œ๋‹ค.

  1. <br /> ์—ฐ์†์œผ๋กœ ์‚ฌ์šฉ์€ ๊ธˆ๋ฌผ

    <br />์€ ์ญ‰ ์ด์–ด์ง€๋Š” ํ…์ŠคํŠธ ํ๋ฆ„์— ์ค„ ๋ฐ”๊ฟˆ์„ ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ์š”์†Œ์ด๊ธฐ ๋•Œ๋ฌธ์— ์š”์†Œ ์‚ฌ์ด์— ๊ฐ„๊ฒฉ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋ชฉ์ ์œผ๋กœ ๋‚จ๋ฐœํ•ด์„  ์•ˆ๋œ๋‹ค. ์š”์†Œ ์‚ฌ์ด์— ๊ฐ„๊ฒฉ์ด ํ•„์š”ํ•˜๋‹ค๋ฉด ๋ณ„๋„์˜ ๋‹จ๋ฝ(<p>)์œผ๋กœ ๊ตฌ๋ถ„ํ•˜๊ฑฐ๋‚˜, CSS ์†์„ฑ(margin, padding ๋“ฑ)์„ ์ฃผ์–ด ์—ฌ๋ฐฑ์„ ์กฐ์ •ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

  1. ์ธ๋ผ์ธ ์Šคํƒ€์ผ๋ง ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ธฐ

    HTML์˜ ์š”์†Œ ์†์„ฑ(style=โ€โ€)์œผ๋กœ ์Šคํƒ€์ผ์„ ์ฃผ๋Š” ๊ฒƒ์€ ์›น ํ‘œ์ค€์˜ ์žฅ์  ์ค‘ ํ•˜๋‚˜์ธ ๊ด€์‹ฌ์‚ฌ ๋ถ„๋ฆฌ์— ๋งž์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, CSS ํŒŒ์ผ์„ ํ†ตํ•ด ์Šคํƒ€์ผ์„ ์ฃผ์–ด์•ผ ํ•œ๋‹ค.

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•(Cross Browsing)

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์€ ์›น ์‚ฌ์ดํŠธ์— ์ ‘๊ทผํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ ์ข…๋ฅ˜์— ์ƒ๊ด€ ์—†์ด ๋™๋“ฑํ•œ ํ™”๋ฉด๊ณผ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“œ๋Š” ์ž‘์—…์„ ์˜๋ฏธํ•œ๋‹ค. ์—ฌ๊ธฐ์„œ โ€˜๋™์ผํ•œโ€™์ด ์•„๋‹ˆ๋ผ โ€˜๋™๋“ฑํ•œโ€™ ์ด๋ž€ ํ‘œํ˜„์„ ์ผ๋Š”๋ฐ, ์ด๋Š” ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์ด ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์™„์ „ํžˆ ๋˜‘๊ฐ™์€ ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ์‚ฌ์šฉํ•˜๋Š” ๋ Œ๋”๋ง ์—”์ง„์ด ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด์„ ์™„์ „ํžˆ ๋™์ผํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ์€ ๋ถˆ๊ฐ€๋Šฅ ํ•˜๋ฉฐ, ๋”ฐ๋ผ์„œ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์˜ ๋ชฉํ‘œ๋Š” โ€˜๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™๋“ฑํ•œ ์ˆ˜์ค€์˜ ์ •๋ณด์™€ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒโ€™์ด๋ผ ํ•  ์ˆ˜ ์žˆ๋‹ค.

์›น ํ‘œ์ค€ ์ž์ฒด๊ฐ€ ์–ด๋–ค ๋ธŒ๋ผ์šฐ์ €๋‚˜ ์šด์˜์ฒด์ œ๋ฅผ ์“ฐ๋”๋ผ๋„ ์›น ํŽ˜์ด์ง€๊ฐ€ ๋™์ผํ•˜๊ฒŒ ๋ณด์ด๊ณ  ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ์›น ํŽ˜์ด์ง€ ์ œ์ž‘ ๊ธฐ๋ฒ•์ด๊ธฐ ๋•Œ๋ฌธ์— ์›น ํŽ˜์ด์ง€ ๊ฐœ๋ฐœ ์‹œ ์›น ํ‘œ์ค€๋งŒ ์ž˜ ์ง€์ผœ๋„ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์„ ์–ด๋Š์ •๋„ ์‹คํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €์— ๋”ฐ๋ผ ์ œ๋Œ€๋กœ ํ‘œ์‹œ ๋˜์ง€ ์•Š๋Š” ํ™”๋ฉด์ด๋‚˜ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ๊ธฐ๋Šฅ์ด ์žˆ์„ ์ˆ˜ ์žˆ์Œ์„ ์•Œ๊ณ  ๊ฐœ์„ ํ•˜๋ ค๋Š” ํƒœ๋„๋งŒ ๊ฐ€์ ธ๋„ ์ถฉ๋ถ„ํ•˜๋‹ค.

๐Ÿค”
ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์˜ ๋Œ€ํ‘œ์  ์‚ฌ๋ก€๋Š” ์ด๋ฏธ ํ‡ด์ถœ๋œ ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ(Internet Explorer, IE)๋ฅผ ๋“ค ์ˆ˜ ์žˆ๋‹ค. ActiveX๋ผ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ์˜ ๋‚จ์šฉ์œผ๋กœ ์ธํ•ด ActiveX ๊ธฐ๋ฐ˜์œผ๋กœ ์„œ๋น„์Šคํ•˜๋Š” ์›น ํŽ˜์ด์ง€๋Š” ์ด์™ธ์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ •์ƒ์ ์ธ ์‚ฌ์šฉ์ด ๋ถˆ๊ฐ€๋Šฅํ–ˆ๊ณ , ActiveX๊ฐ€ ์•„๋‹ˆ๋”๋ผ๋„ ์ตœ์‹  ์ŠคํŽ™์˜ CSS์™€ JavaScript๋ฅผ ์ œ๋Œ€๋กœ ์ง€์›ํ•˜์ง€ ๋ชปํ•˜๋Š” ๋ฌธ์ œ๋กœ ์ธํ•ด ๋‹ค๋ฅธ ์›น ๋ธŒ๋ผ์šฐ์ €๋Š” ์ตœ์‹  ๋ฌธ๋ฒ•์„ ์ง€์›ํ•ด๋„ ์˜ค๋กฏ์ด IE๋ฅผ ์œ„ํ•ด ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์— ์‹œ๊ฐ„๊ณผ ๋น„์šฉ์„ ํˆฌ์žํ•ด์•ผ ํ–ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ด์œ ๋“ค๋กœ IE๋Š” ์›น ๊ฐœ๋ฐœ์ž ์‚ฌ์ด์—์„œ ๊ณต๊ณต์˜ ์ ์œผ๋กœ ๋ถˆ๋ฆฌ๊ฒŒ ๋˜์—ˆ์ง€๋งŒ, ํ˜„์žฌ๋Š” ์•ž์„œ ๋งํ–ˆ๋“ฏ ์ง€์›์ด ์ข…๋ฃŒ๋˜์—ˆ๊ณ  ๋Œ€๋ถ€๋ถ„์˜ ์‚ฌ์šฉ์ž๋“ค์˜ IE๋ฅผ ์“ฐ์ง€ ์•Š์•„ ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ๊ฐ€ ์•„๋‹ˆ๋ฉด IE๋Š” ๊ณ ๋ คํ•˜์ง€ ์•Š๋Š”๋‹ค.
์ž˜ ๊ฐ€์„ธ์š” ์ž˜ ๊ฐ€์„ธ์š” ๊ทธ ํ•œ ๋งˆ๋””์˜€์—ˆ๋„ค

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ์›Œํฌ ํ”Œ๋กœ์šฐ

1. ์ดˆ๊ธฐ ๊ธฐํš

์ดˆ๊ธฐ ๊ธฐํš ๋‹จ๊ณ„์—์„œ๋Š” ์–ด๋–ค ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค ๊ฒƒ์ธ์ง€ ์ •ํ™•ํžˆ ๊ฒฐ์ •ํ•ด์•ผ ํ•œ๋‹ค. ์–ด๋–ค ์ปจํ…์ธ ์™€ ๊ธฐ๋Šฅ์ด ์žˆ์–ด์•ผ ํ•˜๋Š”์ง€, ๋””์ž์ธ์€ ์–ด๋–ป๊ฒŒ ํ• ์ง€ ๋“ฑ์˜ ์‚ฌํ•ญ์„ ๊ฒฐ์ •ํ•ด์•ผ ํ•˜๋ฉฐ ์ดํ›„์—๋Š” ์ด ์‚ฌ์ดํŠธ์˜ ๊ณ ๊ฐ, ์ฆ‰ ํƒ€๊ฒŸ ๊ณ ๊ฐ์„ ๊ณ ๋ คํ•ด ์–ด๋–ค ๋ธŒ๋ผ์šฐ์ €์™€ ๊ธฐ๊ธฐ๋ฅผ ์ฃผ๋กœ ์“ธ์ง€ ๊ณ ๋ฏผํ•˜์—ฌ ์—ฌ๊ธฐ์— ๋งž๋Š” ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•ด ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ธฐํšํ•œ๋‹ค.

2. ๊ฐœ๋ฐœ

์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ๊ฐ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ˜ธํ™˜์„ฑ์ด ์–ด๋–ค์ง€ ํŒŒ์•…ํ•˜๊ณ  ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค. MDN, Can I Use๋“ฑ์˜ ์‚ฌ์ดํŠธ์—์„œ ์ฝ”๋“œ์˜ ํ˜ธํ™˜์„ฑ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์‹œ๋Š” MDN์—์„œ ์ œ๊ณตํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ ์ •๋ณด์ด๋ฉฐ, IE์—์„œ์˜ ํ˜ธํ™˜์„ฑ์ด ์ฒ˜์ฐธํ•œ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ๋งŒ์•ฝ ์ฃผ ํƒ€๊ฒŸ ๊ณ ๊ฐ์˜ IE ์‚ฌ์šฉ ๋น„์œจ์ด ๋†“๋‹ค๋ฉด ํ•ด๋‹น ์ฝ”๋“œ๋Š” ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋‹ค ๋ณด๋ฉด ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์ด ํž˜๋“  ์ƒํ™ฉ์„ ๋งŒ๋‚˜๊ฒŒ ๋  ์ˆ˜๋„ ์žˆ๋Š”๋ฐ, ์ด ๊ฒฝ์šฐ ์ด๋ฅผ ์ธ์ •ํ•˜๊ณ  ๋Œ€์ฒด ์ˆ˜๋‹จ์„ ๋งˆ๋ จํ•ด์•ผ ํ•œ๋‹ค. ๋˜ํ•œ, ๊ฐœ๋ฐœ์ค‘์ธ ์›น ์‚ฌ์ดํŠธ๊ฐ€ ์ผ๋ถ€ ์˜ค๋ž˜๋œ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์–ด์ฉ” ์ˆ˜ ์—†์ด ์ œ๋Œ€๋กœ ๊ธฐ๋Šฅํ•  ์ˆ˜ ์—†์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ๊ณ  ๋ฐ›์•„๋“ค์ด๋Š” ๊ฒƒ๋„ ์ค‘์š”ํ•˜๋‹ค.

3. ํ…Œ์ŠคํŠธ / ๋ฐœ๊ฒฌ

๊ฐ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ ํ›„ ๊ทธ ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ํ…Œ์ŠคํŠธ๊ฐ€ ํ•„์š”ํ•˜๋‹ค. ์ง์ ‘ ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ์ž๋™์œผ๋กœ ํ…Œ์ŠคํŠธ๋ฅผ ์ง„ํ–‰ํ•ด์ฃผ๋Š” ๋„๊ตฌ๋ฅผ ์ด์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค. TestComplete, LambdaTest, BitBar ๋“ฑ์˜ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ํ…Œ์ŠคํŠธ ํˆด์ด ์žˆ๋‹ค.

  • ์•ˆ์ •์ ์ธ ๋ฐ์Šคํฌํ†ฑ ๋ธŒ๋ผ์šฐ์ €(ํฌ๋กฌ, ์—ฃ์ง€, ํŒŒ์ด์–ดํญ์Šค, ์˜คํŽ˜๋ผ, ์‚ฌํŒŒ๋ฆฌ ๋“ฑ)์—์„œ ํ…Œ์ŠคํŠธ ์ง„ํ–‰
  • ํœด๋Œ€ํฐ ๋ฐ ํƒœ๋ธ”๋ฆฟ ๋ธŒ๋ผ์šฐ์ €(์‚ผ์„ฑ ์ธํ„ฐ๋„ท, ์‚ฌํŒŒ๋ฆฌ, ๋ชจ๋ฐ”์ผ ํฌ๋กฌ ๋“ฑ)์—์„œ ํ…Œ์ŠคํŠธ ์ง„ํ–‰
  • ์ดˆ๊ธฐ ๊ธฐํš ๋‹จ๊ณ„์—์„œ ๋ชฉํ‘œํ–ˆ๋˜ ๋ธŒ๋ผ์šฐ์ €(IE, ์•ฑ ๋‚ด์žฅ ๋ธŒ๋ผ์šฐ์ € ๋“ฑ)์—์„œ๋„ ํ…Œ์ŠคํŠธ ์ง„ํ–‰
  • Window, Linux, Mac ๋“ฑ ๋‹ค์–‘ํ•œ ์šด์˜ ์ฒด์ œ์—์„œ ํ…Œ์ŠคํŠธ ์ง„ํ–‰

4. ์ˆ˜์ • / ๋ฐ˜๋ณต

ํ…Œ์ŠคํŠธ ๋‹จ๊ณ„์—์„œ ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ๊ฒฌ๋˜์—ˆ๋‹ค๋ฉด ์ˆ˜์ •์ด ํ•„์š”ํ•˜๋‹ค. ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์œ„์น˜๋ฅผ ์ตœ๋Œ€ํ•œ ์ขํ˜€์„œ ํŠน์ •ํ•˜๊ณ , ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ํŠน์ • ๋ธŒ๋ผ์šฐ์ €์—์„œ์˜ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ •ํ•ด์•ผ ํ•œ๋‹ค. ์„ฃ๋ถˆ๋ฆฌ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•˜๋ฉด ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ, ์กฐ๊ฑด๋ฌธ์„ ์ž‘์„ฑํ•ด ๋‹ค๋ฅธ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ณ ์น˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. ์ˆ˜์ •์ด ์™„๋ฃŒ๋˜๋ฉด 3๋ฒˆ ๊ณผ์ •๋ถ€ํ„ฐ ๋ฐ˜๋ณตํ•œ๋‹ค.

๐ŸŒSEO

๐ŸŒ์›น ์ ‘๊ทผ์„ฑ


Uploaded by N2T