어느 날 제가 작성한 애펙 관련 글에 댓글이 달렸습니다. 글은 꽤나 예전에 작성한 다소 오래된 문서였는데 해당 글에 댓글이 달린걸로 봐서는 댓글 품앗이 하시는 분은 절대 아니라는걸 알 수 있었습니다. 확인해보니 뭔가 프로그래밍 홍보하는 스팸성 댓글로 보여졌습니다. 하지만 본문의 내용과 댓글 분위기가 일치하기에 여러 티스토리를 돌아다니며 남기는 댓글은 아니겠거니 싶었습니다. 댓글을 남기신분의 티스토리를 방문해보니 애펙 관련글은 없고 뭔가 노동청 관련 에피소드 글들만 있었습니다. 매우 힘든 상황이었음을 인지했습니다. 더구나 경험담 글이니 무조건 홍보 목적으로 댓글을 남긴건 아니라는 생각이 들었습니다. 이분의 노동력 착취담을 쭉 훑어보니 참 남일같지 않다고 느껴졌고 뭔가 도움이 되어야겠다는 생각이 들어 댓글을..
구글 블로거 플랫폼은 티스토리 대비 너무나 인터페이스가 불편합니다. 가시성 떨어지는 UI / UX도 문제고요. 세계 제일 기업인데 너무 자사 플랫폼에 소홀한게 아닐까라는 생각이 듭니다. 너~무 구려요. 이것때문에 다른 플랫폼으로 환승할까도 고민을 했습니다. 하지만 무료 오픈 소스 형태의 블로그 플랫폼은 몇 개 되지 않습니다. 워드프레스는 초기 자본이 들어가고 이게 또 고정적으로 계속해서 지불하는 OTT같은 비용이라 아무래도 부담스러운건 사실입니다. 또한 워드프레스라고 해서 인터페이스가 훌륭하지도 않습니다. 티스토리가 최고에요. 간결하면서도 알아보기 쉬운 그런 사용자 환경! 아무튼 지금은 구글 블로거(Blogger) 플랫폼을 잘 육성하는 중이라 이런 저런 방법들을 적용하고 시도하고 있습니다. 구글 블로거 ..
제이쿼리가 무조건 최신 버전이 좋은것은 아닙니다. 하지만 왜인지는 몰라도 최신 버전이라고 하면 뭔가 모든게 다 해결될 것 같은 그런 기분이 들잖아요? 「최신」이라는 키워드가 갖는 선입견이 엄청나게 작용하는 것이겠지요. 하지만 진짜로 최신 버전을 사용하면 왠만한 오류나 버그들은 대부분 해결이 되는것이 현실입니다. 제이쿼리(jQuery)도 마찬가지입니다. 참고로 현재까지 현역으로 쓰이는 가장 인기가 높은 구버전은 1.12.4 와 1.9.1이 있으며 3.6.X 버전이 있습니다. 아무튼 이런 버전 차이에 대해서는 신경쓰고 싶지 않고 그저 최신 버전을 늘 사용하고 싶다면 다음의 제이쿼리 CDN 주소를 적용하고자 하는 HTML 문서의 안에 넣어주시기 바랍니다. 이거 하나면 끝! 이것입니다. 어렵지 않습니다. 기존 ..
친효스킨 2.4버전 이상부터 적용되는 디데이(D-Day) 카운터 모듈에 대한 안내 겸 다른 스킨에는 어떻게 적용하는지에 대한 소개입니다. 현재 이곳 친절한효자손 취미생활 티스토리에도 적용된 기능입니다. PC 해상도 기준으로 왼쪽 사이드바에 위치한 디데이 모듈을 주목해 주시기 바랍니다. 아래의 스크린샷 이미지는 과거에 스샷해 놓은 것이기에 현재의 날짜와 맞지 않을 것입니다. 그냥 이미지로서만 봐주시면 됩니다. 두 가지의 기능을 담은 디데이 모듈입니다. 첫번째는 지정한 날짜로부터 계속 카운터가 되는 형태이며 마지막 두번째는 지정한 날짜까지의 남은 날을 계산해주는 카운터입니다. 둘 다 쓰임새가 다를 것입니다. 첫번째의 경우는 예시에서처럼 홈트레이닝 ~일째라는 것을 보여줄 때 요긴할 것입니다. 두번째는 예시처럼..
언제부터인가 자꾸 본문 수정 시 혹은 글 작성 시 태그와 태그에 알 수 없는 속성값이 부여가 되기 시작했습니다. data-ke-size라고 하는 이 녀석은 폰트의 크기를 지정한 값으로 억지로 변경하는 옵션입니다. size16, size20, size24 등등등의 크기값이 큰 따옴표 안에 들어가버리는데 정말이지 여간 귀찮은것이 아닙니다. 물론 해결 방법은 있습니다. 글을 작성할때마다 해당 속성값을 수동으로 모두 지워버리는 것입니다. 이 방법에 대해서는 아래에 더 자세히 언급되어 있으니 한번 시간 괜찮으시면 읽어보시기 바랍니다. 티스토리 업데이트 (2021.5.12) 때문에 발생한 버그 오류 내용 및 해결 방법 티스토리 업데이트 (2021.5.12) 때문에 발생한 버그 오류 내용 및 해결 방법 안녕하세요. ..
안녕하세요. 친절한효자손입니다. 친효스킨 2.3 버전에 대한 일부 코드 수정 안내입니다. 치명적인 문제는 아닙니다. 본문 로딩 스크립트의 위치를 변경하고자 이렇게 안내를 드리려고 합니다. 본문을 다 로드 후 스크립트가 실행되다보니 바로 곰돌이가 보이지 않고 약 0.5초 정도 후 곰돌이가 보이는 문제를 수정했습니다. 위치를 옮기면 이제 로딩 스크립트가 바로 실행되고 본문 로딩이 모두 완료되면 곰돌이도 사라지게 될 것입니다. HTML 수정 방법 다음의 스크립트를 HTML 편집 화면에서 찾습니다. 위치는 바로 위에 있을 것입니다. 이것이 스킨 로딩과 관련된 태그 코드입니다. 이 코드를 모두 블록 처리하여 잘라내기(Ctrl+X) 합니다. 그리고 바로 뒤에 붙여넣기 해줍니다. 수정 완료 후의 모습입니다. 친효스킨..
안녕하세요. 친절한효자손입니다. 오랜만에 티스토리 관련 정보를 안내해드리려고 합니다. 티스토리와 애드센스의 관계인데요, 티스토리는 2020년 말부터 2021년 초반까지 관리자 페이지에 있는 애드센스 계정과 동기화를 사용자들에게 요청 중입니다. 이로인해 애드센스 플러그인 기능은 사라졌지요. 초반에 이것때문에 살짝 당황했지만 대처방법은 뭐 얼마든지 있으니까요. 티스토리 관리자에서 애드센스 계정과 아예 동기화를 해버리면 따로 반응형 광고 코드를 만들지 않고 클릭만으로 본문이나 사이드바에 편리하게 광고 삽입이 가능해졌습니다. 이 부분은 분명 눈부신 발전입니다. 이제 막 시작하신 분들도, HTML을 잘 모르시는 분들도 전혀 문제없이 광고 삽입을 할 수 있게 되었습니다. 여기에서 하나 궁금한 부분이 생겼습니다. 원..
티스토리에 이런 저런 연구를 진행하는 중입니다. 현재 친효스킨에는 본문 로딩 중에 제 트라이드 마크인 효자곰이 보이며 그 주변으로 무언가가 뱅글뱅글 돌아가는것을 확인할 수 있습니다. 본문의 모든 데이터를 로드하는동안 이런 애니메이션이 연출되는건데 이건 어떻게 적용시키는건지 알아보도록 합시다. HTML + Script 세팅하기 먼저 기본 뼈대가 되는 HTML과 애니메이션을 위한 스크립트를 티스토리 스킨 정보에 입력해 봅시다. HTML에 붙여넣기를 진행해야 합니다. 아래의 첨부파일을 다운받고 열어주시기 바랍니다. 열어보시면 점선을 기준으로 위에는 HTML과 스크립트 코트가, 아래에는 CSS 코드가 첨부되어 있습니다. 먼저 이 부분입니다. 해당 코드를 모두 복사합니다. 그리고 자신의 스킨 HTML 정보로 들어..
해당 방법은 추가로 스크립트 플러그인을 설치하는 방법, 그리고 기본적으로 애프터이펙트에 있는 내용을 스크립트 기능을 사용하는 방법 이렇게 두가지가 있습니다. 아마 애펙에서 이 기능을 기본적으로 지원하는건 CC 2019와 같은 근래의 최신 버전부터 생긴 것 같습니다. (어디까지나 추측) 확실한건 2020 버전에는 이 기능을 지원합니다. 현재 사용중인 버전이 2020이라 이건 분명합니다. 얼마전에 애펙 관련 강좌글을 하나 작성했습니다. 내용 또한 지금 소개해드릴 부분과 비슷한 강좌이지요. 애펙의 메인 컴포지션 크기를, 그러니까 해상도를 변경할때 작업한 오브젝트들도 해당 크기에 맞춰 같이 수동으로 변경해줘야 하는 부분이었습니다. 무슨 말인지 잘 모르신다면 한번 읽어주시기 바랍니다. 글이 길지 않아서 금방 볼 ..
애펙에서 텍스트를 입력 후 한 글자씩 자동으로 나눠주는 스크립트 입니다. 공식 사이트에서 유료 및 무료로 받을 수 있습니다. 기부 형식의 결제 방식이기 때문에 0달러를 입력하면 무료 다운로드가 가능합니다. DecomposeText 스크립트 다운로드 과정 aescripts.com/decomposetext/ DecomposeText Breaks up text by character, word or line into separate layers. aescripts.com 먼저 AEScripts + AEPlugins 공식 홈페이지로 들어갑니다. 방문하신다음 회원가입부터 진행합니다. 회원가입 방법은 특별히 어렵지 않으니 자세한 설명은 생략합니다. 영어가 좀 취약하다고 하신다면 크롬에서 한국어 번역을 해서 진행하면..
애프터이펙트 수업을 열심히 배우고 있습니다. 선생님께서 말씀하시기를 쉐이프 레이어 (Shape Layer)를 정말 많이 사용하게 될텐데, 이때 오브젝트의 앵커포인트(중심점)를 잡아주는게 정말 중요하다는 설명을 하십니다. 쭉 설명을 들어보니 이해가 갑니다. 회전이나 크기, 위치를 수정함에 있어서 중심점은 정말 중요하지요. 일러스트레이터를 해봐서 잘 알고 있습니다. 그런데 애프터이펙트에서의 앵커포인트를 잡는건 간단하지만 번거롭습니다. 그래서 어떤 해외 능력자가 이것을 스크립트 파일로 만들었습니다. 실무에서는 실제로 이 스크립트를 대부분 많이 사용한답니다. 하지만 애석하게도 유료 스크립트 입니다. 근데 막 엄청 비싸지도 않습니다. 겨우 2달러 (한화 약 2,300천원) 입니다. 커피 한 잔도 안 하는 가격! ..
많은 티스토리 사용자가 있고, 티스토리에는 애드센스 광고를 게시할 수 있습니다. 티스토리를 열심히 가꾸어 구글 애드센스 신청을 하게 되고, 콘텐츠의 품질과 방문자 유입에 따라서 승인 유무가 달라집니다. 결국에는 승인을 받게 되고 그때부터 본격적인 애드센스 광고를 게시할 수 있습니다. 개인적으로 기본기를 엄청 중요하게 생각합니다. 뭐든 기본을 알아야 응용 할 수 있습니다. 따라서 기본기를 모른다면 그 응용 방법 또한 모르게 됩니다. 또한 기본 개념을 알아야 다른 방식의 설명을 이해할 확률이 높아집니다. 그러므로 기본기를 충분히 다지는게 중요합니다. 본문에서는 애드센스의 HTML 코드 구현 방식의 아주 기본적인 부분을 설명하려고 합니다. 그 중에서도 애드센스 스크립트(Script) 코드와 클라이언트(Clie..
인디케이터는 표시기라는 뜻을 가지고 있습니다. 그렇다면 티스토리에서의 인디케이터는 어떤 의미를 가질까요? 무언가를 표시한다는 뜻인데, 과연 뭘 표시할까요? 가장 많이 사용하는 인디케이터는 본문의 내용에 대한 분량을 표시하는 기능 입니다. 스크롤을 아래로 내리게 될 수록 점점 바(Bar)가 차오르는 페이지를 보신 적 있으신가요? 현재 친효스킨 1.17 버전 이상부터는 이러한 인디케이터가 기본으로 적용되어 있습니다. 본 페이지는 인디케이터가 미적용된 티스토리 스킨에서 세팅하는 방법에 대해서 설명하고자 합니다. HTML Script Setting 사실 복잡할게 없습니다. 그냥 이거 하나만 세팅하면 끝 입니다. 먼저 아래의 첨부파일을 다운받아주시기 바랍니다. 다운로드가 완료되었다면 한번 텍스트 파일을 열어보시기..
자바스크립트 중 하나인 제이쿼리를 활용하여 a href에 URL 링크 주소가 들어가지 않고 그냥 #을 넣었을 경우 클릭을 하게 되면 페이지 맨 위로 올라가는 현상이 있습니다. 가장 기본이 되는 현상인데 이걸 원하지 않고 그냥 클릭했을 경우 아무런 반응이 없는, 즉 페이지가 제자리에 머물러 있게 만들고 싶은 경우 입니다. 두 가지 방법으로 진행이 가능합니다. jQuery 구성가장 먼저 소개하는 방법은 제이쿼리를 이용한 방법 입니다. 이 방법의 장점은 사이트 내 모든 a href="#" 을 사용하는 링크 태그에 클릭 방지를 걸 수 있는 방법입니다. 한 마디로 광역 마법인 샘 입니다. 코드는 다음과 같습니다. 이 스크립트를 안쪽에 그대로 삽입하시면 됩니다. 별도로 세팅할 필요가 없이 아주 간편하게 적용시킬 수..
최근에 알게 되었는데 안쪽에 입력하는 애드센스 스크립트 코드가 변경 되었습니다. 다 간단하게 바뀌었군요. 기존에 사용하던 코드는 그대로 사용해도 상관 없습니다. 물론 변경해도 상관 없습니다. 그냥 저는 예전 스타일대로 사용 중 입니다. 애드센스도 잘 나오고 있고 괜히 긁어 부스럼을 만들 필요는 없으니까요. 애드센스 스크립트 코드 어떻게 바뀌었나?아래가 과거의 애드센스 승인 스크립트 코드 입니다. 스크립트가 기본적으로 두 번 사용됩니다. 다음은 최근에 변경된 애드센스 스크립트 코드 입니다. 스크립트가 한 줄로 축약되었습니다. 지금도 둘 중 아무거나 사용해도 크게 상관은 없습니다. (테스트 해 봄) 참고로 위의 애드센스 스크립트 코드를 확인하는 위치는 다음과 같습니다. 참고로 위의 스크립트에 있는 노란색 동..
이전에 전체메뉴에 대해서 한번 글을 작성한 바 있습니다. 그것보다 좀 더 간단하게 꾸밀 수 있는 방식 입니다. 스크립트 필요없이 CSS만으로도 아코디언 스타일의 메뉴를 구현할 수 있습니다. 선택자만 조금 주의해서 생각하면 생각보다 코딩을 짜는데 큰 어려움은 없습니다. MENU-1 MENU-2 MENU-3 MENU-4 MENU-5 SubMENU-1 SubMENU-2 SubMENU-3 SubMENU-4 SubMENU-5 SubMENU-6 SubMENU-7 SubMENU-8 SubMENU-9 SubMENU-10 SubMENU-11 SubMENU-12 SubMENU-13 SubMENU-14 SubMENU-15 SubMENU-16 SubMENU-17 SubMENU-18 SubMENU-19 SubMENU-20 HT..
이번 시간에는 간단한 개념을 짚고 넘어가려고 합니다. 저도 이 부분에 대해 궁금했는데 오늘 수업을 들으면서 궁금증이 해소되었습니다. HTML 코드 중 안쪽에서 존재하는 여기에서 처음 나오는 h1이 바로 선택되어지는 대상, 즉 선택자라고 말합니다. 그리고 소괄호 안에 들어가는것이 바로 적용되는 스타일 내용입니다. 예시에서는 레드 컬러로 설정되었다는것을 확인할 수 있습니다. 따라서 이 뜻은, "h1 태그를 사용한 텍스트에 한해서는 글자색을 빨간색으로 만들어라!" 라는 뜻이 됩니다. 그렇기에 실제 웹으로 출력을 해보면 이렇게 태그만 글씨가 빨갛게 적용된 것을 알 수 있습니다. 어려운 개념은 아니지요? 다음은 스크립트 (script) 입니다. 스크립트 또한 스타일을 변경하기도 하지만 주로 동적인 부분을 변경시켜..
주석이란 HTML 태그 코딩에 일종의 설명을 코멘트를 남기는 것 입니다. 제작자도 이 태그는 어떤 부분에서 어떤 식으로 적용되는 태그인지 햇갈릴수가 있습니다. 그래서 발자취를 남기는것이죠. 그것을 주석처리라고 합니다. 주석은 코딩의 설명을 위한 부분으로 실제 웹페이지에서는 노출이 되지 않습니다. 그러면 HTML 내에서 사용되어지는 일반 태그들, 그리고 스타일 (Style), 스크립트 (Script) 안에서 주석처리는 어떤식으로 할까요? 약간씩 차이가 있습니다. 위에 표시된 부분이 각 부분별 주석처리 방법입니다. 정리해 보자면 다음과 같습니다. ▶ 일반 태그 안에서의 주석 처리 /* 코멘트 */ ▶ 스타일 태그 안에서의 주석 처리// 코멘트 ▶ 스크립트 태그 안에서의 주석 처리 이렇게 사용할 수 있습니다...
[스크래치 Scratch] 논리력과 수학능력 향상 그리고 프로그래밍을 쉽게 배우기 MIT에서 개발한 이 프로그램은, 프로그래밍 이라는 다소 어렵고 복잡한 부분을좀 더 쉽게 접근하고, 이해하기 쉽도록 하려는데 목적이 있습니다.저도 잠깐 해봤는데, 오.... 노트패드에 모든 코딩을 하나하나 다 적어야 했던 그런 부분을드래그와 클릭만으로 뚝딱 (마치, 언리얼 블루프린트 같은 느낌?) 해결되니까 상당히 재밌고 신기하네요^^ 스크래치(Scratch) 라고 하는 프로그램은, 별도의 설치프로그램은 필요 없으며,사이트에 접속하여 무료가입 없어도 바로 실행 가능합니다. https://scratch.mit.edu/ 스크래치 공삭 사이트 입니다. 주소 보시면 아시겠지만, edu 라고 써있죠? 교육사이트 라는 뜻이죠.뭐..솔..