트와이스 로고 배경화면 제작하기
트와이스 로고 배경화면 제작하기

간단하게 캡처를 통해 트와이스 로고와 공식 색이 들어간 배경화면을 만들 수 있는 스크립트입니다. 심플한 배경화면의 제작이 가능하고, 본인의 취향껏 커스터마이징도 가능합니다. https://marshall-ku.github.io/twice-logo-background/ 페이지를 들어가시면 기본적으로 보실 수 있는 화면입니다. 화면 아무 데나 클릭하시면 전체 화면으로 전환되고, 캡처하시면 바탕화면으로 사용하실 수 있습니다. 데스크탑에선 마우스 우클릭, 모바일에선 화면을 꾹 누르면 이런 메뉴가 나옵니다. Color엔 변경하고 싶은 로고의 색상을 rgb 혹은 rgba 형식으로 입력합니다. ex)150,150,150 Width엔 변경하고 싶은 로고의 너비를 입력합니다. ex)150 Gradient 버튼을 클릭하면..

노트북에 우분투 설치
노트북에 우분투 설치

예전부터 가끔 스팀 카드 파밍용으로만 쓰다가 이번에 우분투를 설치했습니다.화면이 작아서 쳐다보면 눈알 빠질 것 같네요.예전엔 어떻게 저거로 게임도 하고 그랬는지... 설치를 끝낸 모습입니다.우분투 홈페이지에서 18.04.2 버전을 내려받아서 부팅 usb를 만들어 설치했습니다. // 기본 브라우저가 파이어폭스라는 건 축복이나 다름없습니다. 썩을 ie... 파이어폭스가 예전 버전인 것 같아 그냥 모조리 업데이트했습니다. sudo apt-get update 업데이트하고 나니 별 이유는 없이 일단 제 블로그부터 들어가고 싶더군요 ㅋㅋㅋ 일단 크롬도 설치했습니다. sudo apt-get install libxss1 libgconf2-4 libappindicator1 libindicator7 wget https:/..

[JS] 스크롤 인디케이터 만들기
[JS] 스크롤 인디케이터 만들기

사용자가 글을 얼마나 읽었는지 표시해주는 막대를 화면에 첨부하는 방법입니다. 물론 옆에 있는 스크롤 바로도 알 수 있는 정보지만, 디자인도 훨씬 간단하게 수정이 가능할뿐더러, 이 페이지처럼 글에도 Infinite-scroll을 적용했다면 더더욱 필요한 기능입니다. 완성본 See the Pen Scroll Indicator by Marshall (@marshall-ku) on CodePen. HTML CSS#scroll_container { position: absolute; top: 0; left: 0; width: 100%; height: 3px} #scroll { width: 100%; height: 3px; background: #000} Vanilla JSfunction si() { var a =..

[JS] 댓글에 이미지, 비디오, 유튜브 등 첨부하기
[JS] 댓글에 이미지, 비디오, 유튜브 등 첨부하기

내용 자체는 앞서 한 포스트에서 크게 바뀌지 않았습니다만, 조금 더 알아보고 수정하기 쉽게 재작업했습니다. 텍스트 내에서 url을 찾고, 그 url이 이미지인지, 비디오인지, 오디오인지, 유튜브 비디오인지 판별해서 적절한 태그로 감싸줍니다. 간단하게 댓글에 이미지 비디오 등을 넣고 싶으실 때 사용하시면 됩니다. function autowrap() { var c = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, // 링크 찾기 i = /\.(?:jpe?g(:large)?|gif|png(:large)?|svg)$/i, // 이미지 x = /(?:\?original)$/i, // 티스토리 ?original 이미지 j..

React 앱 깃허브에 올리기
React 앱 깃허브에 올리기

git을 이용해 깃허브에 리액트 앱을 올리는 방법입니다. 저도 삽질하며 찾아간 거라, 좀 정리하고자 글을 작성합니다. 먼저 해당 디렉토리에 git을 추가합니다. 터미널에서 git init을 입력하거나, 에디터에서 해당 디렉토리에 레퍼지스토리 생성 등을 누르시면 됩니다. create-react-app으로 리액트 앱을 만들면, 리액트에 대한 설명이 줄줄 들어 있습니다. 깃허브에 올려야 하는 내용은 아니니, README.md를 적절히 수정합니다. 다음, 터미널에 git add . git commit -m "commit message" 두 개를 입력합니다. 레퍼지토리를 생성할 때, 빨간 동그라미 안에 체크를 해제하고 생성하면, 아래 사진과 같은 화면이 나옵니다. ...or push an existing repo..

[React.JS] 공부 시작
[React.JS] 공부 시작

jQuery랑 바닐라 자바스크립트는 이제 어느 정도 한다고 생각해서, 새로운 라이브러리 공부를 시작했습니다.리액트, 앵귤러, 뷰 셋을 놓고 고민만 한참 하다가, 결국 리액트를 골랐습니다. 하다 못해 html 조차도 처음 시작할 땐 막막했으니 당연한 말이겠지만, 처음 시작하니 막막할 따름입니다.ㅋㅋㅋ 설치 자체는 복잡한 편은 아니지만, 바닐라 js는 당연히 아무것도 준비하지 않아도 되고, jQuery는 cdn으로 jQuery 스크립트 하나만 가져와 주면 끝이란 것에 비하면 복잡한 편입니다. create-react-app appname 으로 리액트 앱을 만들고, 좀 기다리면 성공했다고 알려줍니다.그 후, yarn appname 으로 해당 앱을 실행합니다. 그러면 로컬 호스트에서 해당 앱이 실행됩니다. /*g..

유튜브 비디오 고정 스크립트 업데이트 및 주절거림
유튜브 비디오 고정 스크립트 업데이트 및 주절거림

티스토리 글, 깃허브, 코드펜 모두 업데이트했습니다. 별다른 기능을 추가하진 않았고, 바닐라 스크립트를 이용해 다시 제작했습니다.제 컴퓨터에 깔린 IE(ver : 11.648.17174.0)에선 동작하지 않으니, IE 지원을 원하시면 깃허브에 vanilla란 단어가 들어가지 않은 js 파일을 사용하시면 됩니다. 여담으로, 제 블로그에 사용 중인 스크립트도 모조리 바닐라 js로 업데이트를 해보는 중입니다. 간단한 $("#elem").parents("#parents") 조차도1234function parents(el, cls) { for (;(el = el.parentElement) && !el.classList.contains(cls);); return el}Colored by Color Scripterc..

[JS, CSS] 스크롤 밖으로 나가면 비디오 고정하기
[JS, CSS] 스크롤 밖으로 나가면 비디오 고정하기

스크롤을 내려보세요! 비디오가 화면에 보이지 않으면, 좌측 하단에 position:fixed인 상태로 고정해줍니다. HTML에 첨부(embed)하는 비디오에 사용할 수 있는 스크립트입니다. 유튜브, 네이버 TV, 카카오 TV 등 꽤 많은 비디오 공유 사이트에서 퍼온 비디오에 정상적으로 작동합니다. Iframe을 반응형으로 감싸는 스크립트(링크)가 있어야 작동합니다. Github Codepen 깃허브와 코드펜 모두 Iframe을 반응형으로 감싸는 스크립트와 함께 들어있습니다. 참고하셔서 잘 적용해주세요. 비디오가 하나뿐일 때만 작동하는 스크립트입니다. 이 스크립트가 작동하지 않았으면 하는 페이지엔 을 넣으시면 스크립트가 작동하지 않습니다. See the Pen Sticky Youtube Video by M..

[JS] 간단한 계산기 만들기
[JS] 간단한 계산기 만들기

아는 동생한테 html, css 적당히 가르쳐주고 이제 javascript 차롄데...jQuery 배우니 바로 계산기부터 만든다더라고요. C를 배워서 그런가... 당연히 하루 배워서 계산기 만들기는 무리였고..제가 짜봤습니다. See the Pen Simple Calculator by Marshall (@marshall-ku) on CodePen. 간단한 작동만 테스트한 거라, 모든 상황에서 잘 작동할진 모르겠습니다. 아래는 바닐라 스크립트로 짠 스크립트입니다. 귀찮아서 버튼에 애니메이션 주는 건 생략했습니다.12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596..

스킨/스킨 목록
잡담
갤러리