Atelier BiCute

Visual Studio Code의 Live Server는 기본적으로 설정되어있는 브라우저를 이용하여 열리게 되어있습니다. window라면 Edge가 별로라 기본을 Chrome으로 설정하는 경우가 많으니 큰 문제가 안될 것인데, Mac 같은 경우엔 safari가 충분히 매력적이기에 Chrome을 메인으로 쓰는 사람은 잘 없을 것입니다. 이럴 때 라이브 서버를 크롬 브라우저로, 혹은 원하는 다른 브라우저로 설정하기 위해선 다음과 같은 방법으로 라이브 서버의 설정을 변경해 주면 됩니다 # Live Server Config Step 1. '설정'으로 이동합니다. Mac은 "Code > 기본 설정 > 설정"(단축키 cmd + ,) 윈도우는 "파일 > 기본 설정 > 설정"(단축키 ctrl + ,) Step 2. ..

"폰트는 한글은 Noto Sans KR로, 영어는 Roboto로, 숫자는 Spoqa Han Sans Neo로 부탁드려요." 이런 요청을 받으면, 매번 해당 언어마다 폰트를 지정해 줄 수도 없는 노릇인데, 이럴 때 @font-face를 사용하면 쉽게 해결할 수 있습니다. #1 웹 폰트 웹 폰트는 사용자가 현재 사용하는 기기에 서체를 설치하지 않았더라도 @font-face 명령을 통해서 웹 브라우저에서 폰트를 다운로드하여 사용자에게 보여줍니다. 웹 폰트를 사용하기 위해서는 @font-face로 해당 폰트를 다운로드할 위치를 지정해주고, font-family 속성을 사용하여 적용 할 수 있습니다. 사용 예) @font-face { font-family: 'Gugi-Regular'; font-style: nor..

깃허브를 통하여 여러사람이 협업(또는 집과 회사 등 둘 이상의 공간에서 작업)하는 경우에 사용하는 방식입니다. #1 공동 작업자 초대하기 대표(또는 팀장)은 협업할 팀원을 공동 작업자로 추가할 수 있습니다. setting > collaborators로 이동한 후 add people을 선택하고 해당 팀원의 깃허브 유저명 또는 이메일 주소를 통해 초대장을 발송할 수 있습니다. #2 소스 코드 다운받기 일단 작업을 이어서 진행하기 위해선 깃허브(GitHub)에 올라와 있는 소스 코드를 내 컴퓨터로 내려 받아야 합니다. ① 소스를 다운받아 작업을 할 폴더를 만들고 ② 비주얼 스튜디오 코드에서 해당 폴더를 열어줍니다. ③ 해당 폴더를 연 상태에서 터미널을 실행 시키면 터미널 창에 해당 폴더에 들어와 있는지 확인해..

px을 em으로 변환한 표가 꽤나 자주 필요한데, 어디를 검색해도 최대 40px까지밖에 안보이는거 같아 개인적인 사용을 위해 80px까지 조금 범위를 넓혀 작성해 보았습니다. 참고. 대중적으로 사용되는 폰트는 10px에서 12px까지는 1px, 12px에서 18px까지는 2px, 18px에서 24px까지는 +3px, 24px에서 72px까지는 12px씩 일정한 규칙으로 증가하고 있습니다. 이러한 12가지 사이즈의 폰트에 대해서는 (*)표시가 되어있습니다. 변환표 Pixels EMs 1px 0.063em 2px 0.125em 3px 0.188em 4px 0.250em 5px 0.313em 6px 0.375em 7px 0.438em 8px 0.500em 9px 0.563em 10px* 0.625em 11px..

최근 집에서 나만의 PC가 아닌 공용 PC로 작업을 하게 되면서 매번 크롬에 로그인했다가 로그아웃을 할 때 정보가 남아있지 않을까 걱정이 되었습니다. 그냥 로그아웃을 해버리면 내가 즐겨찾기한 북마크 기록이 그대로 웹브라우저에 남아있어서인데, 이 방법이 맞나? 싶어 찾아보다가 인터넷에 널러있는 수많은 방문 기록 초기화, 북마크 삭제 같은 건 아무런 도움이 안돼서 직접 알아낸 방법을 작성해 봅니다. 크롬에 나의 계정으로 로그인 했을떄 사용하는 방법입니다. (열심히 찾아봤던것에 비해 너무나 방법이 쉬워서 살짝 허탈하긴 했지만... 이걸 왜 몰랐을꼬...) #1 로그인 했을때 기록 삭제하는 방법 1) 크롬 브라우저의 내 계정 아이콘을 클릭 2) '동기화 사용 중'을 클릭 3) 동기화 '사용 중지'를 클릭 4) ..

#1 Git ≠ GitHub 깃(Git)과 깃허브(GitHub)는 같은 것이 아닙니다. Git은 버전 관리를 손쉽게 도와주는 소프트웨어이며, GutHub는 이 Git으로 저장된 내용들을 저장할 수 있는 공간을 제공해 주는 서비스 중 가장 유명한 것일 뿐, 깃허브만 이런 기능을 사용할 수 있는 것은 아닙니다. #2 GitHub를 사용하는 이유. 소스 코드의 버전별 저장/관리 팀 프로젝트(협업) 코드 공유 코드의 배포 파일을 통으로 복사하지 않아도 브렌치를 이용해 여러 가지 패턴을 시도해 볼 수 있음 등. #3 깃허브(GitHub) 사용 준비 1) GitHub 유저등록 아래의 GitHub 홈페이지로 이동한 후 회원가입(Sign Up)을 하고 로그인(Sign In)을 합니다. 링크 : https://githu..

제가 설치하여 사용하고 있는 확장 프로그램 모음입니다. 하나씩 글을 적기엔 분량이 너무 적을 거 같아서 그냥 한 번에 쭉 리스트를 올려봅니다. #1 이건 필수! Korean(사용법) Language Pack for Visual Studio Code Visual Studio Code의 설정을 한글로 바꿔주며, 기본적으로 처음 설치 시 오른쪽 아래의 팝업창을 통해 자동으로 설치됩니다. Live Server 웹브라우저를 통하지 않더라도 수정하는 결과를 바로바로 확인할 수 있게 도와주는 프로그램으로 코딩한 내용의 수정 사항을 즉각적으로 확인할 수 있습니다. #2 강력 추천 Auto Rename Tag 한쪽의 태그만 수정해도 반대쪽의 태그까지 자동으로 수정해 줍니다. Bracket Pair Colorizer 2 ..

#1 기능 설명 웹 프로젝트에서 강조 등 다양한 용도로 사용하는데 적합한 애니메이션 CSS 라이브러리입니다. 간단하게 클래스명을 추가하는것으로 다양한 효과를 사용하실 수 있습니다. #2 효과 확인하기 다양한 효과들은 다음 공식 페이지에서 확인할 수 있습니다. 공식 페이지 : https://animate.style/ #3 적용 및 사용 방법 Animate.css 연결하기 ※ NPM 방식과 CDN 방식을 지원합니다. 혹시나 해서 download 방식으로도 만들어 보았지만 아래 내용은 CDN 방식으로 설명합니다. 다음 코드를 앞에 붙여 넣습니다. 사용 방법 기본적인 사용 방법은 효과를 주고싶은 곳에 animate__animated 클래스를 부여한 후, 뒤에 animate__[원하는 효과이름]을 추가해주면 됩니..

윈도우에서는 그냥 설치했었는데 Homebrew가 뭐지? 어떻게 설치하라는거지?...등 패닉에 걸린 사람들을 위해 적어보는 Mac에서 Git 설치하는 방법입니다. *M1 CPU 변경 이후 설치 오류가있어 추가적인 작업이 필요하다고 듣긴했는데... M1 모델을 사용하고 있지 않아 그 부분은 확인하지 못했습니다. #1 Git에서... 1) Git 홈페이지로 이동 우선 Git을 다운받을수 있는 홈페이지로 이동합니다. 링크 : https://git-scm.com/ 2) Download 페이지로 이동 오른쪽에 보이는 Download for Mac을 클릭하여 설치 안내 페이지로 이동합니다. 3) Homebrew 페이지로 이동 Homebrew 링크를 눌러 Homebrew 페이지로 이동합니다. *(별로 중요하지 않은 이..

리액트를 시작하기 위하여 Node.js와 React를 설치하는 방법. 그리고 기본적인 파일들의 설명을 정리해 보았습니다. #1 Node.js 설치하기 다음 사이트로 이동하여 Node.js를 설치합니다 링크 : https://nodejs.org/en/ 왼쪽은 많은 사람들이 사용하고 있어 신뢰할 수 있는 안정성을 가진 버전, 오른쪽은 최신 버전입니다. (그냥 최신버전 받으시면 됩니다) ※ Node.js는 라이브러리를 설치하기 쉽게 도와주는 툴 #2 Visual Studio Code 설치 다음 사이트로 이동하여 Visual Studio Code를 설치합니다 링크 : https://code.visualstudio.com/ 1) 작업 폴더 생성 원하는 위치에 리액트를 사용하기 위한 폴더를 생성합니다. 2) 작업 ..