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

  • 이 글에서 이미지 아이콘이 아닌 이 블로그에서 사용하는 아래와 같은 폰트 아이콘 사용에 대해서 적으려고 한다. 폰트 아이콘 사용에 대해서 2018/11/22 - 부트스트랩 3과 4에서 아이콘 사용에서 약간 적은 적이 있으니 참고했으면 한다. 폰트 아이콘을 사용하면 무료(free)로 1,409개, 유료(pro)로 4,566개 벡터 아이콘을 사용할 수 있다. 참고로 폰트 아이콘은 태그 사이에 붙인다. 나는 위 그림과 같이 했고 왜 1번이 있는지 2018/11/22 - 부트스트랩 3과 4에서 아이콘 사용에 설명했다. 처음 사용자는 1번을 헷갈릴 필요 없이 무시하면 된다. 폰트 아이콘 사용 위와 같이 화면 Font Awesome에서 제공하는 아이콘을 사용할 수 있다. 희미한 회색은 유료(Pro)이고 검정이 무료..

  • 이 글에서 티스토리 블로그 홈 커버 치환자에 대해서 적으려고 한다. 티스토리 블로그 치환자에 대한 것이니 네이버 블로그 등 다른 블로그는 해당 사항이 없다. 그러니 다른 블로그에서 안 된다고 하지 말았으면 한다. 티스토리는 새로운 스킨을 제공할 때마다 항상 새 치환자를 선보인다. 치환자가 추가됐다는 공지가 없으니 새 스킨에 새로운 치환자가 추가됐는지 봐야 한다. 티스토리 블로그에 새 치환자는 새 스킨을 제공함으로써 제공하는 것이 아닌가 하는 추측 해본다. 2015.10.30.과 2015.12.31.에 티스토리에서 제공한 스킨인 #1과 #2를 제공하면서 인덱스 등의 치환자를 제공했었다. 그때 그 스킨을 보고서 새로운 치환자가 생겼다는 것을 알았다. 며칠 전에 공개된 Poster, Whatever, Lett..

  • 글에는 속도 때문에 유튜브 동영상을 나타나게 하지 않았지만 이 블로그 메인을 보면 유튜브 동영상을 요소 배경에 나타난다. 이 글에서 그것에 대해 적으려고 한다. 이 글에서 설명할 동영상은 유튜브 동영상이라는 점을 알았으면 한다. 크롬에서 유튜브 자동재생 못하여 수정하려 했지만 그만두었다. 크롬이 아닌 다른 브라우저에서 문제없어 귀찮아 그만두었다. 그러나 이번에는 반드시 수정해야 했다. 왜냐하면 이 블로그에 SSL을 적용하면 모든 브라우저에서 안 됐기 때문이었다. 수정하면 크롬의 자동재생 문제도 해결할 수 있으면서 SSL에서도 제대로 된다. 참고로 크롬에서 몇 개월 전 유튜브 자동재생을 할 수 없게 했다. 그러면 유튜브 재생 버튼이 보인다. 그리고 아래 그림은 구글 애널리틱스 통계에 나타난 이 블로그 방문..

  • 티스토리는 스킨의 HTML/CSS 편집을 지원하며 글에서도 HTML, CSS, 스크립트에 대한 제한이 없다. 그래서 티스토리 초기부터 글에 HTML, CSS, 스크립트 를 마구 삽입했다. 불펌을 막기 위해서도 있지만... 그래도 CSS 등이 적용되지 않아도 퍼가는 사람은 퍼간다는 것을 느꼈다. 글에 티스토리에서 HTML, CSS, 스크립트 해결법을 적으려 한다. 아래는 부트스트랩 버전 4.*가 아닌 3에서 기본적으로 지원하는 Carousel 슬라이드로 글에 필요하니 어떤 것인지 구경했으면 한다. 소스에 대해 적으려는 것이 아니다. First slide Nulla vitae elit libero, a pharetra augue mollis interdum. Second slide Nulla vitae el..

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

  • 예전에 이 블로그 카테고리 변경하는 것을 알아보다가 우연히 클래스 추가하는 jQuery 함수를 알게 됐다. 클래스 추가는 .addClass라는 것을 사용해주면 되는 것이었다. 그래서 이것을 잊을 것 같아 티스토리에 사용하기로 했다. 참고로 네이버 블로그 등에서 jQuery는 사용할 수 없다고 알고 있으니 사용하지 말았으면 한다. 미리보기 티스토리는 댓글이 많으면 아래 그림을 보듯이 1번과 같은 이전 댓글 더보기라는 생겨 이전 댓글을 숨긴다. 이전 댓글을 보기 위해서 이것을 눌러야 하니 댓글이 삭제했다는 오해를 하지 않았으면 한다. 이 글에서 이전 댓글 더보기 버튼을 클래시 추가로 수정하는 과정을 아래에서 적으려고 한다. 클래스 추가 이 글에서 적을 것이 윗글을 읽었다면 짐작했듯이 jQuery에서 클래스 ..

  • 예전에 동영상 배경에 대해 설명이 잘 됐던 다른 사람 글이 안 보여 제가 이 블로그에 사용한 동영상 배경에 대해 설명하려고 합니다. 나중에 누가 물어볼 것 같은 예감이...방명록에 가끔 멋있다고 하거든요. 자세히 설명할 정도 많이 아는 것도 없으니 이 블로그에서 어떻게 했는지만 적겠습니다. 제한이 있는 네이버, 다음 등의 블로그에는 적용할 수 없으니 헛고생하지 마세요. 해보지 않았지만 경험상 네이버 블로그는 여기에서 사용하는 video 태그에 대한 제한을 있을 것 같습니다. 저는 네이버 블로그에서 HTML, CSS 등을 별로 해보지 않거든요. 왜냐하면 2009 년에 제한을 충분히 겪었거든요.HTML 이 블로그 방명록에 어떻게 사용했는지 적겠습니다. 여기에 보이는 동영상 배경은 로딩 속도 때문에 며칠 후 ..

  • 티스토리를 하면서 그래픽이 아닌 CSS로 해결하게 됩니다. 왜 CSS로 해결하려 경향이 있냐면 CSS를 어느 정도 알고 그래픽 프로그램을 잘 다루지 못하기 때문입니다. 결정적으로 티스토리는 네이버나 다음 블로그와 다르게 거의 제한이 없기 때문입니다. 만약 네이버 블로그처럼 제한이 있다면 CSS를 사용하지 못합니다. 어떤 사람은 속도 때문이라 생각할지 몰라도 짜증만 나지 않으면 속도는 그렇게 신경을 안 씁니다. 가령 웹폰트를 사용하지 않았을 것입니다. 원형 이미지 이 블로그를 최신 브라우저와 PC로 본다면 이 블로그 최상단의 원형 프로필 사진을 볼 수 있는데 이것을 네이버나 다음 블로거는 포토샵 등과 같은 그래픽 프로그램으로 만든 원형이 아닐까 하지만 부트스트랩(CSS)로 사각형 그래픽을 원형으로 만든 것..

  • 예전부터 이 블로그에 동영상 배경을 써 왔는데 공기계 LG GK가 생겨 그것으로 제 블로그를 봤습니다. 그런데 무엇이 문제인지 몰라도 페이지가 검정으로 나와 글씨가 안 보였습니다. 더 자세히 동영상 배경을 위한 CSS를 보고 싶었으나 그냥 배경을 나오지 않겠다는 생각을 했습니다. 제가 HTML 기초가 부족해서 문제가 많이 발생합니다. 제 PC와 스마트폰에서는 문제가 없었는데...다른 스마트폰에서는.... 현재 이 블로그에서 보이는 동영상 배경처럼 티스토리에 동영상 배경을 만드는 것은 http://osxtip.tistory.com/444를 보면 나와 있습니다. 거기를 보면 나와 있는데 쉽습니다. 동영상 배경을 설정하는 법을 더 쉽게 설정하던 곳이 있었는데 이젠 그곳이 사라졌네요. 참고로 저는 아래 그림 및..

  • 예전에 부트스트랩 소스에서 동영상 재생을 버튼을 만드는 것을 2015/12/04 - 부트스트랩 소스,동영상 표시 아이콘 나타내기에서 다루었습니다. 이번에는 부트스트랩을 사용하지 않고 아래와 같이 동영상 재생 버튼이 나오게 하는 것입니다. 그런데 익스플로러 7,8에서 보이는지 모르겠네요. 재생 이미지가 이미지 위에 있게 하는 것입니다. 썸네일에 동영상 버튼이 없으면 사진인지 동영상인지 알 수 없으나 재생 버튼이 있어서 아래 나오는 동영상이라는 것을 단번에 파악할 수 있을 것입니다. 미리보기는 아래를 보거나 이 블로그 사이드바 동영상을 클릭하면 나타나는 MORE 버튼을 눌러 볼 수도 있습니다. 동영상은 클릭하면 모달이라는 새창에 재생되는데 부트스트랩 모달에 대해서는 복잡해서 나중에 기회가 있으면 다루겠습니다..

  • 이 페이지에서 CSS3와 스크립트를 사용하여 스크롤 애니메이션을 다루는 것을 다루어 보겠습니다. 여담으로 애니메이션을 플래시를 이용하는 것이 아닙니다. PC 크롬에서 NPAPI 플러그인을 중지하여 플래시를 자동 재생하지 않습니다. PC가 아닌 모바일 크롬의 경우는 재생조차 할 수 없이 아예 지원하지 않고요. 제 생각에는 몇 년 안에 플래시가 사라질 것 같습니다. 예전에 티스토리를 비롯한 블로그에서 플래시 사용 현황에 대해서는 2015/09/25 - 플래시 사용 현황,티스토리,네이버 블로그,구글 블로그에서 에서 적었습니다. 여담으로 우리나라 홈페이지는 액티브엑스 처럼 플래시를 너무 많이 사용하는 것 같습니다. 그럼 아래에서 CSS3 애니메이션을 몰라도 만들어 주는 사이트와 페이지 스크롤을 움직이면 물체가 ..

  • 제가 알고 있거나 배운 CSS를 사용한 배경을 3가지에 대해 적을까 합니다. 그리고 모두 이 블로그에서 볼 수 있습니다. 저는 배운 것을 그냥 알고만 있기가 싫거든요. 이런 것이 모두 적용 가능하므로 티스토리가 좋은 것입니다. 네이버나 다음 블로그는 못합니다. 첫 번째는 CSS를 입문하면 기본적으로 익히는 배경 설정은 이미지 배경입니다. 대부분 아는 것입니다. CSS를 사용하지 않더라도 티스토리에서 스킨위자드로 하는 것입니다. 만약 스킨에 스킨위자드가 없다면 CSS를 사용해야 할 것입니다. CSS를 모른다면 배경 설정을 할 수 없다는....그래서 티스토리가 어렵습니다. 참고로 네이버 블로그라면 리모콘이나 관리 > 꾸미기 설정 > 세부디자인 설정으로 하는 것입니다. 네이버 블로그는 스킨에 리모콘이나 관리 ..

  • 이 블로그의 스킨을 부트스트랩 반응형 스킨으로 변경하고 확인하니 jQuery 를 사용한 것은 제대로 안 되네요. jQuery로 사용한 것은 CSS를 사용한 것처럼 보여야 합니다. 아마 부트스트랩과 충돌하는 것 같습니다. 그리고 스킨을 변경하니 다른 페이지에 있는 jQuery fancybox도 안되더라고요. 몇 년 전에 적었던 2011/12/16 - 티스토리 스킨변경, 적극 권하지 않는 이유라는 글이 생각납니다. 아래처럼 사진에 마우스를 가져갔을 때 보기 아이콘이 나오게 하는 것입니다. 이것은 jquery를 사용한 것으로 익스플로러 8에서도 잘되고 7은 확인하지 않았으니 보기 바랍니다. CSS3로 하는 방법도 있는데 그 방법은 익스플로러 8에서 안 된다는 것을 알았으면 합니다. 아래와 같이 하는 방법은 h..

  • 이 글에서 적고자 하는 것 여기에서는 단지 멋있는 자바스크립트를 사용한 것이 아닌 CSS만으로 만든 반응형 메뉴를 봐서 이 페이지에서 적고자 한다. 반응형 메뉴보기 및 소스얻기 아래 그림을 보다시피 스마트폰에서 1번을 클릭하면 2번처럼 펼쳐지는 반응형 메뉴이다. 이 메뉴는 반응형이라 컴퓨터에서는 메뉴 항목이 가로로 펼쳐진다. 그것은 아래에서 볼 수 있다. 이것은 CSS3의 미디어쿼리 등을 사용하므로 익스플로러 8이하에서는 제대로 볼 수 없으니 익스플로러 10 이상을 사용하기 바란다. 미디어쿼리가 아닌 CSS속성을 사용한다면 익스플로러 9에서도 제대로 나오지 않을 것이다. 위에서 스마트폰에서 메뉴 항목은 세로로 나타나지만 컴퓨터라면 아래를 클릭해보기 바란다. 그러면 아래를 클릭하면 메뉴 항목이 가로로 나타..

  • 이 페이지 글을 읽는다면 홈페이지나 블로그 디자인할 때 어떤 것을 유념해야 할지 도움이 될 것이다. 그리고 홈페이지나 블로그 디자인에 관심없어도 심심풀이도 읽어보기 바란다. 착각하지 말자 크롬,사파리,파이어폭스,오페라,익스플로러10의 경우는 익스플로러 6,7,8,9에서 지원하지 않는 HTML5 태그,CSS3 속성을 지원한다는 것을 알기 바란다. 그러면 익스플로러 6,7,8,9에서 지원하지 않는 태그나 속성을 많이 사용하여 만든 것은 아주 멋지게 보인다. 그러나 익스플로러 6,7,8,9에서 보면 별로다. 배 블로그가 그렇다. 자신의 브라우저에서 제대로 된다고 우리나라 사람들이 많이 사용하는 익스플로러 7,8,9에서 제대로 되고 보일 것이라 착각하지 말자. 그리고 이번에는 플래시에 대해 말하겠다. 플래시가 ..

  • CSS3의 Transitions 속성을 transitons를 시험하려고 했다. 그러나 멋있는 것만 보면 플래시라 생각하는 고정관념이 있어 플래시와 연관해서 설명하면 좋을 것 같아 적을 까한다. 플래시가 아니고 CSS이다. 아래는 플래시를 이용한 것이 아니라 CSS3의 Transitons를 이용한 것이다. 몇년전까지만 해도 트랜지션 효과는 열에 아홉은 플래시였으나 요즘은 CSS3,HTML5,jQuery 등을 사용한 것이 많아서 의심되는 것이 많다. 아래 것도 플래시가 아닌 CSS3의 transitions를 사용한 것이다. 문제는 transitons 속성을 지원하는 익스플로러 10,크롬,사파리,파이어폭스,오페라 등과 스마트폰를 비롯한 태블릿PC에서 브라우저인 최신 브라우저에서 아래 것이 플래시가 아니라는 것..

  • 2013/04/16 - 익스플로러,jQuery 사용시 생각할 사항 1에서 우리나라 사람은 익스플로러 6,7,8,9를 사용하는 사람이 많다는 것을 알아야 한다. 여기에서 알아야 할 것이 jQuery 플러그인에서 많이 사용하는 HTML5와 CSS3의 속성중에 익스플로러 6,7,8,9는 지원하지 않는 속성과 선택자를 많이 사용한다는 것이다. 내가 jQuery 플러그인을 만드는 것이 아니라서 익스플로러 6,7,8를 고려하라고 하지는 못한다.아래에서 익스플로러에서 지원하지 않는 속성과 치환자로 jQuery를 사용했을 때 어떻게 보이는지 볼 것이다. 참고로 아래에 더보기를 클릭하면 윈도우별 기본 브라우저에 대해서 적었다.윈도우 XP - 익스플로러 6 : 우리나라 사람이 윈도우7 다음으로 많이 사용하는 윈도우 XP에..

  • 지금 이 글을 쓰는 화요일 시간이 오후 10시 56분인데 조회수가 아래와 같이 9천 2백을 넘었으니 수요일에 오전에 1억건이 넘을 것 같다. 확인은 아래 싸이 유튜브 채널에서 확인해보기 바란다. 나는 거의 모든 글을 예약 발행을 한다. 예약 발행하니 오늘 날짜의 글을 어제 적은 글이다. 사진 3장 그건 그렇고 싸이의 젠틀맨 사진,뮤비,가사 등을 이용하면서 jQuery Fancybox가 어떤 것인가 보여주려 한다. 2013/03/16 - jQuery fancybox, 사용에 대한 고민중....을 적으면서 어떻게 활용할까 했었는데 마침 싸이의 젠틀맨으로 활용해보고자 한다. 아래 사진을 클릭하면 사진이 작은 사진에서 나오고 사진이 사이즈가 변하는 것이다. 아래 사진을 단지 3개이니 부족한 감이 있는데 많은 사..

  • jQuery 플러그인을 보면 플래시인가 착각할 정도로 아주 멋있어 사용하고 싶을 것이다. 그런데 jQuery를 홈페이지에 적용할 때 주의할 점을 모른다면 고생길로 빠진다는 것을 알았으면 한다. 이 글에서는 그것에 대해 설명한다. 참고로 이 블로그는 플래시가 아닌 jQuery를 사용했다는 글인 아래 링크 글을 보기 바란다. 멋있는 것은 무조건 플래시라고 생각하는 경향이 있기 때문이다.2013/02/20 - 플래시(SWF)가 아닌 jquery와 자바스크립트를 사용했음. 대부분이 사용하는 브라우저는 익스플로러(IE)다Open or Close 윈도우 시스템을 설치하면 기본적으로 설치되는 브라우저는 익스플로러(IE)이다. 윈도우XP를 깔았다면 기본적으로 있는 브라우저는 익스플로러6이라는 것을 알아야 한다. 사용자..