뷰포트(Viewport)란? 뷰포트는 현재 보고 있는 컴퓨터 화면의 영역을 나타낸다. 웹 브라우저 용어로 UI, 메뉴바 등을 제외하고는 일반적으로 브라우저 창과 동일하다. vh, vw 사용 전 호환성 체크 : https://caniuse.com/viewport-units vh (Viewport Height) viewport(화면 크기)를 기준으로 하는 단위로 1vh는 뷰포트의 높이의 1%이다. vw (Viewport Width) 1vw는 뷰포트의 너비의 1%이다. - 뷰포트 너비, 높이 기반으로 설정하는 것은 편하지만, vh 는 모바일에서 버그가 많다. - 뷰포트 사이즈가 브라우저의 주소바 UI를 포함하지 않기 때문이다. - 100vh 는 모바일에서 전체 뷰포트 높이 만큼이 되어야 하지만, 스크롤시에 U..
에러 발생 Formik을 사용하면서 SelectBox에서 선택한 text가 input 창에 입력되지 않는 오류가 발생했는데, 크롬 console창에는 다음과 같은 오류가 나타났다. A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component 에러 원인 input 태그의 value가 undefine..
텍스트 ...으로 표시하기 텍스트가 너무 길 경우 ...으로 생략 하려고 했다. text-overflow : ellipsis 속성을 적용했지만 반응이 없어 조금 더 조사했다. text-overflow ellipsis 안먹힘 해결 방법 다음과 같은 조건으로 CSS가 작성되었는지 점검한다. 텍스트를 감싸고 있는 부모 요소는 블록 엘리먼트 요소(div, table, ul, ol, header, footer..)이다. 따라서 width값을 설정할 수 있고 이에 따라 text-overflow가 발생할 수 있다. white-space: nowrap - 문자 간 공백은 축소되고 개행(줄 바꿈)은 방지된다. overflow: hidden - 위 속성의 영향으로 문자의 개행이 방지되었기 때문에 텍스트가 한 줄로 길게 늘..
