본문 바로가기

Programming

 (64)
[Sass/SCSS] 3. Sass/SCSS 문법 (1) 주석(Comment) Javascript와 동일한 두 가지 사용. // Compile되지 않는 주석 /* Compile되는 주석 */ 그러나, Sass의 경우 여러 줄의 주석을 사용할 때 줄의 앞에 *가 붙어야 하고 같은 선상에 있어야 함. /* 여러 줄의 주석을 * 사용할 경우 앞의 *를 * 맞춰 주어야 합니다. */ SCSS는 기존 CSS와 동일하게 사용함. (2) 중첩 if (SCSS) { .component { width: 100%; .content { float: left; .box { float: left; } } } } else if (SCSS to CSS) { .component { width: 100%; } .component .content { float: left; } .com..
[Sass/SCSS] 2. Sass/SCSS의 Compile 방법 Sass(SCSS)는 단독으로 동작할 수는 없습니다. 즉, 전처리기로 작성 후 CSS로 변환하여 최종적으로는 표준 CSS로 동작해야만 합니다. 여러가지의 변환 방식이 있지만, Javascript 개발 환경인 Node.js에서 사용할 경우 추천되는 방법들을 소개합니다. (1) SassMeister 간단한 코드의 경우 compiler 설치가 부담될 때 사용. Sass/SCSS 코딩을 CSS 로 실시간 변환. SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com (2) node-sass Node.js를 LibSass라는 co..
[Sass/SCSS] 1. Sass/SCSS 기초 1. 왜 CSS 전처리기를 사용해야하는가? CSS는 작업이 고도화 될 수록 가독성과 유지보수가 어려워질 수 있습니다. 코드의 재활용성을 높여 클린 코드를 작성하고, 가독성과 생산성을 높이기 위해 전처리기의 사용이 필요합니다. 2. CSS 전처리기(Preprocessor) 전처리기라는 이름처럼 CSS의 동작 전에 사용되는 기능으로 CSS의 불편한 점을 상쇄시키는 확장 기능입니다. 3. 왜 Sass/SCSS를 사용하는가? 가장 많이 사용되는 CSS 전처리기는 Less, Sass(SCSS), Stylus 세 가지가 있습니다. Less는 난이도가 낮아 접하기 쉬우나 기능의 한계가 있습니다. Stylus는 비교적 후발주자로 성숙도가 떨어지기에 사소한 버그가 있을 수 있습니다. Sass/SCSS는 앞서 언급된 Le..
[HTML/Frontend] Ajax로 form을 submit 할 때 새로고침 방지 태그에 onsubmit attribute를 추가하고 return false; 해주면 됩니다. 👏🏻👏🏻👏🏻👏🏻👏🏻
[Summernote] 프로젝트에 Summernote 적용하기 회사 작업 중 에디터 기능을 추가해달라는 요청이 있어 Summernote를 적용하기로 결정했다. 1. Summernote 소스코드 다운받기 2. 파일을 CSS/JS를 관리하는 각각의 폴더에 넣어준 후, head안에서 불러온다. 3. Summernote를 사용할 적절한 곳에 배치한다. Hello Summernote 4. JQuery를 사용해 Summernote를 활성화 시킨다. 5. Summernote에 기존 데이터를 불러올 때 $('#summernote').summernote('pasteHTML', data); pasteHTML을 사용하여 내용을 불러와야 Summernote에서 사용가능 한 수정 가능한 형태로 값이 들어간다. 6. Summernote를 이용해 미리보기/수정 없이 내용만 볼 수 있게 뿌릴 ..
[React Native] Single & Multi-select Flatlist 1. 단일 선택 Single-select flatlist // 단일 선택 // 상단 state const [selected, setSelected] = React.useState(new Map()); // data const Data = [ { id: '0', title: 'title1', }, { id: '1', title: 'title2', }, { id: '2', title: 'title3', }, ]; // select 되었을 때의 event const onSelect = (id, title) => { setSelected(id); }; // 렌더 될 Item const Item = ({id, title, selected, onSelect}) => { return ( onSelect(id, tit..
[Javascript] 정규식 모둠세트 프로젝트 한 번당 한 번 이상은 사용하게 되는 느낌의 Javascript 정규식입니다. 천 단위 콤마, 3자리 수 콤마 (Comma separator) // Comma separator(,) 천 단위 콤마, 3자리 수 콤마 function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } 이메일 유효성 체크 (Email Validation) // Email Validation function CheckEmail(str) { var reg_email = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/; if (!reg_email.test(str)..
[React Native] iOS, Android App icon 적용하기 준비 1024X1024px 사이즈의 앱 아이콘에 들어갈 기본 이미지 우선 xcode와 android studio가 요구하는 파일을 확인 해 봅시다. iOS (XCode) 프로젝트 폴더의 Images.xcassets을 누르면 비어있는 AppIcon이 보입니다. 클릭 해 주세요. AppIcon을 확인해 보면 iPhone의 경우 알림을 보낼 때 사용되는 것, Settings에서 사용하는 것 등 상황에 따라 요구하는 이미지의 크기가 다릅니다. 이번에는 Android를 살펴보겠습니다. Android (Android Studio) 안드로이드의 경우는 프로그램 자체에서 적용하는 것이 아닌, 폴더의 이미지만 바꿔주면 됩니다. android/app/src/main/res 에 들어가면 mipmap 폴더들이 보입니다. 해당..

티스토리툴바