Blog
2018년 10월, 티스토리 변화 소식
2018년 10월, 티스토리 변화 소식
2018.10.10모처럼 기분 좋게 글을 쓰러 왔다가 좋은 소식이 보였다. 바로 이번 달, 티스토리가 몇 가지 개선과 변화를 앞두고 있다는 공지사항이다. 솔직히 나는 기대가 사라진지 오래된 데다 가끔이지만 소소한 취미로 쓰고 싶은 글을 쓰면서 블로그를 운영하고 있었는데, 가뭄에 단비처럼 너무 반가운 소식이다. https://notice.tistory.com/2451 달라지는 티스토리에 대한 이야기는 위 링크에서 자세히 볼 수 있으며, 아래와 같은 사항들이 개선된다. 새로운 스킨 제공 홈 꾸미기를 위한 '커버' 기능 지원 초대장 종료 1일 글 작성 수 제한 IE 10 이하의 브라우저 지원 중단
글 제목 영역 이미지 블러 효과
글 제목 영역 이미지 블러 효과
2018.10.06filter: blur(5px);-webkit-filter: blur(5px); 글 작성 중
키 프레임을 이용한 이미지 마우스 오버 그림자 효과
키 프레임을 이용한 이미지 마우스 오버 그림자 효과
2018.10.06블로그를 수정하면서 이미지에 키 프레임을 이용한 애니메이션 효과를 줘봤다. 아래 링크는 최대한 스크립트를 사용하지 않고, 간단한 CSS 위주로 괜찮은 효과를 찾기 위해 구글링을 하다가 알게 된 사이트다.http://animista.net/ TRY ME! 버튼을 클릭하면 작업 페이지로 이동하는데, 최상단에 BASIC, ENTRANCES, EXITS, TEXT 등 총 6개의 카테고리와 바로 밑에 해당 카테고리의 애니메이션들이 있다. 그리고 미리보기 영역 좌측에는 몇 가지 옵션을 선택할 수 있으며, 우측 상단의 소스 아이콘을 클릭하면 해당 코드를 확인할 수 있다. 현재 글 이미지에는 BASIC 카테고리의 SHADOW-POP 애니메이션이 적용된 상태다. CSS .shadow-pop-tr {-webkit-anim..
아이폰에서 유튜브 동영상 자동 전체화면 사용 안함
아이폰에서 유튜브 동영상 자동 전체화면 사용 안함
2018.09.20이 글은 유튜브 동영상 테스트와 이어진다. 아이폰은 브라우저에서 동영상을 재생하면 자동으로 전체화면으로 전환된다. 이를 해결하려면 강제적이거나 복잡한 스크립트로만 가능한 줄 알았는데, 구글링으로 금방 찾을 수 있었고 생각보다 매우 간단하게 해결할 수 있었다. 개발자 샘플 https://developers.google.com/youtube/youtube_player_demo 위 링크를 클릭하면 유튜브 플레이어 데모 페이지로 이동한다. 여기서 플레이어 매개변수 표시 버튼을 클릭하면 다양한 매개변수들을 확인할 수 있는데, 여기서 주목해야 할 매개변수는 playsinline 이다. 이 매개변수는 iOS의 HTML5 플레이어에서 동영상을 인라인으로 재생할지 전체화면으로 재생할지 여부를 제어한다. 유효한 값은 다음..
유튜브 동영상 테스트
유튜브 동영상 테스트
2018.09.07Darling you 내 두려움 속 희망은 너 Darling you 기나긴 여정의 끝에 영원한 건 없다고 온 세상이 말해도 Darling darling you 내겐 너뿐이야 마셜님의 영상이 스크롤 밖으로 나가면 고정하기 기능을 블로그에 추가해서 적용해봤다. 아래는 블로그 하단 내비게이션 버튼을 고려해서 고정된 영상 위치를 수정한 CSS이다. CSS .video-post.sticked { position: fixed; bottom: 44px; left: 16px; width: 405px; z-index: 1051; } 모바일 화면에서도 적용되면 좋겠지만 모바일 환경에서는 영상이 전체 화면으로 재생되기 때문에 불필요한 것도 있고, 좁은 가로폭으로 화면 대부분을 가려서 일정 폭 이하에서는 보이지 않도록 dis..
티스토리 블로그 프라치노 공간 스킨으로 변경(수정)
티스토리 블로그 프라치노 공간 스킨으로 변경(수정)
2018.09.03변덕이 왜 이리 심한지 또 스킨을 바꿨다. 예전에 구매해놨던 프라치노님의 공책 스킨인데, 9월 17일 자로 구매한 프라치노님의 공간 스킨인데, 앞으로 어떠한 주제의 글을 작성하는 데 있어 가독성이 좋고 심플한 디자인이 마음에 들었다. 무엇보다 완성도가 높으면서 지속적인 업데이트, 친절하고 빠른 피드백이 만족스러워서 선택했다. 앞으로 블로그/스킨 카테고리에는 이 스킨을 사용하면서 버전 업데이트 기록이나 수정한 내용, 또는 팁 등을 작성할 계획이다.
SSL 적용 완료
SSL 적용 완료
2018.08.31인증서 정보 발급 대상: *.tistory.com 발급자: Thawte TLS RSA CA G1 유효 기간(시작) 2018-01-15 부터 2019-03-16 드디어 기다리고 기다리던 티스토리 SSL 적용이 완료됐다. 블로그 화면에서 주소창의 초록색 자물쇠 아이콘을 보고 있자면 뭔가 새로운 느낌이다.
티스토리 블로그 스크롤 상단 이동 버튼 추가하기
티스토리 블로그 스크롤 상단 이동 버튼 추가하기
2018.08.27저도 님처럼 스크롤 상단 이동 버튼을 만들고 싶은데 어떻게 어디에 무엇을 넣어야 하나요? 구글 스프레드시트에 24일자로 찍힌 코멘트다. 아무래도 포럼에 남긴 질문 글을 보고 오신듯 한데, 이 방법은 각 스킨마다 다를 수 있고 정석이 아님을 미리 밝혀둔다. 그리고 설명이 부족할 수 있기에 어디까지나 참고만 하면 된다. HTML arrow_upward 우선 나는 위와 같은 a 태그를 태그 위에 삽입하고 아래와 같이 CSS 속성을 줬다. 나는 버튼으로 만들 a 태그 클래스 이름을 arrow_upward 로 사용했는데, 버튼에 사용될 아이콘 이름이 arrow_upward 라서 그냥 별 의미 없이 줬을 뿐이다. 클래스 이름은 up이나 top 등 자신이 원하는 이름을 사용할 수 있지만 사용하는 스킨 내 클래스 명과..
스크롤 상단 이동 스크립트
스크롤 상단 이동 스크립트
2018.08.23(수정 전) (수정 후)
오류 제보 기능 추가 및 댓글 형식 수정
오류 제보 기능 추가 및 댓글 형식 수정
2018.08.21스킨을 수정하면서 블로그에 적용해볼 만한 괜찮은 기능이 있는지 찾아보다가 뭐하라님의 구글 스프레드시트를 이용한 오류 제보 기능을 알게 됐다. 스프레드시트를 이렇게 활용할 수 있다는 게 신기하고, 수백 개의 글들을 일일이 직접 찾아보지 않고도 방문자의 제보로 어떤 글이 무슨 문제가 있는지 한눈에 볼 수 있는 괜찮은 기능 같다. https://nubiz.tistory.com/551 이 기능을 추가하는 방법은 위 링크에 설명이 상세하게 잘 되어있고, 어렵지 않아서 금방 적용할 수 있었다. 대부분 HTML 구조는 동일하고 CSS만 약간 손봐서 깔끔한 디자인으로 수정했다. 위 사진과 같은 오류 제보 입력 폼은 공감/공유/신고 버튼 아래에 위치한다. 또, 댓글 영역은 위 사진과 같이 티스토리 댓글과 디스커스를 선택..
구글 머티리얼(Material) 아이콘 폰트
구글 머티리얼(Material) 아이콘 폰트
2018.08.20https://material.io/tools/icons/ ionicons 아이콘 폰트를 사용하다가 구글에서 무료로 제공하는 머티리얼 아이콘 폰트를 적용해봤다. 역시 간단하게 사용할 수 있도록 CDN을 제공한다. 아래 CDN 코드를 head 태그 사이에 삽입하자. 기본적으로 다른 아이콘 폰트와 동일하게 i 태그를 사용하고 클래스 명은 material-icons 를 사용하는데 i 태그 사이에 원하는 아이콘의 이름을 써넣으면 아이콘이 출력된다. 예시로 face 아이콘 출력을 원한다면 아래와 같이 하면 된다. face face .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.m..
블로그 스킨 변경
블로그 스킨 변경
2018.08.11지금껏 탕비수다 스킨을 사용하다가 다시 예전에 사용하던 토끼데스님의 폴리오 스킨으로 변경했다. 탕비수다 스킨은 깔끔한 디자인에 다양한 기능으로 군더더기 없는 스킨이지만 입맛에 맞게 수정하려니 까다로운 부분이 종종 있어서 100% 원하는 디자인으로 다듬기에는 무리가 있었다. 그리고 블로그 성격상 이미지 위주의 글이 아니다 보니 맞지 않는 옷을 입은 느낌이 들기도 했다. 때문에 비교적 수정이 용이한 폴리오 스킨을 사용하면서 각 영역의 세세한 디자인을 수정하고 여러 기능도 추가해보면서 사용할 생각이다.