예방이의 개발일기

라이브러리는 기본적으로 1.0.0 부터 시작 버전 업데이트 하는 방식에 대한 설명은 공식문서를 확인해 보자 About semantic versioning | npm Docs Documentation for the npm registry, website, and command-line interface docs.npmjs.com 테스트 해볼 수 있는 사이트도 있다. 애매하면 테스트 사이트가서 테스트해보자! npm semantic version calculator Use the caret (aka hat) symbol, ^ Examples ^2.2.1 ^0.1.0 ^0.0.3 Note: caret behavior is different for 0.x versions, for which it will only..

npm 명령어 공식문서 CLI Commands | npm Docs Documentation for the npm registry, website, and command-line interface docs.npmjs.com npm 셋팅하기 // package.json 일일히 먼저 설정 npm init // 한번에 package.json 만들기 npm init --yes npm init --yes으로 빠르게 package.json파일을 생성 후, json파일을 직접 수정하는게 더 편한 것 같다. npm script 작성하기 script 부분에 명령어를 작성할 수 있다. 내가 지정한 명령어일 경우 실행할 때는 run 키워드를 꼭 같이 사용해야한다. // start는 원래 있는 명령어라서 run 필요없음 npm..

구글 앱 비밀번호 생성하는 방법 구글 계정관리 보안 -> 2단계 인증 앱 비밀번호 젤 밑으로 스크롤 내리면 앱비밀번호라고 있다. App name에 아무 이름이나 작성해준다. (그냥 구분용) 만들기 클릭하면 앱 비밀번호가 나온다 바로 ctrl + c 해서 메모장에 작성해놓자!! 확인 누르면 다신 볼 수 없는 것 같다. 중간에 띄어쓰기가 들어가 있는데 .env 파일에 작성할 때는 띄어쓰기는 모두 붙이면 된다. 끝이다!

srcset 속성 파일위치, 픽셀 밀도, 너비값 지정 가능 콤마를 이용해 다중 지정 가능 해당 속성은 생략 불가능 (파일 위치 필수, 픽셀 밀도와 너빗값은 생략 가능) 파일위치 : 이미지 파일 위치 픽셀 밀도 : 해상도의 배수 너빗값: sizes 속성과 뷰포트 크기와 연계되어있음 media 속성 (생략가능) 미디어 쿼리를 뜻함 (모든 미디어 쿼리의 조건문을 사용할 수 있는 것은 아님, 너비값에 대해서만 지원) sizes 속성 (생략가능) 이미지가 표현될 영역의 크기 설정, 너빗값과 미디어 쿼리 지정 가능 type 속성 불러올 파일의 유형 지정 가능 img 태그 src 속성에 기본으로 출력될 이미지 경로 입력 picture, source 태그 지원하지 않는 브라우저를 위한 용도 (크로스 브라우징) 마지막에..

vscode에서 prettier 사용할 때, 저장할 때마다 자동으로 줄바꿈 되는 것 방지하는 방법 Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io 주석으로 줄바꿈 하고 싶지 않은 부분 바로 위에 아래 코드 넣기 주석 형식은 각 확장자에 맞게 고쳐야함 아래는 css일 때, /* prettier-ignore */

내가 헷갈려하는 flex에 대한 부분을 정리해봤다. inline-flex CSS display: flex 그리고 inline-flex 인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들의 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정 rgy0409.tistory.com flex-flow .item { display: flex; /* flex-direction flex-wrap */ flex-flow: flex-col wrap; } align-self 교차축 방향으로 박스를 개별적 배치할 수 있게 해주는 속성 속성명 속성값 적용요소 align-self auto stretch flex-start..

이미지, 동영상 등 미디어 요소에 대해 알아보자! : 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, (en-US) 요소가 사용자 경험에 좀 더 적합합니다. developer.mozilla.org 속성 값 설명 src url 삽입(embed)할 동영상 주소 태그 사용해서 삽입할 동영상 명시 가능 autoplay true 자동재생 여부 (autoplay="false"는 동작 안해서 autoplay 속성을 완전히 제거해야지 autoplay가 비활성화된다.) buffered 미디어의 어느 시간대의 버퍼에 들어있는지 확인할 수 있는 속성 controls ..

CSS의 grid와 flex를 사용하면 크게 사용하지 않는 편인 것 같다. 하지만 크로스브라우징을 해야할 수도 있으니까... 알아두는 것도 좋을 것 같다. (flex와 grid를 사용못할 수 있기 때문에... 거의 그 경우는 없지만 ㅎㅎ, can I use 에서 확인해보면됨! ) 근데 주로 사파리, 사파리 mobile, 갤럭시 브라우저에서 말썽이 많이 나는 듯 (아마 내 기억에 사파리 ios14?인가에서 flex gap을 못사용했다. 근데 grid gap은 또 사용가능 ㅎㅎ) 🍎 가변 그리드 공식 (박스의 가로 너비) ➗ (박스를 감싸고 있는 부모박스의 너비) ✖️ 100 = 가변크기의 % 값 작업 할 때 부모 박스를 잘 사용해야하는 것 같다. (부모 박스를 적재적소에 잘 사용하는 눈은 경력 차인듯.....

반응형 웹에 필요한 4가지 기본 개념 🍎 가변 그리드 Fluid Layout / Flexible Layout / Flexible Grid 반응형은 px로 작업할 수 없다. 대신 퍼센트(%)로 작업해야한다. 퍼센트(%)로 작업해야지 가변 폭에 따라 내용들도 가변적으로 늘어났다 줄어들었다 할 수 있다. 💡 가변, 가변적이다 "어떠한 객체/물체 또는 사물이 늘어나거나 줄어들거나 성질이 변하는 것" 💡 그리드, 그리드 작업 그리드란 격자, 눈금을 말함 웹 디자인에서는 웹페이지의 가로크기, 세로크기, 여백, 단 수 등 웹사이트의 구조 설계를 위한 의미로 사용 🍎 미디어쿼리 & 뷰포트 퍼센트로만 css를 작업한다고해서 반응형 웹이 되는 것은 아니다. 비율로 제작 시 가변적으로 작동하긴 하나 기기나 환경에 따라 구조..