ํ”„๋ก ํŠธ์—”๋“œ ์›น์•ฑ ํ”„๋ ˆ์ž„์› - Bootstrap, Backbone ๊ทธ๋ฆฌ๊ณ  AngularJS
ยท
Before. 2021
ํ”„๋ก ํŠธ์—”๋“œ ์›น์•ฑ ํ”„๋ ˆ์ž„์› - Bootstrap, Backbone ๊ทธ๋ฆฌ๊ณ  AngularJS from Dongsu Jang
... ์ฒ˜๋ฆฌ [text-overflow:ellipsis]
ยท
Before. 2021
http://jsfiddle.net/loveyou0803/hu39d/1/
1. ๋ฐ˜์‘ํ˜• ์›น ๊ธฐ์ดˆ
ยท
Before. 2021
๋ณธ๋ฌธ : http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=133 ๋ฐ˜์‘ํ˜•? ๋ฐ์Šคํฌํƒ‘๋ถ€ํ„ฐ ๋ชจ๋ฐ”์ผ ๋“ฑ ๋งŽ์€ ์ข…๋ฅ˜์˜ ๊ธฐ๊ธฐ์—์„œ ์ตœ์ ์˜ ์‚ฌ์šฉํ™˜๊ฒฝ(์ตœ์†Œ์˜ ๋ฆฌ์‚ฌ์ด์ง•,ํŒจ๋‹,์Šคํฌ๋กค๋ง)์œผ๋กœ๋„ ์ฝ๊ธฐ ์‰ฝ๊ณ  ์ ‘๊ทผํ•˜๊ธฐ ์‰ฌ์šด ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•˜๋Š” ์‚ฌ์ดํŠธ๋ฅผ ๋งํ•จ. ๋ฐ˜์‘ํ˜• ์›น ๊ธฐ๋ฒ•?CSS ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ์œ ๋™ํ˜• ๊ทธ๋ฆฌ๋“œ์œ ๋™ํ˜• ์ด๋ฏธ์ง€๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ๋ฐ˜์‘ํ˜• ๋„ค๋น„๊ฒŒ์ด์…˜/๋ฉ”๋‰ด ... ๋ชจ๋ฐ”์ผ ํผ์ŠคํŠธ? ์›น ๋””์ž์ธ์„ ํ• ๋•Œ ๋ชจ๋ฐ”์ผ์„ ๋จผ์ € ์ƒ๊ฐํ•ด์„œ ๋””์ž์ธ/ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํ•จ Why? ๋ชจ๋ฐ”์ผ์˜ ์„ฑ์žฅ, ๊ธฐ๊ธฐ์˜ ์ œ์•ฝ, ๊ธฐ๊ธฐ์˜ ๊ธฐ๋Šฅ ์ œ์•ฝ! ์Šคํฌ๋ฆฐ์˜ ํฌ๊ธฐ, ๋„คํŠธ์›Œํฌ์†๋„/ํ’ˆ์งˆ, ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“œ ๊ตฌํ˜„!CSS๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ๋ชจ๋ฐ”์ผ ํ™”๋ฉด๋ถ€ํ„ฐ ๊ธฐ๋ณธ ์ฝ”๋”ฉ ๊ทธ ์™ธ์˜ ๋ชจ๋“  ํ™”๋ฉด์€ ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋ฅผ ์ด์šฉํ•จ์ด์œ ) ๋ชจ๋ฐ”์ผ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋ฅผ ์ง€์›ํ•˜์ง€์•Š..
linear-gradient
ยท
Before. 2021
background: -webkit-linear-gradient(#CCC, #696969);background: -moz-linear-gradient(#CCC, #696969);background: -o-linear-gradient(#CCC, #696969); background: -ms-linear-gradient(#CCC, #696969);IE์˜๊ฒฝ์šฐ IE10๋ถ€ํ„ฐ ์“ธ์ˆ˜์žˆ๊ณ , IE10์ดํ•˜์˜ ๊ฒฝ์šฐ filter๋ฅผ ์ด์šฉ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC', endColorstr='#696969');fitler์˜ ๊ฒฝ์šฐ IE10์—์„œ๋Š” ์ ์šฉ์•ˆ๋จ ๊ท€์ฐฎ์€ IE
CSS3 ์—์„œ ์ข‹์€ 5 ๊ฐ€์ง€ ์†์„ฑ
ยท
Before. 2021
* CSS3 ์—์„œ ์ข‹์€ 5 ๊ฐ€์ง€ ์†์„ฑ 1. RGBA background-color: rgba(0,0,255,0.5) 2. Multicolumn Layout -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black; 3. Rounded Corners ( border-radius ) border-top-left-radius: 50px 50px; 4. @face-face @font-face { src: url("myfont.ttf"); font-family: "myfont_..
๋ธŒ๋ผ์šฐ์ € ํ•ต ์ •๋ณด(CSS,SCRIPT)
ยท
Before. 2021
http://www.browserhacks.com/
border-corner-shape
ยท
Before. 2021
http://leaverou.github.com/border-corner-shape/ svg๋ฅผ ์‚ฌ์šฉํ•ด์•ผ์ง€ ๋‚˜์˜ค๋Š”๊ฒƒ...svg์˜ ๊ฒฝ์šฐ ์‚ฌ์šฉ๋ฐฉ๋ฒ•์— ๋”ฐ๋ผ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›ํ•˜๊ฑฐ๋‚˜chrom๊ณผ ie(9์ดํ•˜์ง€์›์•ˆํ•จ)์—์„œ๋งŒ ์ง€์›
์œ ๋‹ˆ๋ฒ„์„ค ๋””์ž์ธ์„ ์œ„ํ•œ ์‹ค์ „ UI(HTML/CSS)๊ฐœ๋ฐœ ๊ฐ€์ด๋“œ
ยท
Before. 2021
http://naradesign.net/open_content/lecture/wp/