ํ—ค๋”ฉํƒœ๊ทธ ๋ถ€์ œ(subheading)๋ฅผ ํ‘œํ˜„ํ•˜๋Š” HTML ๋งˆํฌ์—…

๊ธ€์˜ ๊ตฌ์กฐ๋ฅผ ๋งˆํฌ์—…ํ•  ๋•Œ ๊ณ ๋ฏผํ•ด์•ผ ํ•  ๊ฒŒ ๋งŽ๋‹ค. ์ด๋ฒˆ์— ๋‹ค๋ฃฐ ๊ฒƒ์€ ๋ถ€์ œ๋ฅผ HTML ํƒœ๊ทธ๋กœ ์–ด๋–ป๊ฒŒ ํ‘œํ˜„ํ•ด์•ผ ํ•  ๊ฒƒ์ธ๊ฐ€๋‹ค. ๊ฒฐ๋ก ์ ์œผ๋กœ ๋‚˜๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ๋งˆ์Œ๋จน์—ˆ๋‹ค. [๋ฐ•๊ทผํ˜œ ํƒ„ํ•ต] ็พŽ ๋งค์ฒด๋“ค "ํ•œ๊ตญ ๋ฏผ์ฃผ์ฃผ์˜ ๋ฐœ์ „ ๋ณด์—ฌ์ค€ ํŒŒ๋ฉด ๊ฒฐ์ •"โ€ฆ์ด์ •๋ฏธ ์žฌํŒ๊ด€๋„ ์กฐ๋ช… ๋ช…์„ธ๋ฅผ ํ™•์ธํ•˜๋Š” ๊ฒŒ ์˜ฌ๋ฐ”๋ฅธ ์‚ฌ์šฉ๋ฒ•์„ ์•„๋Š” ์ง€๋ฆ„๊ธธ์ด๋‹ค. ํด๋ฆฌ์–ด๋ณด์Šค์—์„œ ์—ฌ๋Ÿฌ ๋ฒˆ ๋“ค์—ˆ๋˜ ๋ง์ธ๋ฐ ์ตœ๊ทผ ์ƒˆ์‚ผ ๋Š๊ผˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ 4.12.1 Subheadings, subtitles, alternative titles and taglines ํ•ญ๋ชฉ์—์„œ ์ฐพ์•„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. HTML์—๋Š” ๋ถ€์ œ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ํƒœ๊ทธ๊ฐ€ ์—†์œผ๋ฉฐ, ์•„๋ž˜์™€ ๊ฐ™์€ ๋ฐฉ๋ฒ•์„ ์ œ์•ˆํ•œ๋‹ค ํ•˜๊ณ  ์„ค๋ช…์ด ๋ผ ์žˆ๋‹ค. ๋ช…์„ธ๊ฐ€ ์ œ์•ˆํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์„ธ ๊ฐ€์ง€๋‹ค. ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ตฌ๋ถ„ํ•˜๋Š” ๋ฐฉ๋ฒ• ็พŽ ๋งค์ฒด๋“ค "ํ•œ๊ตญ ๋ฏผ์ฃผ์ฃผ์˜..

Sass ํ”„๋กœ์ ํŠธ๋ฅผ ์œ„ํ•œ ์•„ํ‚คํ…์ฒ˜

"1+1์€ ๋ฌด์—‡์ผ๊นŒ์š”?"๋ผ๋Š” ์งˆ๋ฌธ์„ ์ž์ฃผ ๋“ฃ์Šต๋‹ˆ๋‹ค. ์‚ฐ์ˆ˜ ์‹œ๊ฐ„์— ๋งํ•˜๋Š” ์ •๋‹ต์€ 2๊ฐ€ ๋˜๊ฒ ์ฃ . ์„ธ์ƒ์—๋Š” ๊ทธ ๋„ˆ๋จธ ๋‹ค์–‘ํ•œ ์ •๋‹ต์ด ์กด์žฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์–ด๋–ค ๊ด€์ ์œผ๋กœ ์ƒ๊ฐํ•˜๋Š๋ƒ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์ •๋‹ต์ด ๋‚˜์˜ค์ฃ . ์ €์ž์ธ ํœด๊ณ  ๊ธฐ๋กœ๋ธ์€ ์ด ๊ธ€์—์„œ ๋…์ž์—๊ฒŒ 'Sass ํ”„๋กœ์ ํŠธ์˜ ์•„ํ‚คํ…์ฒ˜๋ž€ ๋ฐ”๋กœ ์ด๊ฒƒ์ด๋‹ค'๋ผ๊ณ  ์ •๋‹ต์„ ์•Œ๋ ค์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  ๋‹ค์–‘ํ•œ ์ •๋‹ต์ด ๋‚˜์˜ค๋„๋ก Sass ํ”„๋กœ์ ํŠธ์˜ ์•„ํ‚คํ…์ฒ˜ ๊ฐœ๋…์„ ์–˜๊ธฐํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์„ ์ฝ๊ณ  ์—ฌ๋Ÿฌ๋ถ„์˜ Sass ํ”„๋กœ์ ํŠธ์—์„œ ๋ฉ‹์ง€๊ฒŒ ์ฐฝ์˜๋ ฅ์„ ๊ฐ€๋ฏธํ•œ ์•„ํ‚คํ…์ฒ˜๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค. [ํŽธ์ง‘์ž ์ฃผ]์˜ˆ์ „์˜ ๋‹จ์ˆœํ–ˆ๋˜ CSS๋งŒ์œผ๋กœ ์ผํ–ˆ๋˜ ๊ทธ๋•Œ๋ฅผ ๊ธฐ์–ตํ•˜์‹œ๋‚˜์š”? ์‚ฌ์šฉํ•œ CSS ํŒŒ์ผ์€ ๋‹จ ํ•˜๋‚˜์ง€๋งŒ (์ฝ”๋“œ์˜ ์ค„์€) ์ž  ๋ชป ์ด๋ฃจ๋Š” ๋ฐค๋ณด๋‹ค ๋” ๊ธธ์—ˆ์Šต๋‹ˆ๋‹ค. (๋Œ€๊ฒŒ ์„œํˆด๊ฒŒ ์ž‘์„ฑ๋œ) ์…€ ์ˆ˜ ์—†์ด ๋งŽ์€ ์ค„๊ณผ ๊ฑฐ๊ธฐ์„œ ..

ํผ๋ธ”๋ฆฌ์…”, ํ”„๋ก ํŠธ์•ค๋“œ๋””๋ฒจ๋กœํผ ๋ฉด์ ‘ ์ธํ„ฐ๋ทฐ ๊ด€๋ จ ์งˆ๋ฌธ

์ผ๋ฐ˜์ ์ธ ์งˆ๋ฌธ: Twitter,Facebook ๋“ฑ์˜ SNS๋ฅผ ์‚ฌ์šฉํ•˜์‹œ๋‚˜์š”? * ์‚ฌ์šฉํ•œ๋‹ค๋ฉด, ๋ˆ„๊ตฌ๋ฅผ ํŒ”๋กœ์šฐ ํ•˜๊ณ  ์žˆ๋‚˜์š”?GitHub์„ ์‚ฌ์šฉํ•˜์‹œ๋‚˜์š”? * ์‚ฌ์šฉํ•œ๋‹ค๋ฉด, ์–ด๋–ค ํ”„๋กœ์ ํŠธ๋ฅผ Watch ํ˜น์€ Forkํ•˜์‹œ๋‚˜์š”?์ž์ฃผ ๋ณด๋Š” Blog๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?๋ฒ„์ „ ๊ด€๋ฆฌ ์‹œ์Šคํ…œ์€ ์–ด๋–ค ๊ฒƒ๋“ค์„ ์‚ฌ์šฉํ•ด๋ณด์…จ์Šต๋‹ˆ๊นŒ?์„ ํ˜ธํ•˜๋Š” ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? (์šด์˜์ฒด์ œ, ์—๋””ํ„ฐ, ๋ธŒ๋ผ์šฐ์ €, ๋„๊ตฌ ๋“ฑ๋“ฑ)๋‹น์‹ ์ด ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค ๋•Œ์˜ ๊ณผ์ •์„ ์„ค๋ช… ํ•ด์ฃผ์‹ค ์ˆ˜ ์žˆ์„๊นŒ์š”?์ ์ง„์  ํ–ฅ์ƒ๋ฒ•(progressive enhancement)๊ณผ ์šฐ์•„ํ•œ ์„ฑ๋Šฅ์ €ํ•˜๋ฒ•(graceful degradation)์˜ ์ฐจ์ด๋ฅผ ์„ค๋ช…ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? * "๋ˆ„๊ตฌ๋„ ์„ฑ๊ณตํ•˜์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค" ๋ผ๊ณ  ๋งํ•˜๋ฉด ๋ณด๋„ˆ์Šค ํฌ์ธํŠธ๋ฅผ ์ฃผ์„ธ์š”. * ๊ฐ ํŠน์ƒ‰์„ ์„ค๋ช…์„ ํ•œ๋‹ค๋ฉด, ๋” ๋†’์€ ๋ณด๋„ˆ์Šค ํฌ์ธํŠธ๋ฅผ ์ฃผ์„ธ์š”...

์›น ์ฝ”๋”ฉ 2017. 3. 21. 16:13
[๋ฉด์ ‘] ๋งˆํฌ์—… ๊ฐœ๋ฐœ ๋ ˆ๋ฒจ ํ…Œ์ŠคํŠธ

# ๋งˆํฌ์—… ๊ฐœ๋ฐœ ๋ ˆ๋ฒจ ํ…Œ์ŠคํŠธ๋ ˆ๋ฒจํ…Œ์ŠคํŠธ์˜ ๋ชฉ์ ์€ ํ˜„์žฌ ํŒŒ์•…ํ•˜๊ณ  ์žˆ๋Š” ์ˆ˜์ค€์„ ์ธก์ •ํ•จ์— ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฃŒ๋ฅผ ์ฐพ์•„์„œ ๋‹ต์„ ์ž‘์„ฑํ•˜์ง€ ๋งˆ์‹œ๊ณ , ํŽธ์•ˆํ•œ ๋งˆ์Œ์œผ๋กœ ์•„๋Š” ๋งŒํผ๋งŒ ์ ์–ด์ฃผ์„ธ์š”.๋ชจ๋“  ๋‹ต๋ณ€์€ 2์ค„์ด ๋„˜์ง€ ์•Š์„ ์ •๋„์˜ ๋ถ„๋Ÿ‰์œผ๋กœ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”. ## HTML1. Doctype์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ๋•Œ๋Š” ๋ฌด์Šจ ์ผ์ด ๋ฐœ์ƒํ• ๊นŒ์š”? 2. ์›นํ‘œ์ค€์— ๋งž๊ฒŒ ์ž‘์—…ํ•  ๋•Œ b, i ํƒœ๊ทธ ๋Œ€์‹  ์ ํ•ฉํ•œ ํƒœ๊ทธ๋Š” ๊ฐ๊ฐ ๋ฌด์—‡์ผ๊นŒ์š”? 3. block ์š”์†Œ์™€ inline ์š”์†Œ์— ํ•ด๋‹นํ•˜๋Š” ํƒœ๊ทธ๋“ค์„ ๊ฐ๊ฐ 5๊ฐœ์”ฉ ์ ์–ด๋ณด์„ธ์š”. 4. blockquote ํƒœ๊ทธ๋Š” ์–ด๋–ค ์šฉ๋„๋กœ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ์š”? 5. ์ธ๋ผ์ธ ์Šคํƒ€์ผ(style=โ€property:valueโ€)์„ ๊ฐ€๊ธ‰์  ์‚ฌ์šฉํ•˜์ง€ ๋ง์•„์•ผ ํ•  ์ด์œ ๋Š” ๋ฌด์—‡์ผ๊นŒ์š”? 6. myPhoto.jpg ํŒŒ์ผ์„ img ํƒœ๊ทธ๋กœ ์ž‘์„ฑํ•ด..

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์„ฑ๋Šฅ ์ตœ์ ํ™” #2 : ๋ Œ๋”๋ง

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์„ฑ๋Šฅ ์ตœ์ ํ™” #1 ํฌ์ŠคํŠธ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ NHN์€ ์ด๋ ‡๊ฒŒ ํ•œ๋‹ค ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์„ฑ๋Šฅ ์ด์•ผ๊ธฐ์˜ ๋‚ด์šฉ๋“ค์ด๋‹ค. ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ณผ์ • ๋ฐ ๊ธฐํƒ€์—์„œ๋„ ์†๋„๋ฅผ ํ–ฅ์ƒ ์‹œํ‚ฌ์ˆ˜ ์žˆ๋‹ค. ๋ Œ๋”๋ง ๋ฐ ๊ธฐํƒ€ ๋ฐฉ๋ฒ•์—๋Š” ํฌ๊ฒŒ ์•„๋ž˜ 4๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค. reflow, repaint ์ตœ์†Œํ™”๋…ธ์ถœ ์ œ์–ด๋ฅผ ํ†ตํ•œ reflow ์ตœ์†Œํ™” (display ์†์„ฑ ์ด์šฉ)DOM, ๊ฐ์ฒด ์บ์‹ฑ๊ธฐํƒ€ reflow, repaint ์ตœ์†Œํ™” ๊ฐ™๊ฑฐ๋‚˜ ๋™์ผํ•œ ์ž‘์—…์€ ๊ทธ๋ฃน์„ ๋ฌถ์–ด ์‹คํ–‰ํ•œ๋‹ค. (๊ตฌ๋ฒ„์ „ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์ „์˜ ์ž‘์—…์˜ ๊ฒฝ์šฐ, ์—ฌ๋Ÿฌ๋ฒˆ์˜ reflow์™€ repaint๊ฐ€ ๋ฐœ์ƒํ•˜๋‚˜ ์ตœ์‹  ๋ฒ„์ „ ํฌ๋กฌ์˜ ๊ฒฝ์šฐ ํ•œ๋ฒˆ๋งŒ ๋ฐœ์ƒํ•œ๋‹ค๊ณ  ํ•จ) reflow์™€ repaint์— ๋Œ€ํ•œ ์„ค๋ช…์€ ์•„๋ž˜ ๊ธ€ ์ฐธ๊ณ  ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง : reflow & repaint // ์ „ var width = do..

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์„ฑ๋Šฅ ์ตœ์ ํ™” #1 : ์ฝ”๋“œ ์Šคํƒ€์ผ

nhn์€ ์ด๋ ‡๊ฒŒ ํ•œ๋‹ค ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์„ฑ๋Šฅ ์ด์•ผ๊ธฐ์˜ ๋‚ด์šฉ๋“ค์„ ๋ฐœ์ทŒํ•˜์˜€์Œ ๋ฐ”๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์„๋งŒ ์ถ”๋ ค์„œ ์š”์•ฝํ•œ๋‹ค. ์ฝ”๋“œ ์Šคํƒ€์ผ ๋ถ€๋ถ„์—์„œ๋Š” ํฌ๊ฒŒ ์•„๋ž˜ 3๊ฐ€์ง€๋ฅผ ํ†ตํ•ด ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค. ๋ณ€์ˆ˜, ๊ฐ์ฒด ์ƒ์„ฑ ๋ฐ ์ ‘๊ทผ์ •๊ทœํ‘œํ˜„์‹๋ฐ˜๋ณต๋ฌธ ๋ณ€์ˆ˜, ๊ฐ์ฒด ์ƒ์„ฑ ๋ฐ ์ ‘๊ทผ 1) ๋ฐฐ์—ด ์ƒ์„ฑ : var arr = []; ์ด var arr = new Array() ๋ณด๋‹ค ๋น ๋ฆ„ 2) ๋ฐฐ์—ด ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™” ๋ฐ ์ ‘๊ทผ : arr[i] = i;์ด vs arr.push(i); ๋ณด๋‹ค ๋น ๋ฆ„ 3) ๊ฐ์ฒด ์ƒ์„ฑ : var obj = {}; vs var obj = new Object(); ๋ณด๋‹ค ๋น ๋ฆ„ 4) ๊ฐ์ฒด ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™” ๋ฐ ์ ‘๊ทผ : obj.a = 1; vs obj["a"] = 1; ๋ณด๋‹ค ๋น ๋ฆ„ 5) ๋ฌธ์ž์—ด ์ƒ์„ฑ : var str = "test";..

๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง - ๋ฆฌํ”Œ๋กœ์šฐ(Reflow)์™€ ๋ฆฌํŽ˜์ธํŠธ(Repaint)

๋ Œ๋”๋ง ๊ณผ์ • 1) DOM ํŠธ๋ฆฌ ์ƒ์„ฑ 2) ์Šคํƒ€์ผ ๊ตฌ์กฐ์ฒด ์ƒ์„ฑ 3) ๋ Œ๋” ํŠธ๋ฆฌ ์ƒ์„ฑ 4) ๋ ˆ์ด์•„์›ƒ ์ฒ˜๋ฆฌ 5) Paint 6) ํŽ˜์ด์ง€ ๊ธฐ๋Šฅ์— ๋”ฐ๋ผ Reflow, Repaint๊ฐ€ ์ถ”๊ฐ€๋กœ ๋ฐœ์ƒ reflow ์ƒ์„ฑ๋œ DOM ๋…ธ๋“œ์˜ ๋ ˆ์ด์•„์›ƒ(๋„ˆ๋น„, ๋†’์ด ๋“ฑ) ๋ณ€๊ฒฝ ์‹œ, ์˜ํ–ฅ๋ฐ›์€ ๋ชจ๋“  ๋…ธ๋“œ(์ž์‹, ๋ถ€๋ชจ ๋“ฑ)์˜ ์ˆ˜์น˜๋ฅผ ๋‹ค์‹œ ๊ณ„์‚ฐํ•˜์—ฌ ๋ Œ๋” ํŠธ๋ฆฌ๋ฅผ ์žฌ์ƒ์„ฑํ•˜๋Š” ์ž‘์—… function reflow() { document.getElementById('test').style.width = '100px'; return false; } repaint Reflow ๊ณผ์ •์ด ๋๋‚œ ํ›„ ์žฌ์ƒ์„ฑ๋œ ๋ Œ๋” ํŠธ๋ฆฌ๋ฅผ ๋‹ค์‹œ ๊ทธ๋ฆฌ๋Š” ์ž‘์—…. ์ˆ˜์น˜์™€ ์ƒ๊ด€์—†๋Š” background-color, visibillty, outline ๋“ฑ์˜ ์Šคํƒ€์ผ ๋ณ€๊ฒฝ ์‹œ์—๋Š” Reflo..

css ๊ธฐ๋ณธ๊ทœ์น™

๊ธฐ๋ณธ๊ทœ์น™ 1. ๋ฌธ์„œ์˜ ๋‚ด์šฉ๊ณผ ํ‘œํ˜„๊ณผ ํ–‰๋™์„ ๋ถ„๋ฆฌํ•ฉ๋‹ˆ๋‹ค. (HTML ๋งŒ์œผ๋กœ ๋ฌธ์„œ๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.) 2. CSS ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ๋Š” ๋“ค์—ฌ์“ฐ๊ธฐ๋ฅผ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‹จ, ์ค‘๊ด„ํ˜ธโ€{ }โ€๊ฐ€ ์ค‘์ฒฉ๋˜๋Š” ๊ฒฝ์šฐ ์˜ˆ์™ธ๋กœ ํ•ฉ๋‹ˆ๋‹ค. 3. CSS ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋”ฉํ•  ๊ฒฝ์šฐ @import ๋ฐฉ์‹์€ ๋˜๋„๋ก ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. 4. ๋ชจ๋“  ์†์„ฑ์€ ์˜๋ฌธ ์†Œ๋ฌธ์ž๋กœ๋งŒ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. 5. ๊ณตํ†ต์„ ํƒ์ž โ€˜*โ€™๋Š” ์›น ํŽ˜์ด์ง€์˜ ์„ฑ๋Šฅ์„ ๋–จ์–ด๋œจ๋ฆฌ๊ณ , Internet Explorer์—์„œ๋Š” ์ฃผ์„๊นŒ์ง€ ์˜ํ–ฅ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์‚ฌ์šฉ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. 6. ์ปฌ๋Ÿฌ ๊ฐ’ ํ‘œ๊ธฐ RGB๊ฐ’ ์•ž์— '#'์„ ๋„ฃ์–ด ํ‘œ๊ธฐํ•ฉ๋‹ˆ๋‹ค. ex) #eee, #000, #eaeaea 7. ๊ณต๋ฐฑ์ด ํฌํ•จ๋œ ํฐํŠธ๋ช…, ํ•œ๊ธ€ ํฐํŠธ๋ช…, ๋ฌธ์ž์—ด ๋ฐ์ดํ„ฐ ํƒ€์ž…, @charset ์„ ์–ธ ์‹œ์—๋Š” ์†์„ฑ ๊ฐ’์„ ํฐ๋”ฐ..

์›น ์ฝ”๋”ฉ 2017. 3. 21. 15:24
์›น์ ‘๊ทผ์„ฑ ๊ธฐ๋ณธ๊ฐœ๋…

์›น์ ‘๊ทผ์„ฑ ๊ธฐ๋ณธ๊ฐœ๋…๋ชจ๋“ ์‚ฌ๋žŒ์ด ๋‹ค์–‘ํ•œ ์กฐ๊ฑด์˜ ํ™˜๊ฒฝ์—์„œ ์†์‰ฝ๊ฒŒ ์›น ์ฝ˜ํ…์ธ ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ณด์žฅํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์žฅ์• ๊ฐ€ ์žˆ๊ฑฐ๋‚˜(์ผ์‹œ์ ์ธ ์žฅ์• ๋ฅผ ์ง€๋‹ˆ๊ฒŒ ๋˜๋Š”๊ฒฝ์šฐ๋ฅผ ํฌํ•จ) , ๋„คํŠธ์›Œํฌ ํ™˜๊ฒฝ์ด ์ข‹์ง€ ๋ชปํ•œ ๊ฒฝ์šฐ ํ˜น์€ ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, ๋‹ค์–‘ํ•œ ์šด์˜์ฒด์ œ ๋ฐ ์›น ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ๋“ฑ ํ™˜๊ฒฝ์กฐ๊ฑด์— ๊ด€๊ณ„์—†์ด ์›น์ฝ˜ํ…์ธ ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์–ด ์›น ์‚ฌ์šฉ์„ฑ์„ ์ฆ๊ฐ€์‹œํ‚ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.๊ด€๋ฆฌ๊ธฐ์ค€ํ•œ๊ตญํ˜• ์›น ์ฝ˜ํ…์ธ  ์ ‘๊ทผ์„ฑ์ง€์นจ KWCAG V.2.0ํ•œ๊ตญํ˜• ์›น ์ฝ˜ํ…์ธ  ์ ‘๊ทผ์„ฑ ์ง€์นจ 2.0์ด TTA ๋‹จ์ฒด ํ‘œ์ค€์œผ๋กœ 2009๋…„ 12์›” 22์ผ์— ์ œ์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์›น์ ‘๊ทผ์„ฑ ํ‰๊ฐ€๋„๊ตฌ์›น์ ‘๊ทผ์„ฑ ํ‰๊ฐ€ํˆด K-WAH 4.0K-WAH 4.0์€ ํ•œ๊ตญํ˜• ์›น ์ฝ˜ํ…์ธ  ์ ‘๊ทผ์„ฑ ์ง€์นจ 2.0์— ๋”ฐ๋ผ ์›น์‚ฌ์ดํŠธ(์›นํŽ˜์ด์ง€)๊ฐ€ ์ ‘๊ทผ์„ฑ ์ง€์นจ์˜ 6๊ฐœ ์„ธ๋ถ€์ง€์นจ์„ ์ค€์ˆ˜ํ•˜๋Š”์ง€๋ฅผ ์ž๋™ ..

์›น์ ‘๊ทผ์„ฑ check list

ํผ๋ธ”๋ฆฌ์‹ฑ ์›น์ ‘๊ทผ์„ฑ ์ฒดํฌ๋ฆฌ์ŠคํŠธNo.ํ•ญ๋ชฉ๋ช…๊ณ ๋ ค๋ถ€์„œ๋ ˆ๋ฒจ์ ์šฉ์—ฌ๋ถ€1์ด๋ฏธ์ง€(๊ทธ๋ฆผ, ์‚ฌ์ง„, ๋กœ๊ณ , ์ฐจํŠธ, ๋‹ค์ด์–ด๊ทธ๋žจ, ๋ฐฐ๊ฒฝ์ฒ˜๋ฆฌ๋œ ์ด๋ฏธ์ง€, ๋™์ ์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ์ด๋ฏธ์ง€, ํ”Œ๋ž˜์‹œ์˜ Name๊ฐ’ ๋“ฑ)์— ์ ์ ˆํ•œ ๋Œ€์ฒด ํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•˜๋Š”๊ฐ€? ์‚ฌ์šฉ์ž ์ž…๋ ฅ ์ด๋ฏธ์ง€์˜ ๊ฒฝ์šฐ, ๋Œ€์ฒด ํ…์ŠคํŠธ๋ฅผ ๋„ฃ์„ ์ˆ˜ ์žˆ๋Š” ์ž…๋ ฅํผ์„ ์ œ๊ณตํ•˜๋Š”๊ฐ€?๊ธฐํš, ๋””์ž์ธ, ํผ๋ธ”๋ฆฌ์‹ฑ, ๊ฐœ๋ฐœ15W3C Validation์„ ํ†ต๊ณผํ•˜๋Š”๊ฐ€?ํผ๋ธ”๋ฆฌ์‹ฑ26์ฃผ์š” ์ฝ˜ํ…์ธ  ์ œ๋ชฉ์„ h1~h6๋กœ ๋งˆํฌ์—…ํ–ˆ๋Š”๊ฐ€?๊ธฐํš, ํผ๋ธ”๋ฆฌ์‹ฑ17ํ‘œ๋Š” table๋กœ ํ‘œ์˜ ๋จธ๋ฆฌ๊ธ€์€ th๋กœ ๋งˆํฌ์—…ํ–ˆ์œผ๋ฉฐ scope ์†์„ฑ์„ ์ œ๊ณตํ•˜๋Š”๊ฐ€?ํผ๋ธ”๋ฆฌ์‹ฑ28thead, tbody, tfoot์œผ๋กœ ๊ทธ๋ฃนํ•‘ ๋˜์–ด ์žˆ๋Š”๊ฐ€? (th๋กœ ๊ทธ๋ฃนํ•‘ ์•ˆ๋ ๊ฒฝ์šฐ thead์ƒ๋žต๊ฐ€๋Šฅ, tbody๋งŒ ์žˆ์„ ๊ฒฝ์šฐ tbody์ƒ๋žต ๊ฐ€๋Šฅ)ํผ๋ธ”๋ฆฌ์‹ฑ19table์— caption..

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ณธ ๋ฌธ๋ฒ• ์ •๋ฆฌ

1. ๊ธฐ๋ณธ๋ฌธ๋ฒ•1.1. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŠน์ง•1.1.1. ํ•จ์ˆ˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜๋Š” ์–ดํœ˜์  ์œ ํšจ๋ฒ”์œ„๋ฅผ ๊ฐ€์ง„ ์ผ๊ธ‰ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. ์ฆ‰, ํ•จ์ˆ˜๋Š” ๋ณ€์ˆ˜์— ๋Œ€์ž…๋˜๊ฑฐ๋‚˜ ์ธ์ˆ˜๋กœ ๋„˜๊ธธ ์ˆ˜๋„ ์žˆ๊ณ , ๋ฐ˜ํ™˜ ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์—ฐ์‚ฐ ๋“ฑ์— ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์ „ํ˜€ ์ œ์•ฝ์ด ์—†๋Š” ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.1.1.2. ๋Š์Šจํ•œ ํƒ€์ž… ์ฒดํฌ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ํƒ€์ž… ์˜ค๋ฅ˜๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋ณต์žกํ•œ ํด๋ž˜์Šค ๊ณ„์ธต์„ ๊ตฌ์„ฑํ•  ํ•„์š”๋„๊ฐ€ ์—†๊ณ , ํƒ€์ž… ์บ์ŠคํŒ…์„ ์‹ ๊ฒฝ ์“ฐ์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค.1.1.3. Object Literal์ฝœ๋ก ์œผ๋กœ ๊ตฌ๋ณ„๋˜๋Š” ํ”„๋กœํผํ‹ฐ ์ด๋ฆ„/๊ฐ’ ์Œ๋“ค์ด ๋‹ค์‹œ ์‰ผํ‘œ๋กœ ๋ถ„๋ฆฌ๋œ ๋ชฉ๋ก์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Json์— ๊ธฐ์ดˆ๊ฐ€ ๋˜๋ฉฐ, ํ•„์š”ํ•œ ์š”์†Œ๋“ค์„ ์—ด๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.1.1.4. prototype์— ์˜ํ•œ ์ƒ์†ํด๋ž˜์Šค ๊ธฐ๋ฐ˜ ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋“  ๊ฐ์ฒด์— ..

Yslow์„ฑ๋Šฅ ํ–ฅ์ƒ Tip

Chapter 01. HTTP ์š”์ฒญ์„ ์ค„์—ฌ๋ผ1. ์ด๋ฏธ์ง€ ๋งต(Image map)์ด๋ฏธ์ง€ ๋งต ์„ ์ด์šฉํ•˜๋ฉด ์›น ํŽ˜์ด์ง€ UI ๋ณ€๊ฒฝ ์—†์ด HTTP ์š”์ฒญ ์ˆ˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ ์ด์œ ๋Š” ํ•œ ๊ฐœ์˜ ์ด๋ฏธ์ง€๋กœ ์—ฌ๋Ÿฌ ๊ฐœ์˜ URL ์„ ์—ฐ๊ฒฐ ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด๋ฏธ์ง€ ๋งต์„ ์‚ฌ์šฉํ•˜๋ฉด ์žฅ์ ์œผ๋กœ๋Š” ๋ณดํ†ต 50% ๋น ๋ฅธ ์†๋„๋ฅผ ๋ณด์ด๋Š”๋ฐ, ๋‹จ์ ์œผ๋กœ๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก ๋งต์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑ ํ•  ๊ฒฝ์šฐ ๋งต์˜ ์˜์—ญ ์ขŒํ‘œ๋ฅผ ์ˆ˜๋™์œผ๋กœ ํ•˜๋Š” ๊ฒฝ์šฐ ์ง€๋ฃจํ•˜๊ณ  ์‹ค์ˆ˜ํ•˜๊ธฐ ์‰ฝ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋„ค๋ชจ๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ๋ชจ์–‘์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์„ ๊ฑฐ์˜ ๋ถˆ๊ฐ€๋Šฅํ•˜๋ฉฐ ์—ฐ์†์ ์ธ ์ด๋ฏธ์ง€์—ฌ์•ผ ํ•˜๋Š” ์•ˆ ์ข‹์€ ์ ์ด ์žˆ๋‹ค. 2. CSS SpriteCSS Sprite ๋Š” ์ด๋ฏธ์ง€ ๋งต์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ ์ด๋ฏธ์ง€๋ฅผ ๊ฒฐํ•ฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์ด๋ฏธ์ง€ ๋งต๋ณด๋‹ค ํ›จ์”ฌ ์œ ์—ฐํ•˜๋‹ค. ๋ณดํ†ต CSS ์˜ background-position ์†์„ฑ..

์›น ์ฝ”๋”ฉ 2017. 3. 21. 14:18
CSS Naming Guidelines

Naming GuidelinesCSS ํŒŒ์ผ ๋„ค์ด๋ฐid/class ์„ ํƒ์ž ์„ ์–ธ ๊ทœ์•ฝid/class ์„ ํƒ์ž ๋„ค์ด๋ฐ ๊ฐ€์ด๋“œImage ๋„ค์ด๋ฐ ๊ทœ์•ฝImage ๋„ค์ด๋ฐ ๊ฐ€์ด๋“œ(X) ํ—ˆ์šฉ ์•ˆํ•จ(โ–ณ) ์˜ˆ์™ธ ํ—ˆ์šฉ(O) ์ ๊ทน ๊ถŒ์žฅ1. CSS ํŒŒ์ผ ๋„ค์ด๋ฐCSS ํŒŒ์ผ์„ ์—ฌ๋Ÿฌ๊ฐœ๋กœ ๋‚˜๋ˆ„๋Š” ๊ฒฝ์šฐ HTTP ์š”์ฒญ์ด ๋Š˜์–ด๋‚˜์„œ ์›นํŽ˜์ด์ง€ ์ „์†ก์†๋„์— ์ข‹์ง€ ์•Š์€ ์˜ํ–ฅ์„ ์ฃผ๊ฒŒ ๋˜๋ฏ€๋กœ ํŒŒ์ผ์˜ ์ˆ˜๋Š” ์ตœ์†Œํ•œ์œผ๋กœ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์ดํŠธ ๋ฃจํŠธ ๋””๋ ‰ํ† ๋ฆฌ์— /css/ ํด๋”๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์ „์—ญ์— ์“ฐ์ด๋Š” ํŒŒ์ผ์˜ ์ด๋ฆ„์€ default.css ์œผ๋กœ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค./css/default.css ๋ชจ๋“  ์Šคํƒ€์ผ์„ ํฌํ•จํ•˜๋Š” ํŒŒ์ผ /css/popup.css ํŒ์—…๋“ฑ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€ ์œ ํ˜•์ด ์กด์žฌํ•˜๋Š” ๊ฒฝ์šฐ ๋ณ„๋„๋กœ ๋ถ„๋ฆฌ2. id/class ์„ ํƒ์ž ์„ ์–ธ ๊ทœ์•ฝ์•„๋ž˜์™€ ๊ฐ™์ด ์ •ํ˜•ํ™” ๋œ ์š”์†Œ๋“ค์— ๋Œ€ํ•œ ๋„ค..

์›น ์ฝ”๋”ฉ 2017. 3. 21. 14:15
๊ณต์ง€์‚ฌํ•ญ
์ตœ๊ทผ์— ์˜ฌ๋ผ์˜จ ๊ธ€
์ตœ๊ทผ์— ๋‹ฌ๋ฆฐ ๋Œ“๊ธ€
Total
Today
Yesterday
ยซ   2017/03   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
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
๊ธ€ ๋ณด๊ด€ํ•จ