들어가면서안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 만들고 있습니다. 이 서비스에는 시험 목록을 보여주는 부분이 많습니다. 시험 목록에는 아래와 같은 카드가 존재하고, 여기에 시험을 설명하는 글이 들어갑니다. 시험 설명 글의 줄 수에 따라 카드의 높이가 달라지게 됩니다. 저는 카드마다 높이가 다른 것은 일관성이 없어 보기가 불편했습니다.이러한 이유로 시험 설명의 최대 라인 수와 최소 라인 수를 고정해보았습니다.최대 라인 수 고정먼저, 최대 라인 수를 고정하는 법을 알아보겠습니다.이 속성을 적용할 경우, 줄 수는 최대 3줄까지 늘어나고, 그것을 넘어가면 "..."으로 처리하게 됩니다.{ overflow: hidden; // 넘치는 부분을 숨김 displ..

들어가면서안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 만들고 있습니다.플러피에서는 단답형, 서술형, 객관식 단일 선택, 객관식 복수 선택, True/False 등 다양한 문제 유형을 지원하고 있습니다. 이에 따라 요청 데이터에도 다양한 형태의 문제 데이터를 받아야 합니다.예를 들어, 단답형 문제와 객관식 단일 선택의 경우 질문은 동일하게 필요하지만, 옵션 여부나 정답 형태가 다릅니다. 다음의 코드를 참고해주세요.// 단답형 문제 요청 데이터{ "text": "1 + 1 = ?", "type": "SHORT_ANSWER", "correctAnswer": "2"}// 객관식 단일 선택 문제 요청 데이터{ "text": "1 + 1 = ?", "type": "..

안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 만들고 있습니다. 모바일 환경에서도 시험 문제를 풀 수 있게 하기위해서 반응형으로 개발하던 중 문제가 사소한 문제가 발생했는데요.문제를 푸는 화면의 크기를 꽉차게 하고 싶어 height: 100vh로 했지만 주소창의 크기로 인해서 스크롤이 되는 문제였습니다. 아래의 동영상을 참고해주세요. vh는 CSS에서 사용하는 단위로, 뷰포트(viewport)의 높이에 기반합니다.1vh는 viewport의 전체 높이의 1%를 의미합니다. 예를 들어, 뷰포트 높이가 1000px라면, 1vh는 10px입니다. 사파리나 크롬같은 경우 주소 표시줄을 감췄을 때를 기준으로 설정되었기 때문에 100vh를 설정했지만 스크롤되는 현상이 발생했습니..