๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

ํผ๋ธ”๋ฆฌ์‹ฑ5

โœˆ CSS ํ…์ŠคํŠธ ์†์„ฑ : text-align:justify,text-justify:auto,inter-word,inter-ideograph,inter-cluster,distribute,kashida,newspaper,distribute-all-lines,distribute-center-last 2014๋…„์— ์ž‘์„ฑํ–ˆ๋˜ ๊ธ€์ž…๋‹ˆ๋‹ค. ๋ธ”๋กœ๊ทธ๋ฅผ ์˜ฎ๊ธฐ๋Š” ์ค‘์ด๋ผ... ์ฟจ๋Ÿญ text-align:justify; text-justify:~ ์†์„ฑ์€ ๊ณจ ๋•Œ๋ฆฌ๊ฒŒ๋„ CSS2์—๋Š” ํฌํ•จ๋˜์ง€ ์•Š๊ณ , CSS3์—๋Š” ํฌํ•จ์ด ๋˜์–ด ์žˆ๊ณ , IE ๊ตฌ๋ฒ„์ „๋“ค์€ ์ผ๋ถ€ ์ง€์›์„ ํ•˜๊ณ , 9 ์ด์ƒ์—์„œ๋Š” ์ง€์›์ด ๋˜์ง€ ์•Š๋Š” ์›ƒ๊ธด ์–‘์ƒ์„ ๋ณด์ด๋Š” ํ…์ŠคํŠธ ์†์„ฑ์ด๋‹ค. ๋” ๊ท€์ฐฎ์€ ๊ฒƒ์€ ๊ณจ ๋•Œ๋ฆฌ๊ฒŒ๋„, ์ด ์†์„ฑ์„ ๊ณต๋ฌด์›๋‹˜๋“ค์ด ๋„ˆ๋ฌด ์ข‹์•„๋ผ ํ•˜์‹ ๋‹ค๋Š” ๊ฑฐ๋‹ค. -_-; ๊ตฐ์ •์‹œ๋Œ€ ์Šต์„ฑ๋“ค์ด ๋‚จ์•„ ๊ณ„์‹  ๊ฑด์ง€ ๊ธ€์”จ๋“ค์ด ๊ฐ ๋งž์ถฐ์„œ ์—ด ๋งž์ถฐ์„œ ์„œ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ผ๋Š” ๋ถ„๋“ค์ด ๊ฐ„ํ˜น ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด์„œ ๋‹จ์–ด๋Š” ์Œ์ ˆ๋‹จ์œ„์—์„œ ๊ฐœํ–‰ํ•˜์ง€ ์•Š๊ฒŒ ํ•ด ๋‹ฌ๋ž€๋‹ค. ์•„ํ•˜~ ๋‚˜์ฒ˜๋Ÿผ ์ด๋Ÿฐ ๊ฐˆ๊ตผ์„ ๋‹นํ•˜๋Š” ํผ๋ธ”๋ฆฌ์…”๋“ค์ด ๋งŽ์œผ์‹ ์ง€, ์˜์™ธ๋กœ ๊ฒ€์ƒ‰ ์œ ์ž…์— text-align:justify๋ฅผ ๊ฒ€์ƒ‰ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์ด ๊ฝค ์žˆ๋‹ค. ๊ทธ๋ถ„๋“ค์˜.. 2020. 9. 15.
[์›นํ‘œ์ค€ CSS] cursor:pointer๊ฐ€ ์›นํ‘œ์ค€. cursor:hand๋Š” ie์—์„œ๋งŒ. 2014.10.04 11:38 [์›น ํ‘œ์ค€ CSS] cursor:pointer๊ฐ€ ์›น ํ‘œ์ค€. cursor:hand๋Š” ie์—์„œ๋งŒ. ์ด๋ฏธ์ง€์— onClick="javascript:…."๋ฅผ ์“ด ๊ฒฝ์šฐ๋ผ๋“ ์ง€ ๋ญ OnClick์†์„ฑ์€ Aํƒœ๊ทธ ์ด์™ธ์˜ ๋ชจ๋“  ๊ฐ์ฒด์— ์ค„ ์ˆ˜ ์žˆ๋‹ค. TD์—๋„ DIV์—๋„ ์ค„ ์ˆ˜ ์žˆ๋Š”๋ฐ...์ด ์†์„ฑ์„ ๊ฐ์ฒด์— ์ค˜๋„ ํด๋ฆญ์„ ํ•  ๋•Œ ์•ก์…˜์€ ์ผ์–ด๋‚˜์ง€๋งŒ ๋งˆ์šฐ์Šค์˜ ์ปค์„œ ๋ชจ์–‘์ด ์† ๋ชจ์–‘์ด ์•„๋‹Œ ํ™”์‚ดํ‘œ ๋ชจ์–‘์œผ๋กœ ๊ทธ๋Œ€๋กœ ๋‚จ์•„ ์žˆ์œผ๋‹ˆ๊นŒ ์‚ฌ๋žŒ๋“ค์ด ํด๋ฆญํ•˜๋Š” ๊ฑด์ง€ ๋ชจ๋ฅผ ๋•Œ๊ฐ€ ๋งŽ๋‹ค. ๊ทธ๋Ÿด ๋• ํ”ํžˆ style="cursor:hand;"๋ฅผ ์“ฐ์ง€๋งŒ, FireFox์—์„œ๋Š” ์•ˆ ๋จนํžŒ๋‹ค. MS์—์„œ ์ž„์˜๋กœ ๋งŒ๋“  ์†์„ฑ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด๋Ÿด ๋• style="cursor:pointer;" ๋กœ ์ฃผ๋ฉด ๋œ๋‹ค. cursor:pointer๊ฐ€ ์›นํ‘œ์ค€์ด๋‹ค. .. 2019. 9. 16.
โœˆ [๋ฐ˜์‘ํ˜• ์›น ๊ธฐ์ดˆ] @media screen and (max-width:620px) and (min-width:300px) ๋ฐ˜์‘ํ˜• ์›น์˜ ๊ธฐ์ดˆ @media screen and (max-width:620px) and (min-width:300px) ๋ฐ˜์‘ํ˜• ์›น์— ๋Œ€ํ•ด ๋‘๋ ค์›€์„ ๊ฐ–๊ณ  ์žˆ๋Š” ํผ๋ธ”๋ฆฌ์…”๋“ค์ด ์ œ๋ฒ• ๋งŽ๋‹ค. ์‚ฌ์‹ค ์•Œ๊ณ  ๋ณด๋ฉด ๋ณ„๊ฑฐ ์•„๋‹ˆ๋‹ค. ๊ฐ€๋กœํญ์— ๋Œ€ํ•œ ์‹œ๋‚˜๋ฆฌ์˜ค๋Œ€๋กœ CSS๋ฅผ ์ ์šฉํ•ด์ฃผ๋ฉด 90%(?)๋Š” ๋๋‚œ ๊ฒŒ์ž„์ด๋‹ค. ๋ฌผ๋ก  ๊ทธ ๊ณผ์ •์€ ์ฝ”๋”ฉ๋‹ต๊ฒŒ ๋…ธ๊ฐ€๋‹ค์ด๊ธด ํ•˜๋‹ค. ๊ฐ™์€ ์Šคํƒ€์ผ์— ๋Œ€ํ•ด 2๋ฒˆ ์ด์ƒ์„ ๊ธฐ์ˆ ํ•ด์ค˜์•ผ ํ•˜๋Š” ์ž‘์—…์ด๋‹ˆ๊นŒ ๋ง์ด๋‹ค. ๋‚˜๋จธ์ง€ 10%๋Š”? ๋ฐ˜์‘ํ˜•์›น์„ ์›ํ•˜๋Š” ํด๋ผ์ด์–ธํŠธ์˜ ๊ธฐ๋ฐœํ•˜๊ณ ๋„ ์ฐฝ์˜์ ์ด๋ฉด์„œ ๊ฐ€ํ•™์ ์ธ ๋ˆˆ๋†’์ด์— ๋งž์ถฐ์ฃผ๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋‹จ์ง€ CSS์˜ @media screen ๋งŒ์œผ๋กœ๋Š” ํ•ด๊ฒฐ๋˜์ง€ ์•Š๋Š” ๋‚œ์ œ๋“ค์ด ํŠ€์–ด๋‚˜์˜ฌ ๋•Œ๊ฐ€ ์žˆ๋‹ค. ๊ทธ๋Ÿด ๋• ํ•˜๋Š” ์ˆ˜ ์—†์ด jQuery์˜ ๋„์›€์„ ๋ฐ›์•„์•ผ ํ•œ๋‹ค. ํ•˜์ง€๋งŒ ์™ ๋งŒํ•˜๋ฉด @media screen์œผ๋กœ ๋Œ€๋ถ€๋ถ„.. 2019. 7. 27.
๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๋‚ ์งœ์„ ํƒ ํผ bootstrap 4.3 datepicker โœˆ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 4.3 ๋‚ ์งœ ์„ ํƒ ํผ: ๊ฐ„ํŽธํ•œ ๋ฐ์ดํ„ฐ ํ”ผ์ปค ์‚ฌ์šฉํ•˜๊ธฐ ์„œ๋ก  ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ ์›น ๊ฐœ๋ฐœ์„ ํŽธ๋ฆฌํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํ›Œ๋ฅญํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ํŠนํžˆ ๋“œ๋กญ๋‹ค์šด์ด๋‚˜ ๋ฐ์ดํ„ฐ ํ”ผ์ปค์™€ ๊ฐ™์€ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‰ฝ๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์ด ํฐ ์žฅ์ ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ฒ„์ „ ์—…๊ทธ๋ ˆ์ด๋“œ ๊ณผ์ •์—์„œ ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 4.3์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋ฉด์„œ ๋งˆ์ฃผํ•  ์ˆ˜ ์žˆ๋Š” ์Šคํƒ€์ผ ๊ด€๋ จ ์ด์Šˆ์™€ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ, ๋‚ ์งœ ์„ ํƒ์„ ์œ„ํ•œ ๋ฐ์ดํ„ฐ ํ”ผ์ปค ๊ตฌํ˜„์— ์ค‘์ ์„ ๋‘˜ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 4.3 ์—…๊ทธ๋ ˆ์ด๋“œ์˜ ์Šคํƒ€์ผ ๋ณ€ํ™” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 4.3์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋ฉด ๊ธฐ์กด์˜ ์Šคํƒ€์ผ์ด ์กฐ๊ธˆ ํํŠธ๋Ÿฌ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ค‘์—์„œ๋„ ํŠนํžˆ ๋‚ ์งœ ์„ ํƒ์„ ์œ„ํ•œ ๋ฐ์ดํ„ฐ ํ”ผ์ปค์˜ ์Šคํƒ€์ผ์ด ์˜ˆ์ „๊ณผ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”์šฑ.. 2019. 7. 25.
โœˆcss3 background-size:cover contain ์†์„ฑ ie7, i8 ํ•ต background-size-polyfill with ์งค : ์Šคํƒ€ํ‚น ํ•˜์ดํž 2016.08.09 11:11 IE EDGE๊นŒ์ง€ ๋‚˜์™€ ์žˆ๋Š” ์„ธ์ƒ์—์„œ ์—ฌ์ „ํžˆ IE7 ๋ฒ„์ „์— ๋Œ€ํ•œ ํ•˜์œ„ ํ˜ธํ™˜ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์„ ํ•ด์ค˜์•ผ ํ•˜๋Š” ๊ฒƒ์ด ์งœ์ฆ์ด ๋‚˜์ง€๋งŒ... UI๋Š” ์•ˆ ๋˜๋Š” ๊ฒƒ๋„ ๋˜๊ฒŒ ํ•˜๋Š” ์‹ ์„ฑํ•œ ์ง์—…! ๋ธŒ๋ผ์šฐ์ €๋“ค์ด ๋ฏธ์ณ ๋‚ ๋›ฐ๋”๋ผ๋„ ํ•ต์ด๊ฑด ๋ญ๊ฑด ์จ์„œ ์ž˜ ๋งž์ถฐ๋ณด์ž. ์ด ๋ฒˆ์— ์†กํŒŒ๊ตฌ๋ฆฝ ํ†ตํ•ฉ๋„์„œ๊ด€ ์ค‘์— ๊ฐ€๋ฝ์‹œ์žฅ ๋„์„œ๊ด€์ด ์˜คํ”ˆํ•˜๋Š”๋ฐ ๋งž์ถฐ์„œ ์†กํŒŒ๊ตฌ๋ฆฝ ๊ฐ€๋ฝ๋ชฐ ๋„์„œ๊ด€์˜ ๋””์ž์ธ ์ˆ˜์ •์ด ์‚ด์ง ์žˆ์—ˆ๋‹ค. ๊ธฐ์กด์˜ ์†กํŒŒ๊ตฌ๋ฆฝ๋„์„œ๊ด€๋“ค์€ BG๊ฐ€ repeat-x๋กœ ๋ฐ˜๋ณต๋˜๊ธฐ ๋•Œ๋ฌธ์—, ๋ณ„ ์‹ ๊ฒฝ์„ ์“ฐ์ง€ ์•Š์•˜์ง€๋งŒ, ์ขŒ์šฐ๋กœ ๊ทธ๋ผ๋ฐ์ด์…˜ ๋˜๋Š” BG๊ฐ€ ๊น”๋ฆฌ๋Š” ๋””์ž์ธ์œผ๋กœ ๊ฒฐ์ •์ด ๋˜์—ˆ๋‹ค. ๋‹น์—ฐํžˆ repeat-x๋ฅผ ์“ธ ์ˆ˜๋Š” ์—†๋‹ค. #topheader{ width:100%; height:90px; z-index:999; background:url(.... 2019. 7. 22.