클로리셔 작은 공간

어느날 운영하는 홈페이지에 매달 판매 이력정보를 업데이트하는 아카이빙 페이지를 제작했다. 이 페이지는 어떤 기준의 데이터로 분기처리가 되는 방식인데.. 매월 그 달에 맞는 데이터를 불러와서 페이지에 담기도록 작업을 진행하게 되었다. 퍼블 작업 후에 다른 회사 프론트로 앞단 영역을 넘겼는데 나중에 데이터를 확인해보니 매달 달라지는 데이터를 복잡하게 만들어서 업데이트 할때마다 번거로움의 이슈가 발생... 이건 유지보수적으로 개노답이라는걸 파악하게 됨... [노답 데이터 리스트] 아니 매달 변경되는 정보를 넣어야 하는데 이렇게 복잡하게 적용한다는게 말도 안된다고 생각했다. 2-3달은 그렇다 치지만.. 이 페이지가 1년 운영할지 10년 운영할지 모르는데 그때마다 저렇게 하나씩 삼항연산자로 늘어간다니... 이건 ..

작업을 하다보면 push한 commit을 되돌려야하는 상황이 온다. 그럴때마다 매번 어떻게 했는지 기억이 안나서 빡쳐서 메모해두기로.. Reset 사용하여 깃 커밋 되돌리기!!! 1. commit 리스트 확인 우선 commit 리스트 확인은 git log 2. commit 취소하기 가장 최근 커밋(commit)한것을 취소하고 싶을땐 git reset HEAD^ 여러개의 커밋을 취소하고 싶을땐? git reset HEAD~n * n에는 개수만큼 입력하면 된다. 2개 = git reset HEAD~2 3개 = git reset HEAD~3 reset 옵션 명령 설명 --soft HEAD^ - 커밋취소 - 커밋 취소된 파일 스테이징에 복구 - 파일 수정사항 유지 --mixed HEAD^ (기본옵션) 최근 커밋..

input type="checkbox" 체크박스 체크여부로 인한 JS 제작 작업중에 checkbox가 체크가 안되어있을 때, 경고문 뜨도록하는 작업이 들어왔다. 간단할 줄 알았는데 생각보다 로직이 은근 꼬여서 이번 기회에 어떻게 해결했는지 메모하려고 한다. 이런것들이 다 나의 피와 살, 토양과 영양분, 커리어와 연봉이 되거라며.. 연봉 incease(가즈아 🚀)!!! [ HMTL ] 전체 Image Exel PPT Word seach [ JavaScript Version 01 ] // search input이랑 button 부분 const searchInput = document.querySelector('#searchKey'); const searchButton = document.querySelect..

회사 또래 직원들끼리 같이 스터디 하기로 했다. 스크립트 미션을 받아서 각자 코드를 짜보고 본인의 코드를 리뷰하면서 더 좋은 방법 알아가는 방식으로 하기로 했다. 첫번째 미션은 자바스크립트를 이용해서 그래프를 만들기 프로젝트!! 일주일동안(~22.02.24) 각자 작업해서 리뷰하기. 하단 이미지처럼만 짜여있는 HTML / CSS 코드를 이용해서, 순수 바닐라 자바스크립트로 하단 바 그래프처럼 표현하기이다. 1) 각 항목에 있는 숫자만큼 바 그래프가 표시되어야한다. 2) 평점 계산, 기준 라인(0, 5, 10, 15…) 표현되어야 한다. 3) 재활용 가능하게 만들어야 한다. 4) 이미지 사용 안된다. - 최대한 HTML을 안건들면서 JS를 이용해 DOM을 조작하..

문장이 길어질 경우 '...' 표시가 되도록 설정하는 방법에 대해 정리한다. CSS를 이용해서 많이 사용하는데 간혹 스크립트를 써야할때 있어서 이왕 정리할때 다 정리하려고 한다. 1. CSS - 1줄 말줄임표 설정하기 p{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - 2줄 말줄임표 설정하기 p{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; word-wrap: break-word; } See the Pen make Ellipsis using CS..

웹사이트 작업 중 부연설명이 필요한 부분으로 툴팁(tooltip)을 많이 사용한다. 예를 들면 웹페이지에서 단어위에 마우스를 올렸을 때 용어에 대한 부연 설명이 말풍선처럼 나타나는 효과이다. 일반적으로 HTML만 이용해서 툴팁 적용하는 방법은 간단하다. 1. 기본 HTML을 이용한 툴팁 만들기 프론트 개발자를 위한 웹 언어에는 2가지가 있습니다. HTML 은 웹페이지에 내용을 기술하고 뼈대라고 생각하면 됩니다. 이렇게하면 브라우저에 맞는 툴팁이 타나난다. 2. CSS를 이용해서 예쁜 툴팁 만들기 이런 방법 말고 툴팁을 예쁘게 CSS를 이용해서 꾸미는 방법도 알아보자. 프론트 개발자를 위한 웹 언어에는 2가지가 있습니다. HTMLHyperText Markup Language..

Click 얼마나 진행했는지 또는 본인의 스킬, 성장 등 어느정도인지 나타낼 수 있는 효과라고 생각한다. See the Pen LYpVYQN by chloe Kim (@chlolisher) on CodePen.

홈페이지에 공지사항이나 이벤트들을 특정 기간동안 안내해줘야 하는 경우가 있다. 그럴때 레이어 팝업이나 팝업창으로 내용을 띄워주는데 이 팝업들을 특정 기간동안 띄우거나 '더 이상 보지않기' / '일주일간 보지않기' 등 기능을 적용해보려고 한다. 팝업창 / 모달창 차이가 뭐지? [IT 용어정리] 팝업창 VS 모달창, 차이점은 뭘까? 팝업창 작업을 하다보니 비슷한 용어가 너무 많다 ㅠㅠ.. 팝업창 / 모달창 / 레이어팝업 / 윈도우팝업 등등... 웹은 어떤 상황에만 보여지는 공간이 존재하는데 이때 사용하는 것이 팝업창과 모 chlolisher.tistory.com 작업 순서는 1) 레이어 팝업의 레이아웃을 HTML로 구성을 짠다. 2) CSS로 팝업창 디자인을 만든다. 3) js에 '더 이상 보지않기' 쿠키 ..

1. display: table 이용한 리스트 메뉴/아이콘 만들기 오늘은 display: table 속성에 대해 알아보자고 한다. 위에 이미지에 표시 된 분홍색 사각형 박스처럼 동일한 넓이와 간격을 가지고 있는 컨텐츠를 작업할때 사용할 수 있는 display: table 속성! 예전에는 float을 사용해서 width 값을 통해 간격을 맞추면서 작업을하거나 display: inline-block을 이용해서 가로 정렬로 작업을 해왔다. 그런데 컨텐츠의 갯수라는것이 고정적으로 정해질수도 있지만, 유동적으로 변할 수 있기때문에 갯수에 맞추느라 width 값 조절하다보면 CSS 코드는 길고 지저분하게 될 수 있다. 이럴때 고민을 없애 버릴 수 있는 방법이 바로 display: table / display: ta..