1. 커스텀-오버레이-마커의 앵커와 위경도 좌표 불일치 서버로부터 오는 데이터에 따라 컬러, 애니메이션 등 스타일이 변경 적용되는 마커를 만들어야 하는 상황이었다. 카카오 지도 API에서는 HTML, CSS, JavaScript를 이용해 커스텀하게 마커를 만들 수 있는데 이것을 커스텀 오버레이라고 부르고 있다. 이 글에서는 커스텀한 마커를 만들고 마커 아래에 있는 뾰족한 부분, 즉 앵커에 위경도 좌표가 정확하게 위치하도록 하는 방법에 대해 다룬다. 2. 커스텀-오버레이-마커 만들기 1) 카카오 지도 마커와 div 요소 지도에 찍기 [그림 1]과 같이 카카오 지도의 특정 위경도에 카카오 지도 마커와 커스텀-오버레이-마커로 만들 div 요소를 찍었다. 카카오 지도 마커의 경우 앵커 부분이 지정한 위경도에 위..

1. 홈 화면에 반응형 레이아웃이 필요한데... 진행 중인 Next.js 프로젝트의 홈 화면에는 대표 이미지, 대표 문구, 그리고 가입 및 로그인 버튼이 있다. PC화면과 모바일 화면에 모두 대응해야 하는 상황이다. module css를 사용하고 있어서 미디어쿼리를 직접 작성하려다가 일단 구글링을 해보기로 했다. 그런데 이렇게 알잘딱깔센 한 포스팅이 있누! 2. 모듈 CSS에 간단하게 적용하고 싶어 검색하다가 어썸한 발견! 아래의 참고 자료는 flex를 이용한 반응형 레이아웃에 대해 잘 정리해 놓았다. 중간 중간 삽입된 움직이는 삽화로 해당 코드의 결과를 한눈에 확인할 수 있어 친절하다! 아래 코드는 미디어 쿼리를 사용하지 않는 반응형 레이아웃 구현 방식인데 깔끔하다! flex-basis 속성을 유의해서..

1. 노트북 화면에서는 꽉 찬 화면인데 스마트폰에서는 왜 이러지?! 노트북에 기본으로 달려있는 카메라로 테스트해 가며 웹 AR을 이용한 프로젝트를 개발하고 있다. 프레임워크는 Next.js를 사용했다. mind-ar 라이브러리를 이용해서 웹 AR을 구현하였고 프로젝트를 실행해 노트북에서 꽉 찬 카메라 화면을 확인했다. https-단말기 카메라 제어는 http에서는 불가하다-가 기본으로 적용되는 Vercel에 배포해 스마트폰에서 테스트해 봤는데 기대했던 꽉 찬 화면으로 카메라가 작동하지 않았다! ㅠ_ㅠ 2. object-fit 적용 video 선택자에 object-fit을 cover로 적용하면 카메라로 촬영 중인 화면이 꽉 차게 보이게 된다. 이미지의 왜곡 없이 화면에 꽉 차게 보이기 때문에 가로가 세로보..

1. 중첩된 CSS가 감지되었다고? (8:3) Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 진행 중인 Next.js 프로젝트의 layout에 스타일을 지정하려고 했고, 이때 다른 프로젝트의 SCSS 코드 일부를 복붙 했더니 발생한 경고문이다. 이유는 복붙 한 스타일 코드에 중첩 CSS가 포함되어 있어서였다. 이 포스팅에서는 중첩 CSS에 대해-핵심..

input 자동완성 입력 시 배경색과 글자색이 비슷해서 구분이 잘 가지 않았다. 그래서 아래의 CSS 코드를 추가하여 자동완성 폰트 색상을 변경하였다. input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0 1000px #161010 inset !important; -webkit-text-fill-color: #fff !imp..

1. div 태그 가로/세로 중앙-가운데-정렬 flex 사용시 : div태그의 경우 flex와 margin으로 가운데 정렬할 수 있다. .outer { display: flex;}.inner { margin: auto;} grid 사용시place-items: center;display: grid; 출처https://hianna.tistory.com/675 2. Tailwind의 경우 flex 또는 grid를 이용flex flex-col align-centergrid place-items-center 출처https://eight20.tistory.com/532024-09-27 추가3. 가로/세로 가운데 정렬 4가지 방법(최종) Button Button Button Button

text-align, display, vertical-align을 이용해 보더 정중앙에 텍스트 배치 [그림 1]의 겉뚜껑 카드 안에 "정상, 대각선"을 그려 넣고자 했다. 보더 안에 텍스트를 넣는 것은 어렵지 않았다. 하지만 보더 안의 정중앙에 글자를 배치하기 위해서는 몇 가지 설정을 더 해줘야 했다. 아래 코드에서 주석에 해당하는 부분을 참고하자! .card-message-wrap { height: 40px; width: 40px; border-style: solid; border-width: thin; border-radius: 50%; /* 이하 텍스트 중앙 배치 코드 */ text-align: center; display: table-cell; vertical-align: middle; } bac..

[그림 1]과 같이 이미지 맵에서 툴팁을 사용하고자 하였다. 여기서 소개하고 있지 않은 방식으로 먼저 시도를 했었는데 붉은색으로 표시된 서클 세 곳에 각각 다른 툴팁이 표시되어야 하는데 같은 툴팁 하나만 표시되는 문제가 있어 검색 끝에 아래의 사이트를 찾게 되었다. https://codeconvey.com/responsive-image-map-with-hover/ Responsive Image Map with Hover Tooltip - Codeconvey In this tutorial, we'll create a responsive image map with hover tooltip using CSS and jQuery. Here you can download code for image map. cod..