sass 2

3차 팀 프로젝트 리팩토링 #1 (채팅 페이지 UI 변경)

프로젝트 발표 후, 리더님들께 피드백을 받았을 때두 분의 공통된 의견이채팅 목록 페이지의 모바일 UI 가 좋지 않다고 말씀하셨다. 납득이 갔던 것이 나도 UI 를 만들면서 음.. 이거 좀 이상한디? 라고 생각했기 때문이다.두 분의 의견을 받았기 때문에 해당 UI 를 고치기로 했다. 웹뷰에서는 왼쪽에는 내가 참여한 채팅방의 목록, 오른쪽에는 접속해있는 채팅방을 보여주는 것으로 구성했다.이것까지는 나쁘지 않은데 문제는 모바일 UI에서 였다. 기존 모바일 UI 에서는 채팅방 목록을 상단에 빼고, 하단에 접속중인 채팅방으로 구성했다.그리고 참여하고 있는 채팅방 목록이 가로 길이보다 길어지면 터치로 이동할 수 있게 구현했다. 사실 화면을 구현하면서도 찝찝함이 있었는데...너무너무 구리다는 것이었다!하지만 시간에 ..

[새싹x코딩온] 웹 개발자 부트캠프 과정 14주차 회고 | Sass

1. 들어가며Sass 를 이용해서 React 프로젝트 스타일링 하기2. SassSass는 css 전처리기 중 하나다.재활용성, 코드의 가독성을 높여주고 유지보수를 더 쉽게 해준다.확장자는 .scss 와 .sass 두개가 있는데, scss 는 css 와 거의 비슷한 문법으로 중괄호{} 와 세미콜론 (;)을 사용한다.그래서 이 포스팅에서는 좀 더 사용하기 쉬운 scss 문법을 이용하고자 한다.scss에 대한 자세한 문법은 이전 포스팅인 https://daddda3232.tistory.com/18 를 참고하거나  reference에 있는 https://www.heropy.dev/p/Y7OrPe 여기를 참고하길 바람 SCSS를 이용해서 간단한 스타일링 하기 이전에는 단순히 css 만 사용해서 일괄적으로 스타일링..

Study/HTML & CSS 2024.08.13