전체 글 (36) 썸네일형 리스트형 [엘리스 SW 엔지니어 트랙 3기] 첫 수업, 시작 엘리스 트랙 Start 엘리스 트랙이 시작되는 날이다. 프론트엔드 코스로 첫 시간은 역시 HTML과 CSS 관련한 기초를 배웠다. 조금 안다고 생각하고 있었고 실제로도 처음 배우기에 쉬운 언어라서 긴장 따위는 없었다. 하지만 기초를 튼튼하게 다지기 위해 마음먹고 시작한 만큼 주의를 집중하려고 노력했다. 어? 그런데 처음 알게 되는 기본적인 내용들이 정말 많았다. 5가지 정도의 개념들이 있었는데 수업 자료를 공유할 수 없으니 따로 정리할 계획이다. 아무래도 흡수한 내용들을 정리하기엔 이 블로그보다는 계층 구조식으로 문서를 만들 수 있는 Notion을 활용하는 게 더 좋아 보인다. 생각보다 분량이 많다. 처음 강의를 들은 소감이다. 7시간을 체류하며 엘리스 플랫폼에서 강의를 들어야 하는데, 기초적인 내용인 .. [React] div 스크롤 맨 밑으로 내리기 / 스크롤 위치 조작하기 - useRef 실시간 채팅창을 구현하다가 마주한 문제였다. 따로 설정을 해두지 않으면 채팅방을 처음 열었을 때 스크롤이 맨 위에서부터 시작되어 최근 메세지를 보려면 직접 사용자가 스크롤을 내려야했다. 물론 이렇게 구현할 수 없으니 리액트에서 스크롤을 어떻게 조작 할 수 있을까? 우선 JavaScript를 기준으로 생각해보면 컨트롤 하고 싶은 영역의 id나 class로 div를 선택해야한다. 그리고 선택한 요소의 스크롤 위치를 제어할 수 있어야하며, 이 과정들은 유저가 채팅방을 오픈했을 때 한번만 실행되도록 해야한다. 이렇게 3가지를 리액트 환경에서 하나씩 해결해보자. 1. useRef로 DOM 선택하기 / target 설정 우선 스크롤을 조작하고 싶은 DOM을 강제로 가져와야한다. 즉 Real DOM을 직접 선택해야하.. [HTML/CSS] 마우스 드래그 방지 - 모든 브라우저 호환 게임 듀오 매칭 관련 프로젝트 중 포지션 선택 아이콘을 만들었다. 그런데 다음 사진처럼 아이콘이 드래그가 되어 보기 좋지 않다고 생각하여 드래그를 방지하는 방법을 찾아보았다. 결론은 간단한 CSS로 설정이 가능하다. 적용 전 드래그 방지는 한번씩 사용할 일이 있을것 같아서 정리해두려고 한다. .drag-prevent{ -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; } 적용 후 드래그 방지 코드를 적용 한 모습이다. 드래그가 되지 않고 디자인 해놓은대로 체크박스 체크 및 호버링이 잘 된다. 편안하다. 위와 같이 따로 ".drag-pr.. 이전 1 ··· 6 7 8 9 10 11 12 다음
