'블로그/HTML. CSS. 스크립트' 카테고리의 글 목록::백.전.백.승.

블로그/HTML. CSS. 스크립트에 해당되는 글22건

CSS로 그라디언트 만들기

잉크스케이프 등 프로그램에서 그라디언트(그레이디언트)를 다루어 CSS로 어떻게 만드는지 궁금했다. 참고로 티스토리 블로그 글과 스킨에 CSS를 적용할 수 있다. 나는 블로그 글에만 적용했다. 그런데 이 글 배경에 아래와 같이 그라디언트 배경이 안 보인다면 배경이 없어진 것이다. 왜냐하면 글을 수정하면 그라디언트를 적은 CSS가 없어졌기 때문이다. 수동이 아닌 자동으로 CSS 그라디언트를 만드는 곳은 https://cssgradient.io/에서 만들 수 있다. 나도 거기에서 만들었 다. CSS 그라디언트를 배워 직접 만들 수도 있으나 인터넷에 자동으로 만들어주는 사이트가 많으니 나는 그런 곳을 이용한다. 그라디언트 외에 테두리, 그림자 등도 자동으로 만들어 주는 사이트를 이용하곤 한다. 그 사이트는 영문..

2021.06.17

다른 방식으로 유튜브를 동영상 배경으로 사용

이 글에서 적고자 하는 것은 보는 배경처럼 유튜브를 사용에 대한 것이다. 내가 3년 전에 유튜브를 배경으로 하는 글을 적었는데 잊었다. 우연히 찾았는데 유튜브를 배경으로 하는 글을 적었던 것이었다. 그 글은 아래 글인데 그 글을 변형한 것임을 알았다. 전과 다른 점은 이 글은 아이프레임(iframe) 태그를 사용하지 않고 배경 동영상이 나오기 전에 유튜브에 업로드한 배경 이미지가 나온다는 것이 특징이다. 참고로 로딩하는 시간이 느려 움직이는 배경이 늦게 나타난다. 설마 정적인 배경을 설명하려고 한 것이라 생각한 것은 아닐 것이다. 글에 유튜브동영상배경 넣기 이 글에 나타나는 것은 유튜브 동영상 배경이다. 유튜브 동영상을 간단히 사용하는 방법을 알고 싶었는데 부트스트랩4로 스킨만들기를 익히다가 부트스트랩을..

2021.04.12

티스토리에 추가된 치환자 적용

티스토리에서 스킨 업데이트하면서 라는 치환자를 추가했다는 것을 알았다. 업데이트된 치환자는 블로그에서 검색 등을 하여 결과가 안 나오면 결과에 대한 안내가 나오는 영역을 정의하는 것이었다. 그래서 이 블로그에서 사용하는 스킨을 내가 직접 만들었으므로 적용해봤다. 검색 후 결과가 안 나오면 아래와 같이 나오게 하는 것이다. 참고로 이 블로그 스킨을 변경하기 전 아래처럼 나왔었다. 위에서 적은 치환자인 는 검색에만 해당되는 것이 아니라 태그, 글보관함, 카테고리에 모두 해당한다. 아래 링크를 클릭하면 결과에 대한 안내문이 나올 것이다. 태그 : https://min-blog.tistory.com/tag/ㅌㅅㅌㄹ글보관함 : https://min-blog.tistory.com/archive/2009카테고리 : ..

2019.08.30

애니메이션 카테고리

이 글에서 적고자 하는 것은 아래 그림의 플러스나 마이너스 아이콘을 클릭하면 애니메이션 되면서 폴더가 펼쳐지거나 접히는 것이다. 데모는 여기에서 볼 수 있고 티스토리 블로그에 적용한 것을 보고자 한다면 이 블로그 카테고리보면 알 수 있다. 동적인 애니메이션이니 멋있을 것이다. 알아야 할 것은 카테고리에 속한 글 수 색 등 여러 가지는 내가 CSS로 변경했다. 원래 카테고리는 위 그림과 같다. 애니메이션이 아닌 정적으로 펼쳐지고 접히는 것에 대한 소스와 데모는 http://destroydrop.com/javascripts/tree/를 보면 된다. 이 글을 동적인 애니메이션에 대한 것이다. 현재 없지만 예전 카테고리 형태를 고르는 것이 있었는데 그때도 정적이었다. 티스토리 블로그를 하다가 쉬었다 돌아오면 없..

2019.07.01

HTML5에서 취소선 태그

HTML5에서 취소선이 strike 태그가 아닌 s나 del이라 사실을 알아 적어보려 한다. 며칠 전 새 에디터 베타가 나와 사용했다. 난 글을 적을 때 문장 앞 부분을 강조하기 위해 앞 단어를 항상 취소선인 태그로 강조한다. 즉, 이전 에디터에서 단어를 선택해서 위 그림에 보이는 취소선 아이콘을 선택했다. 참고로 내가 에디터에서 취소선을 사용하면... 취소선 대부분 사람은 에디터의 취소선 아이콘을 클릭하면 단어 가운데를 선이 그어지는 것이니 혼동하지 않았으면 한다. 나는 CSS로 조작...이런 것이 티스토리 블로그의 장점 중 하나다. 그런데 새 에디터를 사용해서 작성한 글에서 취소선을 사용하니 취소선을 사용한 강조가 안됐다. 그래서 HTML을 봤는데 새 에디터에서 취소선은 가 아닌 위 그림처럼 였다. ..

2019.04.17

글에 유튜브동영상배경 넣기2

이 글에 나타나는 것은 유튜브 동영상 배경이다. 유튜브 동영상을 간단히 사용하는 방법을 알고 싶었는데 부트스트랩4로 스킨만들기를 익히다가 부트스트랩을 사용하지 않고 유튜브 동영상을 CSS와 HTML를 사용하고서 웹페이지에 사용하는 방법을 알았다. 참고로 이 블로그 메인은 동영상 배경은 유튜브 동영상이고 방명록에 있는 배경은 MP4 동영상을 사용한 배경이다. 참고로 여기에 적을 내용은 멋있지만 머리가 아플 것이다. 그러니 어려우면 rn구경만 하고 넘어가기 바란다. .그리고 네이버나 다음 블로그 등에서 하지 말았으면 한다. 메인에 있는 동영상은 스크립트를 사용한 것이고 여기에서 적을 내용은 스크립트를 사용하지 않고 CSS와 HTML만을 사용할 것이다. 스크립트는 필요없다. 그리고 방명록에서 사용한 동영상도 ..

2018.03.06

티스토리, 관리자댓글에 특정문구 추가

네이버 블로그를 방문하게 됐는데 블로그 주인이 댓글을 달면 아래 그림 1번처럼 블로그 주인이라는 이미지가 나타난다는 것을 알았다. 이것을 보고서 티스토리에서도 하고 싶다는 생각이 들었다. 그래서 해보기로 했다. 예전에도 적었지만 티스토리는 스킨의 HTML/CSS 편집이 가능하므로 얼마든지 가능하게 할 수 있다. HTML/CSS 편집의 불가능한 네이버 블로그는 불가능하다. 이렇게 하는 것은 HTML/CSS 편집을 모른다면 그림의 떡이지만...그 티스토리에서 블로그 관리자의 댓글만 다르게 하는 것은 구글 검색에서 찾았더니 .rp_admin에 정의하면 된다는 것을 알았다. 방명록인 경우는 .guest_admin이었다. 그래서 어떻게 변경할까 생각하다가 닉네임 앞에 블로그 주인이라는 문구를 적으려고 했다. 예전..

2018.02.27

티스토리 글,댓글,방명록에 자동링크3

블로그 초기 댓글에 http://www.tistory.com/라고 주소만 적어 클릭하면 티스토리 홈페이지로 이동할 수 있었다. 그런데 갑자기 이런 자동 링크가 안 됐다. 댓글에 링크만 적으면 자동적으로 링크가 되는 것이 편했었는데 없어져 아쉬웠다. 그리고 CSS를 사용해서 링크색도 변경했는데 그것도 적용되지 않았다. 그래서 구글 검색하여 스크립트를 적용하면 자동 링크가 되게 할 수 있다는 것을 알았다 그런데 그 스크립트와 스킨에서 사용하던 스크립트와 충돌하여 블로그 아이콘 나오지 않아 사용하지 않았다. 지금은 아무 이상 없이 나오므로 적게 됐다. 댓글,방명록에서 링크가 되게 하는 방법은 구글 검색에서 티스토리 자동링크라는 검색어로 찾아봤으면 한다. 난 http://zinee-world.tistory.co..

2017.06.29

css:before를 티스토리에서 사용했다.

며칠 전에 부모 요소에 CSS를 추가하는 방법을 알았다. 그리고 얼마지나지 않아서 before 선택자를 사용하는 법을 배워 티스토리 카테고리에 사용해 ㅂ보기로 했다. 내가 이 블로그 스킨을 만들어서 그런지 HTML,CSS 등을 많이 아는 것으로 생각하여 질문하는 경우가 많다. 그런데 나는 누구를 가르칠 만큼 자세히 알지도 못한다. 참고로 아래 내용은 머리를 아프게 하는 내용이니 관심 없으면 그냥 넘어가기 바란다. 그건 그렇고 css의 before 선택자는 카테고리와 최근 댓글에 사용했다. 내가 알기로 전에라는 뜻인 before는 요소 앞에 콘텐츠나 CSS를 추가한다고 알고 있다. 그래서 브라우저인 크롬으로 최근 댓글의 시간 및 카테고리 마지막의 클래스를 알아낸 후 before를 적용했다. 아래 그림은 최..

2017.05.25

부모 요소에 CSS를 추가하는 법을 알았다.

내가 알고 싶었던 정보인 부모 요소에 CSS를 추가하는 법을 알아 아래에 적고자 한다. 나에겐 티스토리에서 스킨 수정하거나 만드는 정도만 필요하니 더 깊게 들어가고 싶지 않다. 그러니 jquery를 사용하여 CSS를 자세히 공부하는 사람에게 도움을 되지 않을 것이다. 그런 사람은 이 글을 보고 아마 낚시라고 생각할 것이다. 낚시라고 생각해도 상관없다. 제목대로 부모 요소에 CSS를 추가하는 것에 대한 글이다. 아래 그림과 같은 페이지의 쪽 수 매기는 것을 만들 때 선택된 페이지 쪽 수의 배경색을 변하게 하는 것을 몰랐다. 즉 1번과 같이 3이라는 글자의 배경도 변하게 하는 것이다. 부모 요소에 CSS 추가하는 방법을 몰랐을 때는 3이라는 글자에만 효과를 주었다. 참고로 아래와 같이 쪽 수 매기는 것을 만..

2017.05.06

카테고리 다른글. 플러그인과 치환자

이 글에서 골치 아프지 않도록 카테고리 다른 글에 대한 치환자가 무엇인지에 대한 내용을 뺐다. 낚시라고 생각했다면 댓글로 욕해도 좋다. 만약 티스토리 카테고리 다른 글에 대한 치환자에 대한 내용을 알고 싶다면 티스토리 홈페이지에 TISTORY Guide의 스킨가이드 > 치환자 > 카테고리 다른 글을 클릭하면 된다. 여기에서 적을 내용은 이 블로그에 나타난 카테고리 다른 글이 무엇인가에 대한 설명을 적으려고 한다. 이 블로그 본문 아래에서 볼 수 있는 텍스트로 된 카테고리의 다른 글 보기는 꾸미기에 있는 카테고리 글 더 보기라는 플러그인을 활성화하면 나타나는 것이다. 그러나 아래 그림은 티스토리에서 제공하는 스킨 #2 그림으로 아래와 같이 카테고리 더보기에 4개로 된 이미지가 나타나면 그것은 치환자를 삽입..

2017.04.27

카테고리를 제목,썸네일,요약글

티스토리가 반응형 스킨인 #1과 #2를 제공하면서 추가한 두 개의 치환자를 적으려 한다. 티스토리는 치환자를 추가했으면 공지를 하던가 짜증나게 티스토리 블로거가 소스를 분석하거나 매뉴얼을 보면서 치환자 추가를 알아야 하다니...나는 #1,#2 스킨의 소스를 보면서 사용법 등을 분석해서 알았다. 아래 글을 읽는다면 아마 골치 아플 것이다. 이 두 개의 치환자를 사용하면 웹진으로 만들 수 있었다. 즉 카테고리,태그,보관함의 월 등을 클릭하면 제목,썸네일,요약글이 나오는 나오는 형태로 나오게 할 수 있다. 그것은 퍼머링크 페이지 치환자인 ... 와 인덱스 페이지인 ... 를 더하면 가능하다. 퍼머링크 페이지와 인덱스 페이지 치환자 사용법은 티스토리 홈페이지 > TISTORY GUIDE > 스킨가이드 > 4번 ..

2017.03.17

티스토리에서 HTML?

티스토리를 하려고 사람 중 일부는 HTML을 알아야 된다는 고정관념이 있는 것이 아닌가 싶습니다. 멋있게 하기 위해 HTML만 아니라 CSS,스크립트까지 알아야 합니다. 그렇지만 네이버 블로그에서 알았던 간단하게 알았던 것 이상으로 알려고 하면 피곤해 질 것 같습니다. 티스토리에서 블로그를 하려면 HTML을 알아야 하는지 적어보려 합니다. HTML도 HTML만 있는 것이 아니고 HTML안에 HTML5도 있고 어떤 태그는 특정 브라우저, 특정 OS(운영체제)에서 안 되는 것이 있다는 것을 알아야 하는 머리가 아픕니다. HTML에 빠져들면 머리가 아픕니다. 그리고 네이버 블로그와 티스토리 HTML을 다르다는 것도 알아두어야 합니다. 그 HTML은 다르지 않는데 네이버 블로그에서 제한이 있는 태그가 많아 다르..

2016.05.26

티스토리 body id가 유용하네.

티스토리를 7 년을 하고 있는데 얼마 전에 치환자를 사용했네요. 사용해보니 아주 유용하더라고요. 여기에서 그것에 대해 적으려고요. 비록 제가 티스토리에 대해서 많이 다루었지만 스킨만들기에 대해 다루지 않아 몰랐거든요. 여담으로 저는 이 스킨을 만들면서 로 할 수 있는 것은 아래 그림처럼 skin.html내에 을 사용했거든요. 얼마 전에 알았던 로 할 수 있는 것은 로 할 수 있어서 별 불편함이 없었습니다. 예로 스킨에 를 몰라도 치환자에 을 넣으면 됐거든요. 에 관련된 글을 http://ccmscore.tistory.com/216에서 볼 수 있습니다. 그 글은 2009년에 썼지만 도움이 될 것입니다. 그런데 를 사용했습니다. 위에서 에 대해서 적었는데 이것은 티스토리 스킨 만드는 사람에게 관련된 것이니 ..

2016.02.15

티스토리에선 CSS로 해결하게 된다.

티스토리를 하면서 모든 것을 CSS로 해결하게 된다. 전에 글을 적으면서 아래와 같은 버튼을 만들려고 했는데 웬만하면 포토샵 등 그래픽 프로그램을 이용했을텐데 티스토리에서 CSS 사용에 제한이 없고 나도 영어에 그렇게 부담이 없으니 그냥 CSS로 해결하게 된다. 티스토리를 하면서 느끼지만 괜히 티스토리를 하는 것이 아니다. 아래 버튼은 글에 태그를 사용해야 하므로 네이버 블로그에서는 안 된다. 참고로 아래 버튼은 http://www.cssbuttongenerator.com/에서 만들 수 있다. 설문조사 그리고 아래 그림을 보듯이 이 블로그 배경은 그래픽을 사용하지 않은 CSS로 만든 그라이언트 배경이다. 왜 CSS를 사용했냐면 만약 나중에 배경이 마음에 안들면 CSS만 수정하면 되니 편기 때문이다. 참고..

2015.06.15

티에디션 치환자 등 배우기2

여기에서 티스토리 블로그의 티에디션에 대한 치환자 등을 알아볼 것이다. 티에디션은 티스토리 블로그에 있는 첫 페이지 만드는 플러그인이고 치환자는 무언가를 대체하는 코드라 보면 될 것 같다. 쉽게 설명하려는데....어떻게 설명해야 할지 모르겠다. 그러면 티스토리 블로그에서 [**_calendar_**]를 사용하면 티스토리가 정의한 달력을 대체한다. 이 페이지에도 치환자를 설명하는데 여기에서 설명할 치환자는 티에디션의 HTML에서만 작동하는 치환자이다. 그러니 티에디션이 아닌 곳에서 사용하면 쓸모가 없다. 참고로 *을 #으로 변환해야 한다. ##을 사용하면 글에서 치환자를 읽으므로 #을 *로 했다. 아래에 적을 내용은 블로그를 즐기는 사람에게는 골치 아픈 내용일 것이다. 그러니 아래 내용을 억지로 이해하려고..

2014.09.09

티스토리, 서비스명/ 버전/적용4

여기에서 티스토리 서비스명과 버전을 티스토리의 스킨가이드에 나온 치환자를 통해서 알아보았다. 이 블로그 하단 저작권 부분을 보면 티스토리 서비스명과 버전을 알 수 있다. 또는 티스토리 서비스명과 버전에 대한 치환자는 티스토리 스킨 가이드인 여기에도 나왔다. 그리고 아래 나온 치환자의 *은 #로 변경해야 맞다. 왜 #인데 *을 사용했냐면 #을 사용하면 치환자를 읽어버려 안 보이기 때문이다. 현재 티스토리 서비스명과 버전을 알기 전에 티스토리 블로그 서비스는 네이버나 다음처럼 티스토리가 자체 개발한 블로그 프로그램을 설치하여 서비스하는 것이 아니라 설치형 블로그 프로그램인 태터툴즈(Tattertools)를 티스토리에 설치해서 블로그 서비스한다. 그래서 치환자에 tattertools라는 것이 들어가는 것 같다..

2014.08.30

티스토리에 3개의 치환자를 추가

메뉴 설정을 위한 치환자인 [ ##_blog_menu_## ]을 적어주면 관리의 화면설정에서 메뉴탭을 사용할 수 있습니다. 만약 스킨에 이 치환자가 없다면 메뉴탭은 활성화되지 않을 것입니다. 이 스킨은 제가 skin.html에 [ ##_blog_menu_## ]을 추가해서 아래 그림처럼 메뉴 설정이가능하게 했습니다. 원래 이 스킨은 메뉴 설정이 없습니다. 만약 [ ##_blog_menu_## ]이 없다면 메뉴가 활성화되지 않아 아래 그림처럼 보입니다. 아래와 같이 안 나오게 하기 위해서는 [ ##_blog_menu_## ]를 추가하면 됩니다. 블로그의 달력을 표시하기 위한 치환자로 [ ##_calendar_## ]을 적어주면 됩니다. 블로그 방문자를 위한 그래프 치환자는 으로 이것은 티스토리 플러그인의 ..

2014.03.28

[에버노트4] 에버노트 플러그인에 대한 부정적인 측면?5

티스토리 블로그에 에버노트 플러그인이 생겨서 에버노트에 메모한 것을 불러올 수 있게 됐다. 이것은 긍적적인 면이지만 부정적인 면이 있다. 이것이 무엇이냐면 펌블로그가 될 수 있다는 부분이다. 왠 펌블로그할 것이다. 펌은 스크랩을 말하니 펌블로그는 포털블로그인 다음이나 네이버 블로그에서 많이 본 스크랩(펌)을 많이 하는 블로그다. 에버노트 플러그인에 대해 모르면 왠 스크랩할 것이다. 에버노트 플러그인에 대해 말하면 얼마전에 티스토리가 제공한 에버노트 플러그인은 에버노트에서 작성한 메모를 티스토리 블로그에 삽입할 수 있으니 걱정하는 것이다. 에버노트 관련 프로그램을 사용하면 에버노트로 스크랩이 가능하다. 스크랩 예로 아래 동영상을 보듯이 크롬의 확장 프로그램인 Evernote Web Clipper를 사용하면..

2014.03.12

<s_t3>~<s_t3> 쓰는지 확실히 이해갔다7

티스토리 스킨가이드에는 자바스크립트를 지정해줄 영역을 선언하기 위해서 안에 를 넣어줘야 합니다.라고만 나와서 확실히 이해가 되지 않았다. 요즘 반응형 스킨을 만들다 알았는데 아래 그림처럼 안에 를 넣어주지 않으면 댓글,검색 등이 안 되는 것이었다. 아마 티스토리 블로그에서 작동하는 댓글입력,방명록입력,다음글과 이전글넘어가기,검색,글삭제,글수정 등 모든 것을 할려면 태그안에 를 입력해주어야 하는가 보다. -무료팩스 BY 엔팩스- 안에 를 지워보기 바란다. 괜히 잘 작동하는 블로그에 해서 블로그를 망치지 말고, 실험블로그가 있다면 해보기 바란다. 그러면 댓글도 검색도 작동이 안 될 것이다. 만약 시험블로그가 아닌 지금 작동하는 블로그에 하고 싶다면 는 태그 바로 아래에 위치하고 는 바로 위에 위치한다는 것을..

2013.09.22