여러분. 세계 3대 고민은 거창한 게 아닙니다. 오늘 뭐입지 오늘 뭐먹지 오늘 뭐하지예요. 거창한거 없습니다. 회사에서 제일 중요한 안건? 물론 회의 안건도 있겠지만 가장 중요한거 뭐임? 오늘 뭐먹지예요. 짜장이랑 짬뽕은 걍 짬짜면 드시고 탕수육은 찍먹들거 좀 덜고 부먹해주시면 중용을 지킬 수 있지만(아니면 사는 사람 마음대로...) 점심 메뉴? 이거 어려워... 고르는거 진짜 밀레니엄문제 못지 않은 난제임...랜덤 점메추const randomBtn = document.querySelector('#button1'); // 랜덤랜덤 (여기 있는 리스트들 중)const randomLunch = document.querySelector('#jeommechu1'); // 랜덤 표시구역const ourBtn = ..
https://koreanraichu.tistory.com/718 텍스트 에디터에 뭔가 추가해보자https://koreanraichu.tistory.com/711 아주 간단한 텍스트 에디터를 만들어보자카테고리를 보시면 아시겠지만, 자바스크립트로 할 거다. 근데 일단 구현할 기능이 쓴 걸 저장하는 것 말고 없음… ㅋㅋㅋkoreanraichu.tistory.com글꼴 변경하고 색깔 바꾸고 뭐 이런것밖에 없을거라고 생각했던 시절이 나에게도 있었음...글꼴 변경기존 글꼴에서 이야기 굵은체와 온글잎 콘콘을 들어내고(그래서 기본글꼴이 프리텐다드임) 서궁, 탕바, 문막초 별반체를 추가함. 사실 추가하고 싶은 글꼴이 따로 있는데 눈누에 임포트가 안올라옵니다… 내용 삭제 버튼 추가다운로드 버튼 바로 왼쪽에 있는 게 내용..
아 EDA 할 생각 없냐고요? 맥북 반납해서 EDA를 못합니다... 리눅스 노트북은 데이터 분석 돌리면 뻗어서 평일에 글쓸때나 자바스크립트 할 때 말고 켜본적 없음...그새 글꼴이 많이 바뀌긴 했는데... 그래서 이 달력에 뭔 기능을 추가할거임? 바로 오늘 날짜로 되돌아가는 기능과 몇년 몇월로 이동하는 기능이다. 전자는 뭔지 알겠는데 후자는 뭐임? 여러분 이 달력에서 1991년 3월로 어떻게 가는지 아십니까? 1991년 3월 될때까지 이전달을 급나 눌러야됩니다. 일단 햇수로만 36년인데 1년이 12개월이니까 대충 클릭질 몇 번 해야 하는지 견적이 나오시죠?오늘 날짜로 돌아가는 버튼let goTodayButton = document.querySelector('#gotoday');이게 HTML 구조는 간단한..
내가 이걸 또 하게 되다니… 싶었는데 쓰다가 또 불편한 게 나와서 에미나이 도움 받아서 기능을 추가했다.이거 보여요? 기존에는 없었던 저 HEX 코드들. 이게 중간색을 쓰고 싶은데 #rrggbb 코드가 없으니까 내가 개발자도구 열고 들어가서 변환을 해야되는데 이게 증말 번거롭습니다… 그리고 나야 개발자도구의 존재를 안다지만 모든 사람들이 그렇진 않잖아요? for (let i = 0; i c.toString(16).padStart(2, '0'); const hexCode = `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase(); const chip = document.createElement('div'); chip.classList.add('palet..
어제 그 뼈대 올라왔잖아요? 그러고나서 밤에 잡아서 내용 다 채웠음. 농담같죠? 진짜임.어바웃 페이지뭘 많이 가렸죠? 다 개인정보라 어쩔 수 없음.. 그럼 논문하고 자격증은 왜 안 가렸냐… 논문은 이미 저널에 실린거고 자격증도 내가 땄다고 올렸잖아요. 쟤들은 이미 한번 깐거라 안 가린거임. 원래 생각했던 구성에는 저 카드가 없었습니다. 없었는데 제미나이가 "씁 근데 이거 이렇게만 보면 좀 심심하지 않을까요?라고 하면서 제안한겁니다. 저 선이랑 배경도 지금 조정중인데 선이 굵다고 이쁜건 아니고... 없애봤는데 이것도 아 씁 아닌 것 같고... 그림자는 그래도 배경이나 안이나 톤이 다 연해서 있는 게 나은 것 같긴 하고... 애매함. 그냥 애매함./* 개별 오브젝트를 감싸는 카드*/.card { wid..
내용이요? 이제 생각해야지.여기까지 해서 뼈대가 잡혔고 탭 메뉴도 잘 돌아간다. 그럼 이제 내용물만 채우면 됩니다… 1. 저 언더 컨스트럭션 란에는 내 이름과 한줄 설명이 들어갈 예정이다. 그래서 일부러 넓게 안 잡았다. 꽉 차보여도 저 분량이 차지하는 건 가로 75%정도… (모바일은 미뎌쿼리 줘서 95%)2. About에는 본인 약력, 자격증이 들어가고 skills는 뭐 할 수 있냐고 project에 개인적으로 했던 모든 프로젝트들이 들어갈 예정이다.3. About 단을 하나로 할지 두개로 할 지 생각중임... 한쪽은 넓게 잡아서 내 소개 하고(아직 데이터쪽 약력이 없음...) 한쪽에 좀 좁게 잡아서 자격증이랑 외부 활동 내역같은 거 쓸까...4. Project에 아코디언 패널 들어갑니다. 아코디언 패..
이게 뭐냐고요? 포폴을 웹으로 만들어서 서버에 올리자는 진심 얼탱이없는 작업에 들어갈 예정입니다. 근데 지금 팀플때문에 바빠서 구조 구상하고 색깔만 짜놨음. 대충 그렸음 대충... 1. 내 이름이랑 전번 이메일 깃헙 블로그(티스토리) 링크가 헤더에 들어가고(이부분도 고민 좀 해봐야됨...)2. 그 밑에 내 이력이랑 스킬(뭐뭐 쓸 수 있나) 프로젝트가 들어가는데 이게 탭메뉴입니다. 그니까 얘를 탭하면 전환이 돼야 하는데 이걸 자바스크립트로 해야 하고…3. 프로젝트에는 내 포폴에도 올라가는 프로젝트 세 개가 올라가는데 그거에 대한 설명을 개별 프로젝트로 아코디언 메뉴로 하고 PDF파일을 거기다가 올리든가 할겁니다. 링크 관련해서는 이걸 폰트어썸 아이콘만 넣을지(7.x로 올렸더만…) 이름을 병기할지정도 고민중..
https://koreanraichu.tistory.com/853 씨본 컬러 파레트 씨뮬레이터그 Seaborn에서 컬러 커마 가능한거 아시죠? 근데 이게 뭔 색인지 뭔 파레트가 어떻게 나오는지 모르잖아요. ㅇㅋ? ㅇㅇㅋ. 그래서 색 두 개를 입력받은 다음 한 10칸정도로 띄엄띄엄 칠한거 하나, ckoreanraichu.tistory.com이거 함 써보고 고칠점 찾음…입력하는 색상 앞에 #가 들어가면 #을 빼주기이게 왜 필요함? 하실 수도 있는데 컬러 파레트 만드는데서 복사할때 앞에 #이 붙는 경우가 있고, 아닌 경우가 있습니다. 근데 #이 붙으면 안됐거든요? 이러면 사용자 입장에서는 아니 내가 이거 하나 쓰자고 #을 지워야됨??? 이 되는거죠. 뭔지 아시겠죠? const color1 = first_col..
그 Seaborn에서 컬러 커마 가능한거 아시죠? 근데 이게 뭔 색인지 뭔 파레트가 어떻게 나오는지 모르잖아요. ㅇㅋ? ㅇㅇㅋ. 그래서 색 두 개를 입력받은 다음 한 10칸정도로 띄엄띄엄 칠한거 하나, cmap(이어지는거)으로 하나 짜잔 하고 보여주자 이거다. 이거 근데 팀플에서도 써먹으려면 코드펜에도 올려야 할 듯. Seaborn palette simulator 그... 저기 인풋창에 색깔 두개 입력하시면 파레트랑 cmap이랑 보여줄거긴 합니다. 근데... 아... 세개 이상... 그거는 제 능력 밖이니까 걍 두개씩 돌려보세요... 이봐요 ..
요즘은 핸드폰으로 본인인증 많이 하는데, 그 인증창 보면 딸랑 이름 입력하는 란만 보인다. 그리고 이름을 입력하면 주민번호 입력란이, 주민번호 입력란을 다 채우면, 핸드폰 번호 입력란, 그리고 보안문자 입력란(이건 대충 사람입니다 체크하는거라고 보시면 될듯) 다음에 인증번호 입력란이 순차적으로 뜬다. 그러니까 이게 처음부터 떠있는 게 아니라 어떤 조건을 만족하면 뜬다 이거다. 뭐함? 이거 해볼거니까 빨리 에디터 켜요.입력창 세 개와 버튼 하나가 보인다. 그리고 여기서 어떻게 할 거냐면 1. 이름을 입력하면 생년월일 입력창이 보이고2. 생년월일 입력창을 다 채우면 연락처 입력하는 창이 보이고3. 연락처를 입력하면 확인버튼이 보이는 걸 해 볼거다. #no2 { display: none;}#no3 { di..
여기서 만들 건 나우 로딩하면 나오는 프로그레스 바가 아니라, 스크롤 프로그레스 바다. 티스토리 블로그 중에 가끔 글을 읽을 때 화면 상단에 무슨 막대기같은 게 자라는 게 있는데, 그걸 해 볼거다.Referencehttps://doooodle932.tistory.com/177 [JS] 스크롤 프로그레스 바 만들기완성본 HTML CSS body { margin: 0; padding: 0; height: 1000px; /* 스크롤을 위해 임시로 추가 */ } .progressWrap { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-color: #fff; } .bar { width: 0%; height: inherit; posi..
https://koreanraichu.tistory.com/718 텍스트 에디터에 뭔가 추가해보자https://koreanraichu.tistory.com/711 아주 간단한 텍스트 에디터를 만들어보자카테고리를 보시면 아시겠지만, 자바스크립트로 할 거다. 근데 일단 구현할 기능이 쓴 걸 저장하는 것 말고 없음… ㅋㅋㅋkoreanraichu.tistory.com여기서 이어진다. 텍스트 에디터를 만들면서 처음에 얘기했던 '텍스트 파일을 불러오면 제목에 파일명, 이름에 내용을 띄우는'걸 해 보자. 이건 일단 input이랑 FileReader API가 필요하다고 한다.저기 셀렉트박스 오른쪽에 보면 버튼 하나가 있다. 저건 사실 인풋 파일+라벨 붙여놓고 라벨에 CSS 준 거임. 아무튼 그럼. const fileO..