본문 바로가기

블로그/HTML. CSS. 스크립트

 (22)
CSS로 그라디언트 만들기 잉크스케이프 등 프로그램에서 그라디언트(그레이디언트)를 다루어 CSS로 어떻게 만드는지 궁금했다. 참고로 티스토리 블로그 글과 스킨에 CSS를 적용할 수 있다. 나는 블로그 글에만 적용했다. 그런데 이 글 배경에 아래와 같이 그라디언트 배경이 안 보인다면 배경이 없어진 것이다. 왜냐하면 글을 수정하면 그라디언트를 적은 CSS가 없어졌기 때문이다. 수동이 아닌 자동으로 CSS 그라디언트를 만드는 곳은 https://cssgradient.io/에서 만들 수 있다. 나도 거기에서 만들었 다. CSS 그라디언트를 배워 직접 만들 수도 있으나 인터넷에 자동으로 만들어주는 사이트가 많으니 나는 그런 곳을 이용한다. 그라디언트 외에 테두리, 그림자 등도 자동으로 만들어 주는 사이트를 이용하곤 한다. 그 사이트는 영문..
다른 방식으로 유튜브를 동영상 배경으로 사용 이 글에서 적고자 하는 것은 보는 배경처럼 유튜브를 사용에 대한 것이다. 내가 3년 전에 유튜브를 배경으로 하는 글을 적었는데 잊었다. 우연히 찾았는데 유튜브를 배경으로 하는 글을 적었던 것이었다. 그 글은 아래 글인데 그 글을 변형한 것임을 알았다. 전과 다른 점은 이 글은 아이프레임(iframe) 태그를 사용하지 않고 배경 동영상이 나오기 전에 유튜브에 업로드한 배경 이미지가 나온다는 것이 특징이다. 참고로 로딩하는 시간이 느려 움직이는 배경이 늦게 나타난다. 설마 정적인 배경을 설명하려고 한 것이라 생각한 것은 아닐 것이다. 글에 유튜브동영상배경 넣기 이 글에 나타나는 것은 유튜브 동영상 배경이다. 유튜브 동영상을 간단히 사용하는 방법을 알고 싶었는데 부트스트랩4로 스킨만들기를 익히다가 부트스트랩을..
티스토리에 추가된 치환자 적용 티스토리에서 스킨 업데이트하면서 라는 치환자를 추가했다는 것을 알았다. 업데이트된 치환자는 블로그에서 검색 등을 하여 결과가 안 나오면 결과에 대한 안내가 나오는 영역을 정의하는 것이었다. 그래서 이 블로그에서 사용하는 스킨을 내가 직접 만들었으므로 적용해봤다. 검색 후 결과가 안 나오면 아래와 같이 나오게 하는 것이다. 참고로 이 블로그 스킨을 변경하기 전 아래처럼 나왔었다. 위에서 적은 치환자인 는 검색에만 해당되는 것이 아니라 태그, 글보관함, 카테고리에 모두 해당한다. 아래 링크를 클릭하면 결과에 대한 안내문이 나올 것이다. 태그 : https://min-blog.tistory.com/tag/ㅌㅅㅌㄹ글보관함 : https://min-blog.tistory.com/archive/2009카테고리 : ..
애니메이션 카테고리 이 글에서 적고자 하는 것은 아래 그림의 플러스나 마이너스 아이콘을 클릭하면 애니메이션 되면서 폴더가 펼쳐지거나 접히는 것이다. 데모는 여기에서 볼 수 있고 티스토리 블로그에 적용한 것을 보고자 한다면 이 블로그 카테고리보면 알 수 있다. 동적인 애니메이션이니 멋있을 것이다. 알아야 할 것은 카테고리에 속한 글 수 색 등 여러 가지는 내가 CSS로 변경했다. 원래 카테고리는 위 그림과 같다. 애니메이션이 아닌 정적으로 펼쳐지고 접히는 것에 대한 소스와 데모는 http://destroydrop.com/javascripts/tree/를 보면 된다. 이 글을 동적인 애니메이션에 대한 것이다. 현재 없지만 예전 카테고리 형태를 고르는 것이 있었는데 그때도 정적이었다. 티스토리 블로그를 하다가 쉬었다 돌아오면 없..
HTML5에서 취소선 태그 HTML5에서 취소선이 strike 태그가 아닌 s나 del이라 사실을 알아 적어보려 한다. 며칠 전 새 에디터 베타가 나와 사용했다. 난 글을 적을 때 문장 앞 부분을 강조하기 위해 앞 단어를 항상 취소선인 태그로 강조한다. 즉, 이전 에디터에서 단어를 선택해서 위 그림에 보이는 취소선 아이콘을 선택했다. 참고로 내가 에디터에서 취소선을 사용하면... 취소선 대부분 사람은 에디터의 취소선 아이콘을 클릭하면 단어 가운데를 선이 그어지는 것이니 혼동하지 않았으면 한다. 나는 CSS로 조작...이런 것이 티스토리 블로그의 장점 중 하나다. 그런데 새 에디터를 사용해서 작성한 글에서 취소선을 사용하니 취소선을 사용한 강조가 안됐다. 그래서 HTML을 봤는데 새 에디터에서 취소선은 가 아닌 위 그림처럼 였다. ..
글에 유튜브동영상배경 넣기 이 글에 나타나는 것은 유튜브 동영상 배경이다. 유튜브 동영상을 간단히 사용하는 방법을 알고 싶었는데 부트스트랩4로 스킨만들기를 익히다가 부트스트랩을 사용하지 않고 유튜브 동영상을 CSS와 HTML를 사용하고서 웹페이지에 사용하는 방법을 알았다. 참고로 이 블로그 메인은 동영상 배경은 유튜브 동영상이고 방명록에 있는 배경은 MP4 동영상을 사용한 배경이다. 참고로 여기에 적을 내용은 멋있지만 머리가 아플 것이다. 그러니 어려우면 rn구경만 하고 넘어가기 바란다. .그리고 네이버나 다음 블로그 등에서 하지 말았으면 한다. 메인에 있는 동영상은 스크립트를 사용한 것이고 여기에서 적을 내용은 스크립트를 사용하지 않고 CSS와 HTML만을 사용할 것이다. 스크립트는 필요없다. 그리고 방명록에서 사용한 동영상도 ..
티스토리, 관리자댓글에 특정문구 추가 네이버 블로그를 방문하게 됐는데 블로그 주인이 댓글을 달면 아래 그림 1번처럼 블로그 주인이라는 이미지가 나타난다는 것을 알았다. 이것을 보고서 티스토리에서도 하고 싶다는 생각이 들었다. 그래서 해보기로 했다. 예전에도 적었지만 티스토리는 스킨의 HTML/CSS 편집이 가능하므로 얼마든지 가능하게 할 수 있다. HTML/CSS 편집의 불가능한 네이버 블로그는 불가능하다. 이렇게 하는 것은 HTML/CSS 편집을 모른다면 그림의 떡이지만...그 티스토리에서 블로그 관리자의 댓글만 다르게 하는 것은 구글 검색에서 찾았더니 .rp_admin에 정의하면 된다는 것을 알았다. 방명록인 경우는 .guest_admin이었다. 그래서 어떻게 변경할까 생각하다가 닉네임 앞에 블로그 주인이라는 문구를 적으려고 했다. 예전..
티스토리 글,댓글,방명록에 자동링크 블로그 초기 댓글에 http://www.tistory.com/라고 주소만 적어 클릭하면 티스토리 홈페이지로 이동할 수 있었다. 그런데 갑자기 이런 자동 링크가 안 됐다. 댓글에 링크만 적으면 자동적으로 링크가 되는 것이 편했었는데 없어져 아쉬웠다. 그리고 CSS를 사용해서 링크색도 변경했는데 그것도 적용되지 않았다. 그래서 구글 검색하여 스크립트를 적용하면 자동 링크가 되게 할 수 있다는 것을 알았다 그런데 그 스크립트와 스킨에서 사용하던 스크립트와 충돌하여 블로그 아이콘 나오지 않아 사용하지 않았다. 지금은 아무 이상 없이 나오므로 적게 됐다. 댓글,방명록에서 링크가 되게 하는 방법은 구글 검색에서 티스토리 자동링크라는 검색어로 찾아봤으면 한다. 난 http://zinee-world.tistory.co..

티스토리툴바