CSS๊ธฐ์ดˆ, javascript use strict

CSS ๋ ˆ์ด์•„์›ƒ ๊ฐœ๋…์žก๊ธฐ -ย http://ko.learnlayout.com/(๋ชจ๋“  ๋งํฌ๋Š” ์ƒˆ ์ฐฝ์œผ๋กœ ์—ด๋ฆฝ๋‹ˆ๋‹ค)

๋ชจ๋ฐ”์ผ ์›นํŽ˜์ด์ง€์— ๋Œ€์‘ํ•˜๋Š” ์›นํŽ˜์ด์ง€๋ฅผ ๊ฐœ๋ฐœํ•˜๊ฒŒ ๋์Šต๋‹ˆ๋‹ค.

ํ™”๋ฉด์˜ ๋ ˆ์ด์•„์›ƒ์„ ์‹œ๋งจํ‹ฑํ•˜๊ฒŒ ๊ตฌ์„ฑํ•˜๊ณ  ๋งˆํฌ์—…ํ•˜๋Š” ๊ฒƒ์€ ์›น๊ฐœ๋ฐœ์˜ ๊ธฐ๋ณธ ์ค‘ ๊ธฐ๋ณธ์ž…๋‹ˆ๋‹ค.

๋ ˆ์ด์•„์›ƒ์„ ์žก๋Š” ๊ฐ์ข… ํ”„๋กœํผํ‹ฐ์™€ ๊ฐœ๋…์„ ์„ค๋ช…ํ•œ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค.

์•„๋ž˜๋Š” ์œ„ ์‚ฌ์ดํŠธ์—์„œ ์ฃผ์š”ํ•œ ํ‚ค์›Œ๋“œ๋ฅผ ๋ฝ‘์•„๋‚ธ ๊ฒƒ ์ž…๋‹ˆ๋‹ค.

display: inline, block, none

margin: ย 0 auto; ์—˜๋ฆฌ๋จผํŠธ ์ค‘์•™ ์ •๋ ฌ

max-width: 600px; ๋งˆ์ง„๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ๋˜๋Š”์ง€ ํ™•์ธํ•ด๋ณด์„ธ์š”. ํŽ˜์ด์ง€ ํฌ๊ธฐ ์กฐ์ ˆ ์‹œ ์ฐธ๊ณ ํ•ฉ๋‹ˆ๋‹ค.

๋ฐ•์Šค๋ชจ๋ธ padding, border-width, [webkit, moz, ์•„๋ฌด๊ฒƒ๋„ ์ ์ง€ ์•Š์Œ] box-sizing(IE8 ์ด์ƒ)

position: static, relativel, fixed, absolute

 

์›น์Šคํ†ฐ๊ณผ ๊นƒ ์—ฐ๊ฒฐย http://www.slideshare.net/zziuni/2014-frendss-toolcon-webstorm-git

 

use strick -ย ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ strict mode๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ์ด์œ 

use strick(w3schools.com) – http://www.w3schools.com/js/js_strict.asp

 

jade – node.js์˜ ํƒฌํ”Œ๋ฆฟ ์—”์ง„์ž…๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•œ ์„ค๋ช…๊ณผ ๋ชจ์–‘์ƒˆ ๊ตฌ๊ฒฝ(?)์€

์•„์›ƒ์‚ฌ์ด๋”๋‹˜์˜ ๋ธ”๋กœ๊ทธ(http://blog.outsider.ne.kr/588)์—์„œ ์ฐธ์กฐ ํ•˜์‹œ๊ณ 

๊ธฐ์ดˆ๋ฌธ๋ฒ•์€ ์ด๊ณณ(http://naltatis.github.io/jade-syntax-docs/)์„ ์ฐธ์กฐํ•ฉ๋‹ˆ๋‹ค.

๋‘˜ ๋‹ค ๊ฐ„๋žตํ•ฉ๋‹ˆ๋‹ค.

ํŠน์ง•์„ ์ ์ž๋ฉด HTML๊ณผ ๋‹ฌ๋ฆฌ ๊บฝ์‡ <>๊ฐ€ ์—†์–ด์šค.

css3 ์„ ํƒ์ž(์…€๋ ‰ํ„ฐ) ๋ฌธ๋ฒ•์ฒ˜๋Ÿผ class๋ฅผ ์ง€์นญํ•˜๋Š” .๊ณผ id๋ฅผ ์ง€์นญํ•˜๋Š” #์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ค‘๊ด„ํ˜ธ{} ์†์— ๋ฐ์ดํ„ฐ๋ฅผ ์ง‘์–ด๋„ฃ์„ ์ˆ˜๋„ ์žˆ๊ณ , ๋งŽ์€ ํƒ€์ดํ•‘ ์—†์ด ์ค‘์ฒฉ๊ตฌ์กฐ์˜ ๋งˆํฌ์—…์„ ๊ฐ€๋Šฅ์ผ€ํ•ฉ๋‹ˆ๋‹ค.(nesting)

๋“ค์—ฌ์“ฐ๊ธฐ(indent)๋ฅผ ์‹ ๊ฒฝ์จ์„œ ์ž‘์„ฑํ•˜์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ฐ„๋‹จํ•œ ์ œ์–ด/๋ฐ˜๋ณต๋ฌธ ์ž‘์„ฑ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

์‹ ํ…์Šค๋ฅผ ์ƒ์„ธํžˆ ๋ฐฐ์šฐ๊ณ ์‹ถ์€ ๋ถ„์€ ์š”๊ธฐ๋กœ(http://cssdeck.com/labs/learning-the-jade-templating-engine-syntax)

 

 

 

๋Œ“๊ธ€ ๋‚จ๊ธฐ๊ธฐ

์ด๋ฉ”์ผ์€ ๊ณต๊ฐœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•„์ˆ˜ ์ž…๋ ฅ์ฐฝ์€ * ๋กœ ํ‘œ์‹œ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ์˜ HTML ํƒœ๊ทธ์™€ ์†์„ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>