CSS (21) 썸네일형 리스트형 (CSS) 카카오톡 브라우저 주소창과 네비게이션 바 고정 카카오톡을 통해 링크에 접속할 경우, 인앱 브라우저가 실행됩니다. 이 때, 화면을 위로 스크롤하면 인앱 브라우저의 주소창과 네비게이션 바가 자동으로 숨겨집니다. 이러한 동작으로 인해 브라우저의 창 크기에 혼동이 생길 수 있습니다. 모바일 버전에서는 문제를 해결하기 위해 메뉴 버튼을 우측 상단에 배치하고, 해당 버튼을 클릭할 때 메뉴가 화면 전체를 채우는 효과를 주었습니다. 하지만 문제는 메뉴가 표시된 상태에서도 화면에 고정되어야 한다는 점입니다. 스크롤 방지 효과를 적용해도 인앱 브라우저의 주소창과 네비게이션 바가 자동으로 숨겨지는 현상이 발생합니다. 이러한 상황에서 주소창과 네비게이션 바를 고정하기 위해서는 CSS 효과를 사용할 수 있습니다. 자세한 기술적인 내용은 다음과 같습니다 html { widh.. (CSS) createGlobalStyle vscode prettier 적용 안됨 Next.js + TS + Styled components를 활용하여 서비스 페이지 제작하는 도중 글로벌 스타일의 필요성을 느껴 createGlobalStyle을 선언하였다. 기존에 html+css로 제작된 홈페이지의 css 코드를 그대로 붙여서 저장하였지만 prettier가 제대로 작동하지 않는다. import { createGlobalStyle } from 'styled-components' import { reset } from 'styled-reset' export const GlobalStyle = createGlobalStyle` ${reset} * { box-sizing: border-box; -moz-box-sizing: border-box; } 대략 위에 처럼 시작한다. stackover.. (CSS) 모바일 기기에서 hover 제거 웹사이트에서 scrollTop button을 제작하였고 hover 효과를 주었다. 문제는 모바일 기기에서 해당 버튼을 클릭하면 hover 효과가 계속 남아 있다는 것이다. hover 효과를 모바일 기기에서 제거하고 싶을 때 CSS 방법이다. .scrollTopBtn { position: fixed; top: 85%; left: 75%; cursor: pointer; opacity: 0.2; @media (hover: hover) { &:hover { opacity: 1; } } @media의 hover: hover를 사용하여 hover 효과를 모바일이 아닌 full screen에서만 적용하였다. (CSS) table header 고정과 스크롤에 의해 border 투명화 현상 해결 1. table header 고정 방법 th가 한 줄일 경우 position : sticky 로 고정을 하면 된다. th가 아래 이미지 처럼 두 줄일 경우 position : sticky과 top : ?px 로 상단에서 영역을 고정값을 준다. 이때 top의 크기는 해당 th의 height 만큼 주면 된다. .result-table > thead > tr:first-child > th { position: sticky; top: 0; z-index: 1; border-bottom: 1px solid #d1d1d1; } .result-table > thead > tr:nth-child(2) > th { position: sticky; top: 40px; z-index: 1; border-bottom: 1px.. (CSS) font-size 최소 크기 이상으로 줄여지지 않는 경우 크롬의 경우 브라우저에서 설정한 최소 글꼴 크기로 줄어들지 않는다. 아무리 @media를 사용해서 반응형으로 만든다고 해도 div나 span의 크기를 벗어나는 텍스트의 줄바꿈 현상을 강제로 봐야 하는 경우가 있다. 해결책 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 해결완료 스마트폰 가상 키보드 활성화시에 UI Resize 현상 방지 이슈설명 웹 페이지를 만든 후 vercel을 통해 배포 진행하였습니다. 스마트폰에서 input 창에 입력이 필요한 경우 가상 키보드가 화면에 출현하여 본래의 UI가 Resize 되면서 화면이 일그러지는 현상이 발생하였습니다. 가상 키보드 출현 전의 화면 가상 키보드 출현 후의 화면 input 창과 부모 요소인 테두리의 사이즈가 변경된 것을 확인할 수 있습니다. (참고) 가상 키보드 화면 테스트 가상 키보드 화면을 crome에서 확인할 수 있습니다. 크롬-toggle device toolbar- 디바이스 기종(Nexus5, Nexus5x) - portrait keyboard 선택(우측 상단 스마트폰 회전 버튼) 이슈설명 화면 전체 영역의 height 값을 기존에는 %로 설정했는데 px로 고정을 해주었습니다.. (CSS) Skeleton UI 제작 도입 Skeleton UI로 Loading 컴포넌트를 만들어 본다. 3가지의 주요 image를 핸들링하는 요소와 2가지의 animation 요소로 구현한다. image 핸들링 요소 background-image background-position background-size animation 핸들링 요소 background-repeat animation 제작 프로세스 1. linear-gradient 로 그라데이션 이미지 구현 background-image는 배경의 이미지를 설정한다. color와는 다른 의미이다. Skeleton UI에서 hightlight 되는 이미지는 linear-gradient로 구현된다. CSS 그레이디언트 보러가기 rgba(255, 255, 255, 0)은 '흰색' 이다. 이 .. (CSS) input[type="date"] placeholder 적용 처리 "도움이 되셨다면 공감과 댓글로 지지해주세요!!" 시작일과 종료일에 캘린더 기능을 구현하기 위해 JS의 input type='date'를 이용하였다. input type='date'와 전체 페이지가 조화롭게 보이게 하기 위해 최대한 유사한 색감을 사용했다. placeholder와 CSS 적용하였다. 처음 날짜 선택 전에 '날짜선택' placeholder를 주었다. 이를 위해서 몇가지 설정이 필요하다. HTML CSS input[type='date']::before { content: attr(data-placeholder); width: 100%; } input[type='date']:focus::before, input[type='date']:valid::before { display: none; } .. 이전 1 2 3 다음
