전체 글(58)
-
JS es6
1. let / const var 재선언 가능, 재할당 가능 범위 = 전역, 지역 ( 함수 ) var은 반복문 안에서 변수가 공유되는 문제가 있음 -비동기인 setTimeout 함수 콜백이 공유되어 실행 시점이 반복문보다 늦거 변수의 값이 동일하게 처리됨 let 재선언 불가능, 재할당 가능 범위 = 전역, 지역 ( 블럭 {} ) let을 사용하여 처리 0~9 까지 출력 const - 상수 재선언, 재할당 불가능 범위 = 전역, 지역 ( 블럭 {} ) 변수 선언시 초기값 필수 for..of 문 for in 문과 다르게 index 번호가 아닌 index 번호에 해당하는 값들을 할당한다 탬플릿 리터럴 `` ( 백팁 ) 문자열 안에 표현식을 포함시킬 수 있고, 여러 줄 작성을 허용하여 간편하게 문자열을 만들 수..
2022.10.25 -
CSS3 LESS / SASS
LESS SASS = CSS + JS 파일명.less => 컴파일 => 정규 css 코드 lesscss.org https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com https://sass-guidelin.es/ko/#section-42 Sass Guidelines — Korean translation 분별 있고, 유지∙확장 가능한 Sass 작성을 위한 주관적인 스타일가이드. sass-guidelin.es https://www.sassmeis..
2022.10.24 -
하이브리드 앱 초기 설정/설치 ( android-studio )
다운로드 1. Node.js 설정 1) Node.js 최선 LTS 버전 다운 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2) npm 설정 Cmd 창 열기 => C/ 로 경로설정 => npm -v ( 8.15.0 이 뜨면 설정완료 ) 2.JDK 설정 1) jdk window 버전 64bit 다운로드 파일 설치 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html Download the Latest Java LTS Free Subscribe to Jav..
2022.10.12 -
자바스크립트 카카오맵 API 활용방법
https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오에서 서비스하는 Developers 사이트에 회원가입을 하면 카카오에서 제공하는 여러가지 API 오픈소스를 활용할 수 있습니다. 내 어플리케이션에 들어가 아이디별로 제공하는 키를 확인합니다. Javascript 의 경우 가장 위의 네이티브 앱 키를 code에 삽입합니다.
2022.10.01 -
모바일 해상도 맞추기
평균 픽셀 밀도 → 2.0 ~ 2.625 ~ 3.0 @media screen and (-webkit-min-device-pixel-ratio: 2){ // min 을 제외하면 픽셀밀도 2만 적용, min 포함시 픽셀밀도 최소 2 선택자 { background : 고해상도URL // 모바일은 .png 선호 } } @media screen and (-webkit-min-device-pixel-ratio: 3){ 선택자 { background : 고해상도URL // 모바일은 .png 선호 } } 배경이미지로 처리( IR기법 ) 할 경우 : 고정 사이즈 각 서비스 할 해상도 별 이미지가 각각 저장되어 있어야 한다. ex) logo.png( 320 ) , logox2.png( 640 ) media query 를 ..
2022.09.28 -
CSS3 display:flex
justify-content -Container안에 있는 Item들을 수직방향으로 정렬하는 방법을 지정합니다. -Item 의 행의 간격 / 열의간격을 한번에 줄 수 있다 ( gap: 행값px 열값px ) flex-start Container안에 있는 Item들을 상단에 정렬함 (기본값) flex-end Container안에 있는 Item들을 오른쪽으로 정렬함 center Container안에 있는 Item들을 수평방향의 중앙에 정렬함 space-between Container안에 있는 Item들을 일단 양쪽끝에 붙히고 나머지 Item들을 일정간격으로 정렬함 align-items -Container안에 있는 Item들을 수직방향으로 정렬하는 방법을 지정합니다. flex-start Container안에 있는..
2022.09.27