Atelier BiCute

#1 모바일 친화성 테스트 모바일 친화적인 사이트를 보유하는 것은 온라인 인지도를 유지하는 데 중요한 역할을 합니다. 여러 국가에서 스마트폰 트래픽이 데스크톱 트래픽을 넘어서고 있습니다. 아직 사이트를 모바일 친화적으로 만들지 않았다면 모바일 친화적인 사이트를 만들어야 합니다. Search Console의 모바일 친화성 테스트 도구를 사용하면 사이트가 모바일 친화적인지 빠르고 간편하게 테스트할 수 있습니다. 사용 방법은 매우 간단합니다. 테스트 하려는 웹페이지의 전체 URL만 입력하면 됩니다. 모바일 친화성 테스트 페이지로 바로가기 > #2 PageSpeed Insights 웹페이지의 전반적인 속도를 측정하여 사이트 성능을 파악할 수 있습니다. 사이트를 로드하여 시뮬레이션을 한 후 속도에 관한 다양한 분..

#1 설치 다양한 설치 방법과 컴파일러가 존재하지만 VSCode를 사용하고 있다면, 확장 마켓플레이스에서 'Live Sass Compiler'를 검색하여 설치만 하면 모든 준비 과정은 끝입니다. * 각종 블로그에서 node.js설치부터 시작해서 이것저것 너무 건들여대는 설명이 많아서 이 글 적어봄. #2 사용방법 (1) CSS 파일을 사용하는것과 큰 차이는 없습니다. (2) 새로운 파일의 확장자를 *.scss로 생성하여 코드를 작성. (3) 웹 브라우저는 html, css, js만 읽을수 있기 때문에 scss로 작성된 파일은 웹 브라우저가 읽을수 있도록 변환(Compile)해줄 필요가 있습니다. (4) 컴파일을 하는 방법은 화면 하단의 Watch Sass 버튼을 클릭하면 끝. *만일 하단 바가 안보이면 ..

웹 개발을 하다 보면 이미지 소스가 필요한 경우가 상당히 많습니다. 매번 사이즈를 확인하고 작업 중인 폴더로 이미지를 옮기는 과정도 귀찮아지기 시작하는데... Unsplash에서 제공해주는 API를 이용하면 이러한 고민이 쉽게 해결됩니다. #1 Unsplash Developers 사이트 주소는 다음과 같습니다. https://unsplash.com/developers 개발자로 등록(Register as a developer)한 후 다양하게 사용하는 방법도 있지만, 웹 개발용 샘플 이미지만 사용할 거라면 등록은 물론이고 특별히 거쳐야 할 과정도 없어 매우 편리합니다. 예전에는 샘플 이미지와 함께 복붙만 하세요 처럼 샘플 이미지와 함께 디테일한 설명이 있었던 거 같은데, 다 사라진 거 같아서 정리할 겸 글을..

쓸데없지만 멋있는!? 마치 스타벅스 한복판에 자리잡고 이걸로 코딩을 하고있으면 주변의 이목을 끌수있을거 같은. 그런 확장앱을 하나 소개해보고자 합니다. #1 Power Mode 당신의 코드가 파워풀해진다! Power Mode는 VSCODE, Brakets 등에서 사용할 수 있는 확장 툴입니다. 코딩을 할때 지진과 같이 화면이 흔들리면서 이펙트와 콤보수(연속 타이핑수)를 표시해 줍니다. #2 설치 방법 확장 마켓 플레이스로 이동한 후, power mode를 검색하면 쉽게 설치 할 수 있습니다. #3 사용방법 (1) 설정 창으로 이동 하여 power mode를 검색합니다. (2) 가장 위쪽에 위치한 powermode: Enabled를 체크해주면 사용 상태가 됩니다. 설정을 통해 찾아 들어가는게 귀찮다면 명령..

#1 네이버 개발자 센터에 접속 네이버 개발자 센터에 접속한 후 로그인을 하고 오픈 API 이용 신청을 합니다. 다음은 네이버 아이디로 로그인 오픈 API 신청 페이지입니다. 하단의 [오픈 API 이용 신청]을 눌러 다음으로 진행합니다. https://developers.naver.com/products/login/api/api.md #2 애플리케이션 등록 (API 이용신청) 자신에게 맞는 형태로 이름과 로그인 제공 정보를 선택. 서비스 환경 설정 등을 진행해 줍니다. 서비스 URL은 자신의 홈페이지 주소를, 로그인 Callback URL은 이후에 생성할 callback페이지를 연결할 주소입니다. 모든 설정을 완료하고 등록을 하면 Client ID와 Client Secret 코드가 등록된 페이지가 나타납..

#1 자료형(Data Type) 종류 설명 문자열 (string) 시작과 끝이 작은 따옴표('')나 큰 따옴표("")로 감싸진 값 숫자 (number) 따옴표를 사용하지 않은 숫자 논리형 (boolean) 참(true)과 거짓(false)을 나타냄 배열 (array) 하나의 변수에 여러 개의 값을 저장 객체 (object) 함수와 속성들이 함게 포함된 경우 undefined 데이터의 유형이 지정되지 않은 상태 null 데이터의 값이 유효하지 않은 상태 JavaScript에서의 False ① false, ② ''(빈 문자열), ③ 0, ④ NaN, ⑤ undefined, ⑥ null, ⑦ document.all(이건 거의 사용하지 않으니 몰라도 됨) #2 연산자 종류 설명 산술 연산자 +, -, *, /,..

홈팟이 있는 장소에서 애플 기기를 사용하게 되면, 좀 더 가까이 이동하거나 탭 하여 연결하라는 푸시 알람과 함께 진동이 발생합니다. 이게 음악을 듣거나 홈팟을 사용하게 될 경우엔 손쉽게 연동이 되는 부분이라 분명 매우 편리한 기능인데... 위와 같이 책상이나 주 활동공간에 홈팟이 있을 경우 작업을 하다 폰을 들 때마다 팝업창이 떠버리기 때문에, 오히려 매번 매우 불편한 상황이 발생합니다. 이럴 땐 다음과 같은 방법으로 홈팟의 푸시 알람을 끌 수 있습니다. 홈팟 자동 연결 푸시 알람 끄기 1. 홈팟 연결 푸시 알람은 위와 같이 나타납니다. 이 알람을 끄기 위해선 다음 절차를 따릅니다. 2. '설정 > 일반 > AirPlay 및 Handoff'로 이동합니다. 3. HomePod으로 전송을 OFF로 해줍니다.

enterkeyhint는 모바일 가상키보드의 enter키에 표시되는 내용을 사용자에게 더욱 도움이 되는 형태로 지정해 줄 수 있습니다. #1 Enter (엔터) enterkeyhint="enter" 기본적으론 다음 줄로 행을 이동합니다 ios의 영문 키보드에선 return으로 표기됩니다. (*흔히 말하는 엔터가 ios에선 return이라 불립니다) #2 Done (완료) enterkeyhint="done" 일반적으로 더 이상 입력할 것이 없을때 사용. IME(입력기)가 닫힙니다. #3 Go (이동) enterkeyhint="go" 일반적으로 사용자가 입력한 텍스트의 대상으로 사용자를 데려가는 이동 작업에 사용 #4 Next (다음) enterkeyhint="next" 일반적으로 텍스트를 수락할 다음 필드..

#1 스타일 시트 종류 설명 브라우저 기본 스타일 웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일 인라인 스타일 style 속성을 사용해 필요한 요소에 스타일을 직접 지정 내부 스타일 시트 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리 외부 스타일 시트 문서에서 사용하는 스타일을 모아서 따로 파일로 저장한 후 연결해서 사용 #2 CSS 기본 선택자 종류 설명 작성 예시 전체 선택자 문서의 모든 요소에 스타일을 적용 * { margin: 0; } 타입 선택자 특정 태그를 사용한 모든 요소에 스타일 적용 p { font-style: italic; } 클래스 선택자 특정 부분만 선택해서 문서 안에 여러 번 적용 마침표(.)를 붙여 사용 .bg { backgroun..

Google Maps API를 사용하기 전 알아두면 좋은 사전 정보 • Kakao 지도와는 달리 Google Maps를 사용하면 대한민국 외의 지역을 표시할 수 있습니다. • Google은 매달 200달러의 크레딧을 무료로 제공하며, 200달러를 초과할 경우 등록한 신용카드로 이용료가 청구됩니다. • 단, 처음 가입한 신용카드 정보의 경우 자동 가입 방지를 막기 위해서일 뿐, 유료 계정으로 직접 업그레이드하지 않았다면 이용료가 청구되지 않습니다. #1 구글 계정 만들기 기존에 사용하는 구글 계정이 있다면 그대로 사용하면 되고, 없다면 구글 계정 페이지로 이동하여 구글 계정을 생성해 줍니다. https://accounts.google.com/ #2 Google Maps Platform에서 API 키를 받기..