CSS

FE

[CSS] background 잘림 현상 해결

PROBLEM뷰포트 크기를 줄여 스크롤이 생기면 일부분 배경 색상이 잘려 나오지 않는 현상이 있었다.이미지와 로그인 버튼을 감싸는 div에 h-full로 해두었다. (h-full  -> height: 100%) 여기서 h-screen(height: 100vh)으로 바꾸어도 결과는 그대로였는데, 아마도 뷰포트 크기를 바꾸었을 때 바로바로 적용이 되지 않는 것이 문제였다. 문제의 이전 화면은 아래와 같았다.BEFORE import GoogleSignInButton from '@/components/pc/GoogleSignInButton';import IllustSignIn from '@/img/Illust_signIn.png';import Image from 'next/image';export default..

FE

[CSS] px, em, rem, vw, vh

css에서 길이 단위가 여러가지가 있는데, 하나씩 살펴보자 !절대 단위, 상대 단위절대 단위항상 고정된 길이를 나타내는 단위이다.px, cm, mm 등이 있지만 px을 사용한다.  상대 단위고정되지 않고 어떤 기준에 따라 유동적으로 바뀌는 길이를 나타내는 단위이다.em, rem, vw, vh 등이 있다.px- 절대값을 사용하는 단위1px은 항상 고정된 물리적 크기에 해당한다.em, remem (element)- 부모 요소의 font-size 기준같은 요소 내에 설정된 폰트 크기 값이 있을 때는 해당 요소의 font-size가 기준이 된다.html { font-size: 16px;}div { font-size: 20px; width: 10em; /* 200px */} rem (root element)..

개미는 뚠뚠 🐜
'CSS' 태그의 글 목록