코딩계란이

요즘 코딩을 계속 했는데와카타임을 보니까 시간이 기록되지 않아 등록하는 방법을 다시 찾아보았다. 먼저,와카타임에 로그인2. Settings → Account3. API Key를 복사4. Visual Studio Code → 확장(Extension) → WakaTime 검색 후 설치5. Visual Studio Code에서 F1클릭 → Wakatime 입력6. WakaTime: Api Key를 클릭 → 복사한 API 키 입력 후 enter* 좌측 하단에 wakatime이 보이지 않는다면, 테마/ 디자인 변경에서 white로 변경을 해주면 됨(테마/ 디자인 변경은 공식 홈페이지에서 Preferences를 클릭하면 됨)

지금은 반응형을 하는 중이다.화면의 width가 줄어들었을 때,메인 메뉴의 텍스트가 세로로 배치되는 작업을 하고싶었다. 하지만, 맞다고 생각하는 코드를 치고, 몇 번씩이나 수정을 해도코드가 소 지 기 강 고 자 L개 원 부 아 양 주 o 지 이 하 g 는 i 질 n 문 이런 식으로 세로로 배치되지 않았다. 내가 배치한 방향은 소개지원기부강아지고양이자주하는질문Login 이런 방식이었는데 계속 헤맸다ㅠㅠ혹시나 싶어서display: flex;에flex-di..

포트폴리오 하단을 작성하면서, 어떤 정보가 먼저 오는 게 좋을까 싶었다.나는 보통 상호명, 전화번호, 영업시간을 순서로 보고통화가 힘들거나 전화번호가 없을 경우에는 이메일이나 카카오톡까지 본다. 그래서 푸터에 위치시킬 보호소 정보에 위치시킬 정보들 순서를상호명, 전화번호, 영업시간 순으로 할까 했는데생각을 해보니까 영업시간이 먼저 와야하지 않을까 싶기도 했다.그래서 지피티의 도움을 받기로 했다. 지피티는footer는 방문자가 가장 빨리 확인해야 할 정보로 가장 중요하거나 자주보는 것 부터 위로 배치해야 한다고 했다.그래서 순서는1. 보호소명 제일 먼저 보여줘야 브랜드/기관 인식이 된다고 한다. 2. 영업시간 사람들이 언제 문의하거나 방문할 수 있는지 바로 알 수 있어야 한다고 한다. ..

사용자의 아이디를 출력해주는 페이지에서회원가입 버튼, 로그인 버튼, 비밀번호 찾기 버튼을 만들었다.이 버튼들은 클릭을 했을 때 해당 페이지로 이동하도록 설정해 놓았다. css는 기본 설정: 1. 배경색 코랄색2. 글씨색 흰색 내가 원하는 hover했을 때의 반응은,1. 배경색은 코랄색보다 연한 색 (익힌 연어색)2. 검은색으로 설정했는데 적용이 되지 않았다.알고보니 는 결국 태그이기 때문에브라우저 기본 스타일 때문에 검정/파란색 글씨색과 밑줄이 자동으로 들어가기 때문에그래서 부모에 색을 줘도 a는 따로 지정해야 해야한다고 한다.

네이버 로그인하다가 생각나서 작성해 본다.로그인 구현할 때마다 시간 낭비를 너무 많이해서ㅠㅠ 먼저 수파베이스는 안정성이 높고 성능과 기반이 좋은 sql 기반인 관계형 데이터베이스다.관계형 데이터베이스는 행과 열이 존재하는 것이고.엑셀이라고 생각하면 편한 것 같다. 1. VSC에 수파베이스를 설치한다.명령어는 yarn add @supabase/supabase-js 2. 클라이언트를 초기화한다.supabase접속 → 로그인 → 좌측 메뉴바 → Table Editor → Create a new table 3. 클라이언트 url 및 어논 키 찾기대쉬보드 → 좌측 메뉴 바 → Project API 4. API keys 찾기 1) URL: Project Settings → API → Project URL ..

그냥 정리하고 싶다,,ㅎㅎ import { useState } from "react"; → 외부 모듈 불러오기function Components() { → 컴포넌트 함수 시작 const [count, setCount] = useState(0); → useState 선언 // → 함수 내 (return 위) 로직 작성 const increase = () => { setCount(count + 1); }; const decrease = () => { setCount(count - 1); }; return ( // 화면에 보여줄 JSX {count} + - ); } export defaul..

레이아웃에도 비율에 기반한 개념을 적용할 수 있음부모 요소의 크기에 비례해자식 요소의 크기가 변하는 방식은가변 레이아웃을 만들 때 흔히 사용되는 방식%상대적이고 비례적인 단위비율 계산을 기반으로 변화백분율 값부모 요소와의 상대적 크기를 지정너비와 높이, 여백, 글자 크기에 사용너비와 여백은 부모 요소의 너비에 비례해 계산

em, rem주변 상황에 가변성을 지니고 있지만기기 크기에 따라크기가 달라지는 단위는 아님반응형 단위라고 할 수는 없음 vw화면의 넓이뷰포트 너비의 1/100 wh화면의 높이뷰포트 너비의 1/100 vmin뷰포트 높이와 너비 중작은 쪽의 1/100 크기 vamx뷰포트 높이와 너비 중넓은 쪽의 1/100 크기

픽셀 (px)절대 길이 단위가변성 없음반응형 웹에 부적합 em, remdiv에서 텍스트 크기를 조절할 때 사용상대 단위em부모 요소의 글꼴 크기를 조정할 때 사용부모 요소의 font-size = "20px"1em → 20px2em → 40pxrem루트 요소의 글꼴 크기여백 크기(padding, margin)를 정할 때는자기 자신의 글자 크기를 기준으로 함

반응형 웹다양한 기기나 브라우저의 크기에 맞게구성이나 크기를 변경해 가며 반응하는 웹문서또는 이를 위해 사용하는 기법 모바일초기에는 모바일 전용 url을 제공네이버 데스크톱이야? → https://www.naver.com모바일이야? → https://m.naver.com태블릿, 스마트 워치, 자동차 ...기기의 유형이 다양해짐에 따라한계를 드러낼 수 밖에 없음기기에 최적화 된 컨텐츠를 계속해서 생산해 내는 것은현실적으로 어렵기 때문기기에 적절하게 맞춰지는 사이트를 개발하는 것이바람직 함즉, 반응형 웹사이트를 만드는 것이 좋음반응형 웹사이트에서 가장 핵심이 되는 키워드는 '가변성'기기에 따라 다른 화면 크기에 대응하기 위해뷰포트 속성에 대한 마크업을 추가해야 함 뷰포트 (viewport)화면에 보여지고..