멋진 개발자가 되고 싶어

ARTISTA(SVG 애니메이션 자동 생성 웹) svg로 로고 이미지를 제작한다. 일러스트레이터, Figma를 활용하면 된다. artista에 들어가서 사진을 업로드한다. 원하는 옵션값을 설정한다. 상단의 view code를 클릭한다. svg 코드는 html에서 원하는 곳에 붙여넣는다. 옆에 있는 css코드는 모두 css파일 안에 붙여넣는다. 자바스크립트에 아래의 코드 추가한다. window.addEventListener('load',function(){ document.querySelector('svg').classList.add('active'); });참고자료 artista

CTA Call to Action의 약자 웹사이트, 랜딩페이지, 이메일 또는 광고에서 고객이 원하는 작업을 수행하도록 유도하는 짧은 문구를 의미한다. 사용자가 원하는 작업을 수행하도록 다음 단계로 안내하는 역할을 한다. 참고자료 Wix Blog - 보고 지나칠 수 없는 20가지 강력한 CTA(콜투액션) 예시와 버튼

[ck editor] Angular에서의 image upload adapter 사용 ck editor의 adapter 파일 업로드를 위해 ck editor에서는 여러가지 어댑터를 제공한다. 이와 관련하여 자세하게 확인하고 싶다면 아래의 링크를 통해 확인하면 된다. Image upload overview 한글로 된 자료 : [ck editor] image adapter에 관하여 들어가기 전에 이제부터 Angular 프로젝트에서 이미지 어댑터를 사용하는 방법에 관하여 설명을 할 것이다. 내가 직접 프로젝트를 제작하면서 생긴 문제를 해결해 나가는 과정의 설명정도로 봐주면 좋을 것 같다. ck editor를 사용하여 제작한 프로젝트는 github에 업로드 해놨다. 아래의 링크를 통해 확인할 수 있다. commu..

ck editor의 image adapter ck editor 연결 직후 사진을 추가하고 싶어도 사진이 추가 되지 않는다. 이때 콘솔창을 확인해보면 아래와 같은 경고가 뜬다. ckeditor.js:6 filerepository-no-upload-adapter Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-filerepository-no-upload-adapter위의 링크로 접속하면 경고에 대한 문서로 이동하게 된다. 해당 문서를 보면 아래와 같은 정보를 얻을 수 있다. 파일 업로드를 위해 업로드 어댑터를 활성화 해야 한다는 사실 이미지 어댑터 관련 공식 문서 링크 Image upload overvie..

ck editor는 무엇일까? 웹 페이지나 온라인 애플리케이션에서 콘텐츠를 작성할 수 있게 하는 에디터이다. 자바스크립트 기반의 에디터이다. 위지위그 방식의 텍스트 에디터이다. 위지위그(WYSIWYG)란 무엇일까? What You See Is What You Get의 약자이다. "보는 대로 얻는다"는 뜻이다. 문서 편집 과정에서 화면에 보이는 내용이 출력물과 동일하게 나오는 방식을 말한다. 워드프로세서와 같은 방식을 말한다. 관련 링크 ck editor 공식 홈페이지 ck editor 데모 페이지 ck editor 공식 문서 ckeditor5 npm 페이지 ck editor는 어떻게 사용할까? 아래의 링크에 프로젝트에서 사용하는 방법이 자세하게 정리되어 있다. Predefined CKEditor 5 bu..

Angular 프로젝트에서 ck editor는 어떻게 사용할까? ck editor를 사용하면서 관련된 내용을 한글로 정리해봤다. 영어로 된 문서에 불편함을 느꼈을 사람들에게 조금이나마 도움이 되길 바란다. 자세한 내용은 아래의 공식 홈페이지의 해당 문서 링크를 참고하면 된다. Angular rich text editor component 들어가기 전에 ck editor에는 다양한 버전의 에디터가 준비되어있다. 하지만 이 튜토리얼은 classic버전을 기준으로 작성되었다. 설치 사용하길 원하는 프로젝트를 준비한다. 해당 프로젝트에 ck editor를 설치한다. npm으로 설치하는 경우 npm install --save @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-w..