Mobile first 시장조사기관 Statista의 2022년 통계에 따르면 글로벌한 E-commerce 시장에서 모바일 매출의 2018년도에 이미 PC 매출을 넘어섰고, 모바일 매출의 비중은 점점 늘어나고 있다고 한다. @media (max-width:) vs. (min-width) 내가 몇 개월전에 코딩한 SCSS의 일부이다. @media (max-width: 640px) { .menu { &__top { border-top: 1px solid; ... 우선 처음에 모든 디자인을 PC화면 기준으로 짜놓은 다음에, 이제 모바일도 적용되는 반응형으로 만들어야지라고 하면서 위처럼 media query를 넣기 시작한다. PC부터 짠 후 → 모바일을 짜기 때문에 (max-width: )가 들어가있다. 그러나..

Introduction 티스토리 구글 서치콘솔 등록, 진행한 내용과 방법을 기록하고자 합니다. 1. 구글서치콘솔 등록 왜 하는가? 구글 서치 콘솔은 웹사이트 소유자 및 관리자가 웹사이트를 Google 검색 결과에 등록하고 모니터링하는 도구입니다. 웹 사이트를 구글 서치 콘솔에 등록은 소유자에게 웹사이트의 가시성을 향상시키고 검색 결과에서 더 많은 트래픽을 유치하는 도움이 되며, 웹사이트의 성능을 모니터링하고 개선하기 위한 중요한 단계입니다. 2. 구글서치콘솔 등록 해보자 블로그 관리에서 좌측 메뉴들 속에서 플러그인을 찾아 버튼을 Search누릅니다. 전체 플러그인에서 구글 서치콘솔을 찾아서 눌러봅니다. 연결이 되어있지않다면, 아래에 계정 연결하기 버튼이 활성화 되어 나타납니다. 정상 연결이 되었다면 위 ..

Flexbox 여러 개의 를 item이라고 부르고 이 전체를 감싸는 를 container라고 부르자. Flexbox는 여러 개의 item을 감싸는 container의 속성 값이다. 자식 item을 배분과 정렬을 정할 수 있다. // 기존 CSS display: flex; // tailwind class flex flex는 해당 container를 flexbox로 만들겠다는 뜻이다. 일단 이전 글에서 사용했던 display: block 속성의 div를 10개로 늘린 후 분홍색 border로 감싸는 div를 하나 작성해보자. 1 2 3 4 5 6 7 8 9 10 위 코드의 첫째줄에 flex라는 클래스 딱 한 단어만 넣어보자. ... 그러면 이렇게 inline-block element처럼 바뀐다. flex-d..

Display 속성 display 속성에는 inline, inline-block, block 세 가지가 있다. 1. inline width와 height 값을 주어도 무시하다. 즉, 오로지 박스 안의 content 크기에 따라 박스 크기가 정해진다. y축 margin값을 넣어줘도 다 무시한다. x축 margin 값은 적용된다. 1 2 3 4 5 m-2 ( margin: 0.5rem (8px) ) h-10 ( height: 2.5rem (40px) ) border는 그냥 보기 위해 넣었다. 2. inline-block 위의 inline처럼 하나의 가로줄에 여러 개를 나열할 수 있고, width와 height 값을 적용할 수 있다. 여전히 y축 margin은 무시, x축 margin만 적용된다. 위의 코드에..

rem과 default font size 대부분 브라우저는 default font size가 16px이다. (Chrome, Safari, FireFox 등) 테스트 해보려면 globals.css에 @layer base { html { @apply text-[16px]; } } 를 바꿔보면 글자 크기가 바뀌지 않는 것을 확인할 수 있다. 그러나 일부 모바일 태블릿 브라우저나 e-book reader에서만 ppi 때문에 다르게 가져간다. 이 때문에 CSS 할 때 모든 사이즈는 px로 하드코딩하는 대신에 rem을 사용하는 것이 (심지어 어떤 때는 border 굵기까지도) best practice가 되었다. rem이란 default font size에 비례하는 숫자이다. 모든 것을 px이 아닌 rem으로 바꾸는..

AWS DMS 지난 글의 AWS DMS(Data Migration Service) 방법은 실패했다. Database가 연결된 Sprint Boot를 빌드하고 실행하는데 에러가 났다. 에러는 DB의 Function과 Sequence 때문에 나는 에러. AWS DMS는 Tables과 Indexes만 복사를 했던 것이었다. 노가다로 Functions와 Sequences를 복사하는 방법이 있지만 더 쉬운 방법을 선택하기로 하였다. pg_dump 우선 Target DB (Aurora)에 있는 database를 전부 삭제해서 비어있는 database로 되돌려놨다. 1. 내 맥북에 postgresql client 설치하기 설치된 psql이 있는지 확인해봅니다. psql --version 없으면 설치 brew inst..