개발자 도담씨

회사에서 로딩화면 애니메이션으로 텍스트에 차오르는 느낌을 줄 수 있냐기에 알겠다하고 구현한 애니메이션... 물결로 하려니 조콤 힘들었다 😭 방법이 두가지가 있었는데 1. 물결 배경을 넣어 배경을 움직이는 방법 2. clip path를 이용한 방법 이중에서 나는 1번 방법을 택했다. 이유는 1번, 2번 다 해봤는데 2번을 이용해 차오르는 느낌을 주려니 중간에 애니메이션이 끊어지는 느낌이 강해서 택하지 않았다. 아래 참고한 영상을 첨부할테니 2번 방법을 해보시고 싶으신 분은 한번 도전해 보시길 :) [ HTML ] 크게 복잡할 것 없다. 아래부분이 끝! EXAMPLE [ CSS ] body { margin: 0; padding: 0; } .loader { position:fixed; top: 50%; lef..

오늘 또 새로운 정보를 알았다! (흥분) 회사의 다른 부서에서 사용중인 페이지가 너무 기니까 랙을 먹어 불편하다고 말이 나와 고민중에 옆 선배한테 물으니 CSS 가속화 작업을 한번 해보라고 하셨다! CSS 가속화요...?😬 문제된 페이지는 sortable을 많이 사용한 페이지였다. 그렇다 보니 Reflow와 Repaint 작업이 많이 발생 할 수 밖에 없었다😫 Reflow와 Repaint를 모르고 계시다면 CSS랜더링에 관한 정보를 참고하시면 된다 :) 나는 위치가 이동될 수 있다고 미리 알려주는 css속성인 will-change를 걸어주었다. will-change:top, left; 다른 필요 지식이 더 있지만 아래의 참고 블로그에 너무 잘 정리해주셔서 기타 필요한 상세 내용은 적지 않겠다. 꼭 참고 ..

1탄 - [ Node.js / Webpack ] 이번엔 웹팩 🤜 참고 문서 - https://webpack.js.org/guides/asset-management/ 저번주에 이어 두번째 섹션을 진행해보려한다. 공부하기 싫은데 남자친구한테 끌려 왔다. 두번째는 자산 관리라고 표현되어 있다. 저번엔 javascript만 관리를 했다면 이번엔 이미지와 css와 같은 파일들도 관리를 해보자는 의미인 듯 하다. 저번에 작성했던 index.html 을 다음과 같이 변경한 후 시작해보자. main.js가 아닌 bundle.js를 불러온다고 해놨으니 webpack의 설정도 main.js가 아닌 bundle.js를 생성하도록 변경해주어야 할 것이다. ( webpack.config.js ) const path = requ..

수직 정렬 방법에 대한 메모용 포스팅 :) 다국어 페이지를 하다보니 한국어는 짧다가도 외국어가 너무 길어 짜증나는 일들이 빈번히 생긴다...(수직정렬해줘야해..) 옆의 같은 프론트엔드 개발자분도 저의 빡침이 느껴지시나며ㅋㅋ... 쨌든 수직정렬방법 정리는 아래의 3가지로 정리해놓겠다🥰 1. position과 transfrom사용 top을 50%로 주어 부모의 높이의 반만큼 내린 후에, translate을 사용하여 해당 요소의 반의 높이를 빼주어 수직 정렬한 방법입니다. 해당 방법의 단점을 하나의 예로 들자면, li태그안에 a태그를 넣었을 경우 a태그가 li태그의 전체 영역을 자치하게 하고싶은데 불가능 하다는 것입니다. ( 따라서 nav할때는 개인적으로 잘 사용하지 않는 방법 ) 수직 정렬:D 2. flex..

카페24 모바일 쇼핑몰 제작 인스타그램 그래프 API 연동 ( 완료 : 검수 난이도 실화..ㅠ ) 메일발송 관련 관리자 페이지 - 프론트엔트 웹사이트 관리자 페이지 리뉴얼 - 프론트엔드 웹사이트 병원소개 페이지의 관리자 페이지 제작 - 풀스택 웹사이트 관리자 페이지 유지보수 예약통계, 상담통계 내기 ( 그래프 관련 자바스크립트 사용 ) - 풀스택 베트남 웹 사이트 및 관리자페이지 제작 - 프론트엔드 ( 기존의 사이트 복사후 변형 ), 다국어 지원 슬라이드 팝업 ( 관리자/사용자 ) 추가 선택된 이벤트 리스트를 불러와 캔버스 저장 ( 페이지 추가, 그룹 추가 예외처리 스크립트의 난이도가 어려웠음 ) 캔버스 url생성후 백단에서 zip파일 생성및 다운 병원고객관리 페이지 유지보수 및 추가 개발

요즘 시간이 남아 드디어 블로그나 꾸며볼까 하면서 조금씩 수정 중이다. 디자이너가 아니라 디자인 감각은 떨어질 수 있겠지만 나름 만족 중이다!😊 (아직 미완성) 음... 프런트엔드 쪽을 하다 보니 나의 경우는 쉽게 만질 수 있지만 분명 이런 쪽을 하지 않으시는 분들이라면 어려우실 거라 생각한다 :_(... 조금이나마 도움이 되었으면 하면서 그냥 간단한 방법 정도 설명하려 한다. ps. 해당 글을 바꾸고자 하는 친구를 쉽게 찾는 방법 위주로 포스팅할 예정이다 :D 우선 가장 마음에 드는 스킨을 적용시켜놓은 후 찾는 게 편하다. 초보자 분들은 마음대로 디자인하기 쉽지 않을 테니 아래 링크에서 스킨 하나를 적용시켜준다. 디자인이 다들 반응형에 적합하게 잘 만든 것 같다 https://www.tistory.co..

이 블로그는 내가 공부한것들을 까먹지 않도록 포스팅하는 용도라 간단한 부분들은 슝하고 지나가겠다😅 1. SASS의 변수는 $로 정의한다. 2. 중첩 ( 아래 코드로 설명 끝ㅎㅎ.. ) 아래의 코드처럼 작성후 컴파일 하면 nav{} nav ul{} 처럼 css파일이 작성된다. header { background-color: $header-back; display:block; height:100px; nav { ul { list-style:none; float:right; li{ display: inline-block; a { display: block; padding: 5px 3px; margin:10px 20px; } } } } } 3. 부분화 및 불러오기 설명을 보니 내가 느낀바로는 전역변수를 별도의 ..

원래 웹 하나를 혼자 만들겠다는 목표를 가지고 풀스택을 공부하다가. 요즘 프론트앤드에 조금 더 흥미가 가기 시작했다. 물론 저 목표는 유효하나 프론트 앤드쪽을 깊게 파보고 싶은 마음에 알아보다가 SASS는 필수라기에 공부를 시작해본다 :) 인터넷에 충분히 잘 설명되어있지만 이상하게도 나는... 인터넷 강의든 글이든..(물론 개발할땐 참고하지만) 공부가 불가능하니 또 책을 주문했다😂 우선 SASS는 컴파일러 없이 사용할 수 없기때문에 컴파일 과정을 거쳐야한다. SASS의 설치는 간단하다. SASS를 PC에 설치 하는 방법은 '어플리케이션 방식'과 커맨드라인'방식이 있다. 커맨드 라인방식은 직접해보진 않았지만 메모는 해놓겠다. @커맨드 라인 방식 1. 맥과 리눅스를 루비라는 프로그래밍 언어가 설치가 되어 있..

제목을 정하기 너무 힘든 포스팅이었습니다..오늘 하려는 포스팅은 단계 디자인을 퍼블리싱 해보려고합니다. 그림으로 설명하자면 출처 : 쏘카 사이트 이러한 단계를 나타내는 디자인입니다. 배워보니 이것도 하는 방법이 있더라구요 ! 우선 뼈대 (html)을 먼저 만든 후에 스타일 작업으로 넘어가겠습니다.12345678910111213141516171819202122232425262728293031 쏘카 이용방법 가입하기 앱 또는 홈페이지에서 운전면허증과 결제 카드만 등록하시면 쉽고 빠르게 가입하실 수 있어요. 예약하기 출발·반납 위치를 선택하고, 원하는 시간 만큼, 지금 필요한 차종으로 예약하세요. 차량찾기 앱의 스마트키에서 대여존 주소를 확인할 수 있으며 경적, 비상 등을 이용해 차량 위치를 확인하세요. 차량..

1편 - [Web Programming/Frontand Challenge] - 웹 페이지의 랜더링 과정 1편참고 블로그 : http://12bme.tistory.com/140 1편에서 웹 페이지의 랜더링 순서를 1단계부터 5단계 까지 알아보았다. 이번 2편에서는 리플로와 리페인트에 대해 알아보겠다...레더링이 모두 완료된 상태에서 ( 페인트까지 끝낸 상태 ) 스타일이 바뀌거나새로 나타나는 노드가 있다면...? 또는 데이터 변경으로인해 ( ex. AJAX ) 다시 표시해 주어야하는 일이 생긴다면?아마 다시 스타일을 적용하고 ( 랜더 트리 작업 ) 페인트 해주어야 할 것이다.이럴 경우에 발생하는 것이 리플로와 리페인트이다. 리플로 ( Reflow )란?변경이 생긴 랜더 트리에 대해 유효성 확인을 하고 노드의..