예방이의 개발일기

구글 앱 비밀번호 생성하는 방법 구글 계정관리 보안 -> 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를 작업한다고해서 반응형 웹이 되는 것은 아니다. 비율로 제작 시 가변적으로 작동하긴 하나 기기나 환경에 따라 구조..

반응형 웹에 등장 모바일 기기가 나오고 모바일 웹이 등장하고, 그 뒤에 계속해서 태블릿, 패블릿 기기 등 여러 사이즈의 기기들이 나오면서 다양한 화면에 최적화된 웹사이트를 제공하기 위해 반응형 웹이 등장하게 되었다. - 2015년 10월 반응형웹이란? 해당 기기 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹이라고 할 수 있다. 해당 사이트에서 다양한 반응형 웹사이트를 만나볼 수 있다. 반응형으로 작업해야하는 이유는? 유지보수의 간편함 반응형을 구축할 때 작업해봤는데 100% 인정은 할 수 없는 것 같다. 모바일과 웹의 디자인의 갭이 적었을 때 효과가 좋은듯? 적응형 사이트도 해봤는데 확실히 적응형보다는 유지보수가 쉬운 건 맞다. (적응형은 pc, mo 다 각자 수정해야하고 다 별도로 테스트 해야..