What's New

200805 블로그 제작일지
200805 블로그 제작일지
요즘 워드 프레스 정도 기능이 있는 블로그를 제작하는 게 굉장히 어렵다는 걸 새삼 느끼는 중입니다.Ghost, GatsbyJS, Jekyll 처럼 댓글 기능도 없고 그냥 정적 페이지만 만드는 거면 내일 당장에라도 하겠는데, 원하는 기능이 너무 많다 보니 영 쉽지 않네요. 물론 그렇다고 포기할 생각은 딱히 없고, 내년 연말까지 기간을 두고 넉넉하게 제작해보려 합니다.일단 작동하게 만들고 천천히 업데이트를 해나가면...
200728 About IU 제작일지
200728 About IU 제작일지
이 정도면 완성했다 싶어 배포를 시작했는데, 항상 배포를 시작하고 보면 고쳐야 할 게 눈에 보입니다.이래서 다들 알파 테스트, 베타 테스트 거치고 출시하나 봅니다. 홈 페이지 인스타그램 피드를 외부 페이지로 옮기니 홈 페이지는 정말 아무것도 볼 게 없는 페이지가 되어버렸습니다.조금이라도 단조로움을 깨보려고 뮤직비디오가 무작위로 재생되게 했습니다.우측 하단에 음소거 토글 버튼도 추가했습니다.또, 흰 글자가 잘 안 보일...
200724 About IU 제작일지
200724 About IU 제작일지
캐시 버그 수정 페이지와 직접적인 연관은 없습니다만, html, css, js 등 모든 파일을 캐싱 처리해둬서 최신 버전의 페이지를 보실 수 없을 수도 있습니다.새로 고침 후에도 새롭게 제작된 항목이 보이지 않으신다면 캐시를 비우고 재접속해주세요.이렇게 초보적인 실수를 또 하다니…죄송합니다. 😥 한 번만 비우시면 다음부턴 업데이트가 진행돼도 캐시를 비우실 필요는 없습니다. 유튜브 페이지 생성 최근 유튜브에 올라온 동영상을...
About IU
About IU
Github : https://github.com/marshall-ku/About-IULive : https://marshall-ku.com/IU/ 소개 React.js와 친해지기 프로젝트 일환으로, 앞서 html, css, javascript로 제작한 트와이스 팬 페이지의 디자인을 기반으로 React로 아이유 팬 페이지를 제작했습니다.팬 페이지 만들 대상을 고민하다, 로고를 중심으로 Home, About / Discography, Filmography로 두 개씩 대칭을 맞출 수 있는 아이유를 선택했습니다. 앨범 데이터 JSON으로 작업하면서 양이 워낙 많아 괜히 했나 생각도 잠깐...
200719 블로그 제작일지 및 앞으로 나아갈 방향
200719 블로그 제작일지 및 앞으로 나아갈 방향
움짤 첨부 시 mp4로 변환 ffmpeg를 활용해 gif 이미지를 올리시면 mp4로 전환되게 해뒀습니다.예전부터 gif는 낡고 비효율적인 파일이라고 주장해왔는데, 정작 제 웹사이트에선 gif 파일을 첨부하면 gif 그대로 사용하던 아이러니한 일이 이젠 벌어지지 않습니다. ffmpeg를 처음 활용해봐서 처음엔 모바일에서 비디오가 재생 안 되는 문제가 있었습니다만, 이젠 Chrome(android + macOS + windows), Firefox(windows), Safari(iOS, macOS), Internet Explorer 등의...
[워드프레스] 한글이 없는 댓글 자동으로 삭제하기
[워드프레스] 한글이 없는 댓글 자동으로 삭제하기
워드프레스 블로그를 운영하다 보면 하루에 10개가 넘게도 쌓이는 스팸 댓글 때문에 골머리를 앓는 게 한두 번이 아닙니다.블랙리스트를 사용해 특정 단어들만 차단해둬도 9할은 차단하긴 합니다만, 가끔 괴상한 내용으로 블랙리스트를 피하는 댓글이 있습니다. Akismet 등의 스팸 차단 플러그인도 괜찮은 선택지일 수 있겠지만, 한글로 블로그를 운영하면 굳이 무거운 플러그인 붙여다 스팸을 차단할 필요가 있나 싶습니다.글 작성자도 한글을 쓰니,...
200708 호텔델루나 전시회
200708 호텔델루나 전시회
한 달 만에 다시 가서 사진 왕창 찍고 돌아왔습니다. 😁
200706 블로그 제작일지
200706 블로그 제작일지
접근성 모든 사용자는 어떤 환경에서 접속하건 같은 정보에 접근할 수 있어야 한다는 게 지금까지 열심히 지키려 노력하는 저만의 기준입니다. (에버그린 브라우저를 기준으로 하는 경우가 많음)하지만 최근 모두가 화면을 볼 수 있는 게 아니란 중요한 사실을 깨달았습니다.아무리 최신 브라우저를 사용하더라도 앞을 볼 수 없으면 많은 버튼 및 링크가 아이콘으로 표현된 제 블로그에선 접근할 수 없는 정보가...
[티스토리] 댓글에 링크 및 이미지 추가하기
[티스토리] 댓글에 링크 및 이미지 추가하기
업데이트 2020.07.03 - innerHTML을 사용하지 않고 댓글 내용을 업데이트합니다. 단순히 텍스트밖에 적을 수 없는 티스토리 댓글에 링크, 이미지, 비디오, 유튜브 등을 추가해 화려하게 꾸미는 스크립트입니다. HTML 수정 <s_rp_container> 바로 아래에 있는 요소에 id가 없다면 하나 추가해주세요.방명록에도 사용하시려면 <s_guest_container> 아래에 있는 요소에 같은 id를 추가하시면 됩니다. [##_rp_rep_desc_##]을 감싼 요소에 class가 없다면 하나 추가해주세요. 댓글용과 답글용 2개가...

Tips

[워드프레스] 한글이 없는 댓글 자동으로 삭제하기
[워드프레스] 한글이 없는 댓글 자동으로 삭제하기
워드프레스 블로그를 운영하다 보면 하루에 10개가 넘게도 쌓이는 스팸 댓글 때문에 골머리를 앓는 게 한두 번이 아닙니다.블랙리스트를 사용해 특정 단어들만 차단해둬도 9할은 차단하긴 합니다만, 가끔 괴상한 내용으로 블랙리스트를 피하는 댓글이 있습니다. Akismet 등의 스팸 차단 플러그인도 괜찮은 선택지일 수 있겠지만, 한글로 블로그를 운영하면 굳이 무거운 플러그인 붙여다 스팸을 차단할 필요가 있나 싶습니다.글 작성자도 한글을 쓰니,...
[티스토리] 댓글에 링크 및 이미지 추가하기
[티스토리] 댓글에 링크 및 이미지 추가하기
업데이트 2020.07.03 - innerHTML을 사용하지 않고 댓글 내용을 업데이트합니다. 단순히 텍스트밖에 적을 수 없는 티스토리 댓글에 링크, 이미지, 비디오, 유튜브 등을 추가해 화려하게 꾸미는 스크립트입니다. HTML 수정 <s_rp_container> 바로 아래에 있는 요소에 id가 없다면 하나 추가해주세요.방명록에도 사용하시려면 <s_guest_container> 아래에 있는 요소에 같은 id를 추가하시면 됩니다. [##_rp_rep_desc_##]을 감싼 요소에 class가 없다면 하나 추가해주세요. 댓글용과 답글용 2개가...
윈도우에 우분투 설치하기 (WSL)
윈도우에 우분투 설치하기 (WSL)
Windows의 개발 환경은 예전부터 최악이란 평가가 많았지만, 작년 5월 WSL의 등장으로 옛말이 되었습니다.많이 불안정하고 느리단 평이 많아 설치를 꺼렸으나, 지난 12일에 WSL 2가 나오며 꽤 괜찮아졌단 평이 많길래 저도 설치해봤습니다. 물론 리눅스의 개발 환경이 최강인 이유 중 하나인 '그것밖에 할 게 없다'는 이유는 Windows가 앞으로 아무리 발전해도 도달할 수 없겠지만요. Windows 하위 시스템 활성화 윈도우...
작업물
About IU
Github : https://github.com/marshall-ku/About-IULive : https://marshall-ku.com/IU/ 소개 React.js와 친해지기 프로젝트 일환으로, 앞서 html, css, javascript로 제작한 트와이스 팬 페이지의 디자인을 기반으로 React로 아이유 팬 페이지를 제작했습니다.팬 페이지 만들 대상을 고민하다, 로고를 중심으로 Home, About / Discography, Filmography로 두 개씩 대칭을 맞출 수 있는 아이유를 선택했습니다. 앨범 데이터 JSON으로 작업하면서 양이 워낙 많아 괜히 했나 생각도 잠깐...
(작업중) 호텔델루나전 홈페이지
2020년 6월 6일부터 10월 4일까지 진행되는 호텔델루나전의 홈페이지입니다. 이제 나름 서버 설정도 할 줄 알아서 VM을 호스팅해 서버 설정부터 전부 혼자 작업해 페이지를 최대한 빠르게 표시하는 걸 목표로 작업했습니다.인터넷 익스플로러도 지원해야 하는지라 거기에 시간 대부분을 할애한 것 같네요. 어찌나 안되는 게 많던지.위 이유로 애니메이션도 홈 화면과 전시 개요 페이지에서만 간단하게 포인트를 줬습니다. JS는 트랜스컴파일러와 각종...
[트게더 커스텀 CSS] 해게더
트위치 스트리머 해이나 님의 트게더입니다. 사용 중이신 배너 이미지를 보내주셔서 배너 느낌을 토대로 작업했습니다.배경의 나무는 svg로 제작해 그냥 두니 너무 밋밋해 잎이 떨어지는 애니메이션을 추가했습니다.자바스크립트 애니메이션을 사용할 수 있었으면 훨씬 좋았을 텐데 많이 아쉽네요.
[트게더 커스텀 CSS] 민게더
트위치 스트리머 민따 님의 트게더입니다. 배경에 떨어지는 별똥별에 신경을 가장 많이 썼습니다.빛나는 별과 별똥별이 호수 위에 떨어지지 않게 하려고 제일 뒤에 배경 이미지, 중간에 별과 별똥별, 제일 앞에 배경 이미지에서 산과 호수만 자른 이미지를 배치했습니다. 별똥별 추가는 그냥 footer에 있는 a 태그들을 희생시켜서 제작했습니다.말고는 도무지 방법을 찾기가 어렵더라고요.
Twip Chat Box 커스텀 CSS - 대화형 채팅 형식의 Chat Box CSS입니다. 좌우 반전은 아직 지원하지 않으며, 배경 색상, 폰트에 관한 설정은 Twip에서 한 설정을 따르도록 해뒀습니다.+ 권장 글자 크기는 16px입니다. 191210 23:52 업데이트 - 스트리머 채팅 우측 정렬 업데이트200408 19:11 업데이트 - 스트리머 채팅 잘리던 오류 수정 적용 @keyframes fadeUp {    from {        opacity: 0;        transform: translateY(10px);    }    to {        opacity: 1;        transform: translateY(0);    }}*,::before,::after{box-sizing: border-box}html, body {    margin: 0;    overflow: hidden;    height: 100%}body {    background: $background_color;}#log {    position: absolute;    bottom: 0;    left: 0;    width: 100%;    padding: 0 10px 10px;    overflow: hidden;    font: 600 $font_sizepx '$font_face';}#log>div {    position: relative;    margin-top: 20px;    padding-left: 56px;    animation: fadeUp .5s ease;}#log>div.broadcaster {    padding: 0 56px 0 0;    text-align: right;}#log>div.deleted {    visibility: hidden}#log>div::before{    content: "";    position: absolute;    left: 0;    top: 0;    width: 40px;    height: 40px;    background: url(https://marshall-ku-tgd.github.io/tmpImages/cat.png) center no-repeat;    background-size: cover;    border-radius: 5px;}#log>div.broadcaster::before {    left: auto;    right: 0}#log>div .colon {    display:none}#log>div .meta {    display: block;    font-size: $font_sizepx;    line-height: 1.3;}#log>div.broadcaster .meta {    text-align: right;}#log>div .meta {    margin-bottom: 3px;}#log>div .meta>img{    display: inline-block;    height: $font_sizepx;    width: auto;    margin-right: 4.5px;    float:none!important}#log>div .message {    position: relative;    display:inline-block;    background: #fff;    color: #000;    border-radius: .4em;    padding: 10px}#log>div .message::after {    content: "";    box-sizing: content-box;    position: absolute;    width: 17.5px;    height: 25px;    border: 0 solid #fff;    border-width: 0 20px;    border-radius: 50%;    clip: rect(0,37px,15px,27px);    display: block;    z-index: 1;    left: -37.5px;    top: 5px;}#log>div.broadcaster .message::after {    left: auto;    right: -37.5px;    clip: rect(0,28px,10px,16px)} 위 코드를 커스텀 CSS에 추가하시면 됩니다. "https://marshall-ku-tgd.github.io/tmpImages/cat.png"를 수정해 본인이 원하시는 이미지를 추가하실...