개요 기획서나 디자인 시안을 보다 보면 정말 흔하게 등장하는 UI가 있다. 바로 긴 텍스트 줄이기다. 보통은 3줄 정도 보여주고, 넘치면 말줄임표(...) 처리를 한다. 여기까지는 CSS의 -webkit-line-clamp 속성만 쓰면 3초 만에 해결된다. 하지만 요구사항이 아래와 같다면 이야기가 달라진다. "3줄 넘어가면 말줄임표 하고, 그 '바로 옆'에 더보기 텍스트 버튼을 넣어주세요. 버튼 누르면 펼쳐지고요." 단순히 ...으로 끝나는 게 아니라, 인터랙션이 가능한 버튼이 텍스트 흐름에 자연스럽게 붙어야 한다. '그냥 position: absolute로 띄우면 되는 거 아닌가?' 싶지만, 막상 해보면 생각보다 까다로운 문제들이 발생한다. 오늘은 이 '더보기' 버튼을 자연스럽게 넣기 위해 삽질했던..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com 개요이전 포스트 참고 ▼ [React][개발기] 우선 기초적인 것들 부터 학습(HTML, CSS)개요이전 글 참고 ▼ [React][개발기] React! 근데 React를 왜 써?개요 웹을 시작하게 된 이유 기존에 모바일로 개발하던 서비스에 배포 문제가 발생하면서 다 완성을 해도 배포에 시간이 걸리게 됐noguen.com 학습 현황과 방향 이전 포스트에 이어서 기초적인 것들(HTML, CSS, JS) 학습을 마쳤다. 완벽하게 공부한 것은 아니지만 '대략 이렇게 접근하..

깃허브 주소 ▼ GitHub - NOGUEN/dilemma_cafe_webContribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.github.com 개요이전 글 참고 ▼ [React][개발기] React! 근데 React를 왜 써?개요 웹을 시작하게 된 이유 기존에 모바일로 개발하던 서비스에 배포 문제가 발생하면서 다 완성을 해도 배포에 시간이 걸리게 됐다. 그래서 그 동안에 배포가 빠르고 모바일 웹, 혹은 데스크noguen.com 본격적으로 앱으로 만들어져있던 기본 서비스를 웹 버전으로 만들려고 했으나, 문제가 있었으니... 바로 필자가 웹 개발을 한 번도 안해봤다는 것이다. 이전 글은 웹 개발을 공부하기 위한..