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

์ „์ฒด ๊ธ€111

[react] CKEditor ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ™œ์šฉํ•˜์—ฌ ๊ฒŒ์‹œํŒ ๊ตฌ์„ฑํ•˜๊ธฐ (์ตœ์†Œ ๋†’์ด ์„ค์ •ํ•˜๊ธฐ, CSS Module) ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. CKEditor ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ™œ์šฉํ•˜์—ฌ ๊ฒŒ์‹œํŒ ๊ตฌ์„ฑํ•˜๊ธฐ CKEditor ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๊ฒŒ์‹œํŒ์„ ํšจ๊ณผ์ ์œผ๋กœ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. HTML, CSS๋ฅผ ์ „๋ถ€ ํ™œ์šฉํ•ด์„œ ๊ตฌํ˜„ํ•˜๋ ค๋ฉด ์–ด๋ ค์šด ๊ฒŒ์‹œํŒ ์š”์†Œ๋ฅผ ๊ฐ„ํŽธํ•˜๊ฒŒ ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ๊ตฌํ˜„ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค. CKEditor ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ 1. CKEditor ๋ž€? CKEditor๋Š” ์›น ๊ธฐ๋ฐ˜์˜ ํ…์ŠคํŠธ ์—๋””ํ„ฐ๋กœ, HTML๋กœ ์ž‘์„ฑ๋œ ๋ฌธ์„œ๋ฅผ ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์›น์‚ฌ์ดํŠธ์˜ ์‚ฌ์šฉ์ž๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง์ ‘ ์ฝ˜ํ…์ธ ๋ฅผ ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค. ์ด ์—๋””ํ„ฐ๋Š” JavaScript๋กœ ์ž‘์„ฑ๋˜์—ˆ์œผ๋ฉฐ, ๋‹ค์–‘ํ•œ ์›น ๋ธŒ๋ผ์šฐ์ €์™€ ํ˜ธํ™˜๋ฉ๋‹ˆ๋‹ค. CKEditor ์‚ฌ์ดํŠธ URL https://ckeditor.com/ckeditor-5/ CKEditor 5 | Power.. 2024. 1. 9.
[GitHub] ๋ฆฌํฌ์ง€ํ† ๋ฆฌ repository ์ƒ์„ฑํ•˜๊ณ  VScode์—์„œ ์—ฐ๊ฒฐํ•˜๊ธฐ (Clone URL ๋ฐฉ์‹, Collaborators ์ดˆ๋Œ€ํ•˜๊ธฐ) ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. ๋ฆฌํฌ์ง€ํ† ๋ฆฌ repository ์ƒ์„ฑํ•˜๊ณ  VScode์—์„œ ์—ฐ๊ฒฐํ•˜๊ธฐ GitHub๋Š” ํ”„๋กœ์ ํŠธ ๊ด€๋ฆฌ์™€ ํ˜‘์—…์„ ์œ„ํ•œ ํŽธ๋ฆฌํ•œ ํ”„๋กœ๊ทธ๋žจ์ž…๋‹ˆ๋‹ค. GitHub์˜ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค๋ฅธ ์ปดํ“จํ„ฐ์—์„œ๋„ ์–ด๋””์—์„œ๋“  ์ž‘์—…ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ฒฐ๊ณผ๋ฌผ์„ ํŒ€์›๊ณผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 1. GitHub ๋กœ๊ทธ์ธ ๊นƒํ—ˆ๋ธŒ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋กœ๊ทธ์ธ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. URL์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. https://github.com/ GitHub: Let’s build from here GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage yo.. 2024. 1. 8.
[CSS] ๋ฏธ๋””์–ด์ฟผ๋ฆฌ Media Query ์ ์šฉํ•˜๊ธฐ (์‚ฌ์ด์ฆˆ ๋ถ„๊ธฐ์  ๊ธฐ์ค€ px, ํ…Œ์ŠคํŠธ ๋ฐฉ๋ฒ•) ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. ๋ฏธ๋””์–ด์ฟผ๋ฆฌ Media Query ์ ์šฉํ•˜๊ธฐ (์‚ฌ์ด์ฆˆ ๋ถ„๊ธฐ์  ๊ธฐ์ค€ px, ์‚ฌ์šฉ๋ฐฉ๋ฒ•) ์›น์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ ํ›„ ํ•ด๋‹น ํŽ˜์ด์ง€๋ฅผ ๋ชจ๋ฐ”์ผ์—์„œ ๋ณด๋ฉด CSS๊ฐ€ ์ด์ƒํ•ด์ง€๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ(Media Queries)๋Š” ๋‹ค์–‘ํ•œ ๋””์Šคํ”Œ๋ ˆ์ด ์žฅ์น˜์˜ ๋ทฐํฌํŠธ(Viewport) ํฌ๊ธฐ์™€ ํ•ด์ƒ๋„์— ๋”ฐ๋ผ ์›น ํŽ˜์ด์ง€์˜ ์Šคํƒ€์ผ์„ ๋™์ ์œผ๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ(Responsive Web Design)์ด ๊ฐ€๋Šฅํ•ด์ง€๋ฉฐ, ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ํ™”๋ฉด์˜ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ž‘์•„์ง€๋ฉด ์›๋ž˜ ์žˆ๋˜ ์นดํ…Œ๊ณ ๋ฆฌ ๋ชจ์–‘์„ ๋ฐ”๊พธ๊ฑฐ๋‚˜ ๊ธ€์ž ํฌ๊ธฐ๋ฅผ ์ค„์ด๋Š” ๋“ฑ CSS๋ฅผ ๋”ฐ๋กœ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์„ ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฏธ๋””์–ด์ฟผ๋ฆฌ ๋ถ„๊ธฐ์  1. ๋…ธํŠธ๋ถ & ํƒœ๋ธ”๋ฆฟ ๊ฐ€๋กœ .. 2024. 1. 7.
[tistory] ํ‹ฐ์Šคํ† ๋ฆฌ ์„ค์ • ์Šคํฌ๋กค๋ฐ” ์ƒ‰, ์Šคํƒ€์ผ ๋ณ€๊ฒฝํ•˜๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. ํ‹ฐ์Šคํ† ๋ฆฌ ์„ค์ • ์Šคํฌ๋กค๋ฐ” ์ƒ‰, ์Šคํƒ€์ผ ๋ณ€๊ฒฝํ•˜๊ธฐ ๊ฐ„๋‹จํ•œ ์„ค์ •์œผ๋กœ ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ์˜ ์Šคํฌ๋กค๋ฐ”์˜ ์ƒ‰์ƒ๊ณผ ์Šคํƒ€์ผ์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ์Šคํฌ๋กค๋ฐ” ์Šคํƒ€์ผ ๊ธฐ๋ณธ์œผ๋กœ ์„ค์ •๋˜์–ด ์žˆ๋Š” ์Šคํฌ๋กค๋ฐ”๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. ํ”ํžˆ ๋ณผ ์ˆ˜ ์žˆ๋Š” ํ‰๋ฒ”ํ•œ ๋ชจ์–‘์ž…๋‹ˆ๋‹ค. ๋ณ€๊ฒฝํ•œ ์Šคํฌ๋กค๋ฐ” ์Šคํƒ€์ผ ์ €๋Š” ์ดˆ๋ก์ƒ‰์œผ๋กœ ์„ค์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์„ค์ • ๋ฐฉ๋ฒ• 1. ๊ด€๋ฆฌ > ๊พธ๋ฏธ๊ธฐ > ์Šคํ‚จ ํŽธ์ง‘ ์ ‘์† ๋ธ”๋กœ๊ทธ์˜ ๊ด€๋ฆฌ ํŽ˜์ด์ง€์—์„œ ๊พธ๋ฏธ๊ธฐ ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ์ฐพ์•„ ์Šคํ‚จ ํŽธ์ง‘์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค. 2. html ํŽธ์ง‘ html ํŽธ์ง‘์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค. 3. CSS ์ฝ”๋“œ ์ž…๋ ฅ CSS body ์œ„์ชฝ์— ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค. (์ด ์œ„์น˜๊ฐ€ ์•„๋‹ˆ์–ด๋„ ์ƒ๊ด€ ์—†์Šต๋‹ˆ๋‹ค. ์ €๋Š” ๊ด€๋ฆฌ๋ฅผ ํŽธ๋ฆฌํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด body ์œ„์ชฝ์— ๋„ฃ์—ˆ์Šต๋‹ˆ๋‹ค.) ::-webkit-scrollbar-trac.. 2024. 1. 6.
loading

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”