1. 모든 html 파일에서 메뉴명을 수정해야 하다니...회사 홈페이지의 서브 메뉴를 수정할 일이 있었다. 해당 html 파일을 열어 수정했고 다 끝났다고 생각했고 행복했다. 만약 이야기의 결말이 이랬다면 이 글은 쓰지 않았을 것이다.회사 홈페이지는 각 메뉴별로 각각 메뉴를 가지고 있는 방식이다. 다시 말해 메뉴별로 html 파일이 존재하고 각 페이지는 동일한 네브바 코드가 작성되어 있다. 심지어 어떤 메뉴는 서브메뉴도 이와 같은 구조로 되어 있다. 결국 소메뉴의 명을 하나만 수정할 것이 아니라 모든 html 파일에서 수정해야 한다는 것이며-어쩌면 처음으로-SPA가 무척 고맙게 느껴졌다.모든 html 파일에서 소메뉴의 명을 수정한다는 것은 이번 한번만이라면 해줄 만하다. 그래, 충분히 그럴 수 있다. 하..

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

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

1. 파비콘을 적용해야 하는데, 흠... 안드로이드 스마트폰의 크롬 브라우저에서 배포한 웹앱을 '홈화면추가'를 통해 홈화면에 아이콘을 생성해 보았다. 그런데 기대와 달리 못난(?) 아이콘이 적용되었다. 생각해 보니 누구 탓도 아닌 내 탓이었다. 파비콘을 적용한 기억이 없었기 때문이다. 이젠 문제와 원인을 알았으니 파비콘을 적용하면 되는데, 디자인된 ico 파일도 가지고 있지 않아서 고민이 되었다. 그러다가 검색을 통해 어썸 한 서비스를 만나게 되었다. 2. 놀라운 RealFaviconGenerator! "All browers, All platforms, Your favorite technologies" RealFaviconGenerator사이트의 홈 화면에 걸려있는 슬로건(?)이다. 뭔가 거창해 보여 '..

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..

당신이 잘 모르는 8가지 HTML 팁 여러분의 마음을 사로잡을 HTML 팁 모음입니다! 1. 장치 카메라를 여는 캡처 속성 input 태그에 이메일, 문자, 비밀번호 등의 속성이 있는 것처럼 모바일 기기의 카메라를 열어 이미지를 캡처하는 속성도 있습니다. 이것은 두 가지 값을 가질 수 있는 capture속성으로 수행됩니다. 전면 카메라 사용자 후면 카메라 환경 2. 웹사이트 자동 새로고침 head태그에서 일정 시간이 지나면 웹사이트가 새로고침 되도록 설정할 수 있습니다! 이 스니펫은 10초마다 웹사이트를 새로고침 합니다. 3. 맞춤법 검사 활성화 HTML spellcheck 속성을 사용하고 이를 true로 설정하여 활성화할 수 있습니다. lang속성을 사용하여 사용할 언어를 지정합니다. 표준 속성이며 모..