본문 바로가기

Web Layouts

 (22)
(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에서만 적용하였다.
(HTML) <meta name="viewport" content= 1. 개념 정의 meta viewport 태그는 애플이 아이폰, 아이패드에서 브라우저의 뷰포트 크기 조절을 위해 제작하였다. meta viewport는 W3C 명세에는 없어서 표준은 아니지만 safari가 널리 사용되면서 다른 브라우저들도 이 태그를 채택하게 된다. IE10은 viewport의 크기 조절을 위해 표준으로 제안된 @viewport rule을 사용한다. 따라서 아이폰과 IE10 브라우저 모두에서 작동하는 웹페이지를 제작하려면 2가지 방식으로 viewport 크기를 조절하는 것이 필요하다. @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } 2. ..
(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)은 '흰색' 이다. 이 ..

티스토리툴바