CREATIVE

'Tistory' 카테고리의 글 목록

이매지네이션 라이브러리 티스토리 스킨 검색창(Search) 만드는 방법 티스토리 스킨 검색창 만드는 방법은 티스토리에서 사용할 수 있는 치환자를 통해 구현할 수 있다. 간편하게 아래와 같이 s_search를 통해 구현이 가능하며, input태그를 활용하여 적용할 수 있다. 검색창(Search) 적절한 위치에 적용하면 되는데, 당연히 스타일시트도 지정해줘야 하므로 적당한 위치에 적용시키고 스타일을 지정해주면 된다.
이매지네이션 라이브러리 헤딩 태그(Heading Tags)별 중요도 Heading Tags의 올바른 사용방법 Heading Tags는 웹페이지의 SEO에 매우 중요한 요소 중 하나입니다. 따라서 짜임새있는 웹페이지를 구성할 때, 사이트 전체를 둘러싸는 태그인 H0~H1태그부터 글의 제목을 나타내는 H2태그 그리고 본문에서 소주제로 사용할 수 있는 H3태그까지 적절한 위치에, 적절한 용도로 사용하는 것이 SEO최적화의 지름길입니다. 따라서, 제목을 제외하고 본문에서 올바른 Heading 태그를 사용하려면 위의 쓰임새에 따라 사용하기를 권장한다. H3태그는 소주제(Subtitle)을 표현할 때 사용하고, H4태그는 Highlights 부분을 나타낼 때 사용하면 더욱 좋다. H5와 H6태그는 잘 사용하지는 않지만, 꼬리말 부분에 종종 사용하는 경우가 있다. 티스토리에서의 He..
이매지네이션 라이브러리 티스토리 SEO에 대한 <strong> 태그의 이슈 문제 티스토리에서 태그가 적용되지 않는 이슈 이전에 작성했던 글 중에서 태그와 태그에 대해서 알아봤습니다. 시각적인 효과에 대한 결과물은 같지만, HTML 5에서 강조의 역할로 쓰이는 태그의 활용에 따라 로봇이 텍스트를 어떻게 인식하는지에 대한 차이를 설명했습니다. b태그와 strong태그의 차이 태그 사용에 있어서 b태그와 strong태그의 보여지는 결과는 같습니다. 티스토리 에디터에서도 컨트롤 + B를 누르면 글씨가 굵어지면서 해당 적용 부분이 강조되는 것을 확인할 수 있습니다. 그렇�� creativestudio.kr 강조를 원하는 부분에 있어서는 태그를 사용하는 것이 좋습니다. HTML5 문서에 따르면 태그는 해당 문단에서 중요도가 높은 부분에 넣는 것인데, 보통은 검색에 노출시키고자 하는 키워드에 사..
이매지네이션 라이브러리 티스토리 저품질 확인 방법 및 대응 티스토리 방문통계 저품질은 검색엔진에서 해당 게시물이 누락되는 현상을 말합니다. 네이버와 다음, 구글 등 대표적인 검색엔진 포털사이트에서 나의 글이 검색되고 있는지 확인하면 저품질을 쉽게 확인할 수 있습니다. 가장 쉬운 방법으로는 site:나의 도메인으로 검색을 하게 되면 나의 도메인으로 작성한 글들이 정상적으로 노출이 되고 있는지 확인할 수 있습니다. 해당 게시글이 정상적으로 노출이 되고 있는지 확인하려면 게시글의 URL로 검색해보면 쉽게 알 수 있습니다. 구글에서 확인하기 다른 검색엔진보다 제일 중요하게 생각하는 것이 바로 구글 검색포털입니다. 가장 유입이 많이 되기도 하고 네이버에는 네이버블로그라는 영역이 자리잡고 있으니, 실질적으로 사이트의 SEO 최적화 여부를 확인하기 위해서는 구글이 가장 중요..
이매지네이션 라이브러리 티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토리의 디자인이 완성됩니다. 이 문서는 스킨에서 사용하는 치환자에 대해 설명합니다. 파일구조 SKIN ─┬─ index.xml ├─ skin.html ├─ style.css ├─ preview.gif ├─ preview256.jpg ├─ preview560.jpg ├─ preview1600.jpg └─ images ─┬─ script.js ├─ background.jpg ├─ background.jpg └─ background.jpg index.xml 스킨 정보 파일로 자세한 내용은 '스킨 정보 파일' 장에서 다룹니다. skin.html 스킨의 메인 템..
이매지네이션 라이브러리 티스토리 HTML 스킨편집 단축키 티스토리 스킨 편집을 하다가 단축키가 생각이 안나서 단축키 정보를 보려고 했는데, 생각보다 내가 몰랐던 기능들이 있었다. 줄 이동 기능이나, 모두 변경 기능 외에 변경, 검색 기능은 당연히 자주 쓰는 기능인데, 미리보기 새로고침이나 저장 기능은 아직 손에 익숙하지 않다. 그리고 더 충격적인 것은 드래그 기능도 가능했는데, 일반적인 마우스 드래그가 아니라 Alt(알트키)를 누른 상태로 왼쪽 클릭으로 드래그를 하면 줄을 모두 드래그 해서 선택할 수 있다. 이외에 자동 들여쓰기 기능 등을 사용하는 것도 좋은데, 어차피 개발자도구로 CSS 등을 수정할 것이라면, Format 기능으로 코드를 깔끔하게 정리할 수 있다. 이외에 줄 삭제하는 기능도 익숙해지면 매우 유용할 것 같고, 전반적으로 꼭 필요한 기능들이 잘 ..
이매지네이션 라이브러리 티스토리 Fontawesome 최적화 적용 및 사용방법 먼저 CDN을 통해 외부로 불러와서 적용하는 방식은 다소 느릴 수 있기 때문에 티스토리 서버에 직접 업로드하여 사용하는 것이 가장 빠르고 편합니다. 만약 직접 설정하는 것도 귀찮다 하시는 분들은 CDN 주소를 통해 외부 파일을 불러와서 웹사이트에서 아이콘폰트를 적용시키면 되겠습니다. (1) 외부 CDN을 이용하여 적용하는 방법 CDN Fontawesome (The iconic SVG, font, and CSS toolkit) font-awesome - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites! font-awesome - The iconic SVG, font, and CSS toolkit - cdnjs..
이매지네이션 라이브러리 티스토리 공백 &nbsp; 현상과 대처방법 현상 티스토리에서 외부글을 복사 붙여넣기 하게 되면 공백 부분이 Space가 아닌 로 표현된다. 아마 이걸 검색해서 이 내용을 보고 있는 분들은 때문에 고통받고 있을테니, 현상에 대해선 간단하게 정리한다. 해결방법 해결방법으로는 일단 크로미움 기반의 웹브라우저를 쓰지 않으면 된다. 구글 크롬 또는 네이버웨일등에서 복사 붙여넣기를 하면 발생하기 때문에 이미 웹브라우저에서 사장되어 버린 구시대의 유물인 IE를 쓰면 이 문제를 해결 할 수 있다. 이 현상은 해결하겠지만, 많은 것을 포기해야하는 것이다. 또 다른 해결방법 굳이 붙여넣기를 해서 글을 작성해야한다면 아래와 같이 임시방편으로 대처할 수 있다. TISTORY SEO라는 내용을 작성하면 에디터에서는 이렇게 보일텐데(복붙의 경우), 이런 경우에는 처음부터..
이매지네이션 라이브러리 티스토리 유튜브 링크 영상 삽입 안될 때 방법 간결하게 쓰는 티스토리 미세TIP 티스토리에서 유튜브 영상을 첨부할 때, 유튜브 링크를 첨부만 하면 되지만 가끔 회색 박스만 뜰 뿐 제대로 영상 소스를 불러오지 못하는 현상이 나타난다. 성격이 급한 나는 이러한 현상을 해결하기 위해서 여러가지를 해봤는데, 가장 쉬운 방법은 유튜브 영상의 공유버튼에서 소스를 긁어오는 방법이다. 이전부터 있는 방법이지만, 소스를 불러오면서 몇 가지 수정해줘야 하는 부분이 있다. 위와 같이 동영상 퍼가기를 통해서 소스를 가져오면 되는데, 문제는 영상의 사이즈가 맞지 않다는 것이다. 각 티스토리 스킨의 본문 사이즈에 맞게 수정해주면 되는데, 나의 경우에는 가로 사이즈가 860px이 되어야 풀 사이즈로 적용되므로, 같은 비례인 860x483px로 조절해서 소스를 긁어왔다. 바로 ..
이매지네이션 라이브러리 티스토리 파비콘 업데이트 새로운 티스토리 파비콘을 소개합니다. 이번에 조금 더 직관적인 느낌으로 사이트를 운영하고자 파비콘으로 사용할만한 디자인을 조금 찾아봤는데요. 깔끔하고 예쁜 것 같아서 지금의 파비콘을 사용하였습니다. 위의 사이즈는 아이콘으로 적용하기에 딱 좋은 64px 사이즈의 레이어 이미지입니다. 위의 파일은 압축파일로 파비콘이 들어있는데요. 파비콘 파일은 티스토리 파일 업로드가 안되서 압축파일로 저장했습니다. 파비콘은 아이콘 파일인 (.ico)파일로 되어 있고, 티스토리 블로그 설정에서 쉽게 적용할 수 있습니다. 새로운 파비콘 디자인이 마음에 들어서 당분간은 이 파비콘으로 설정해서 사용하게 될 것 같습니다. 파비콘은 다이나믹 파비콘 생성 사이트에서 쉽게 생성이 가능합니다. (이미지.png → 파비콘.ico)
이매지네이션 라이브러리 CSS 속성선택자 동일 클래스명 일괄선택 예를 들어, 내가 어떤 타입의 클래스를 일괄 선택하고자 할 때는 속성선택자를 사용하면 된다. [class^="클래스명"]와 같은 원리로 카테고리에서 외부링크 부분만 적용하고 싶을 때는 li[class^="t_menu_link_"] > a로 일괄 및 다중선택이 가능했다. 내가 이거 알아내려고 몇 시간동안이나 뼈빠지게 CSS선택자 공부했다. CSS 속성선택자 사용방법 사실 같은 자식 내에 있는 리스트 타입이였으면 그냥 nth-child(even) 또는 (odd)로 하거나 (3n+1) 이런식으로 구현이 가능했을 텐데, 문제는 자식 개체가 모두 독립적인 리스트 타입을 가지고 있어서 위의 방법이 적용이 안되는 것이였다. 방구석 웹디자이너가 이런 사실을 제대로 알고 있을리가 없다. 그래서 연구하고, 또 연구한 결과..
이매지네이션 라이브러리 앵커버튼 만들기 : 티스토리 편 앵커버튼은 무엇인가? 앵커버튼은 내가 생성한 버튼 형태의 이미지를 클릭했을 때, 페이지 내에서 해당 섹션으로 이동하는 것을 말한다. 방문자가 해당 컨텐츠를 쉽게 찾을 수 있어 잘 사용하면 유용하다. 결과적으로는 내 사이트에서 내가 컨텐츠 보기 편하게 하기 위해서 자주 만들고 사용하기는 하는데, 일종의 간편한 순간이동 장치라고 생각하면 좋다. 만드는 방법은 아주, 아주아주 간단하다. 이동할 이미지를 만들고, 이동할 이미지의 주소를 해당 섹션 값의 이름을 작성한다. 즉, 쉽게 이야기하면 이동할 위치를 지정해놓는 것이다. 이렇게 지정한 위치를 내가 인식하기 위해서는 해당 위치에 이름을 만들어줘야한다. 예를 들어, 우리 집 앞에 슈퍼를 '앞마당슈퍼'라고 이름을 지어주고 앵커버튼을 만들고 싶다면 가 될 것이다. ..
이매지네이션 라이브러리 티스토리 글쓰기 단축키 정리 문단 스타일 스타일 PC Mac 제목1 (h2) Alt+Shift+2 Ctrl+Alt+2 제목2 (h3) Alt+Shift+3 Ctrl+Alt+3 제목3 (h4) Alt+Shift+4 Ctrl+Alt+4 제목4 (h5) Alt+Shift+5 Ctrl+Alt+5 제목5 (h6) Alt+Shift+6 Ctrl+Alt+6 문단3 (p) Alt+Shift+7 Alt+Shift+7 글자 스타일 스타일 PC Mac 굵게 Ctrl+B Command+B 기울임꼴 Ctrl+I Command+I 밑줄 Ctrl+U Command+U 기타 액션 액션 PC Mac 전체선택 Ctrl+A Command+A 실행취소 Ctrl+Z Command+Z 다시실행 Ctrl+Y / Shift+Ctrl+Y Command+Y / Shift+Com..
이매지네이션 라이브러리 티스토리 스킨 슬라이드 자동 넘김 스크립트(Script) 간단한 스크립트 코드를 작성하여 메인 슬라이드 커버 요소를 자동 넘김으로 구현할 수 있습니다. 바로 위와 같이 커버 슬라이드 부분을 자동으로 넘김다는 명령어입니다. 4000는 4초를 의미합니다. 시간 간격을 조절하고자 할 때는 1/1000 기준으로 시간을 변경해주세요. .cover-slider가 기존 슬라이드 리스트의 클래스값이고, .next는 다음 버튼을 의미합니다. .trigger는 이를 클릭("click")하여 해당 동작을 작동시키는 것을 의미합니다. 최근에 제작한 사이트의 예시를 아래의 이미지에서 확인해보세요. 저는 4초로 설정하여 자연스럽게 넘어가는 것을 확인할 수 있었습니다. 사이트를 훨씬 세련되고 다채롭게 만들어주는 메인 슬라이드 기능은 사이트를 만드는 사람들에게는 가장 핵심적인 기능입니다...
이매지네이션 라이브러리 티스토리 애널리틱스 업데이트 이전보다 훨씬 친절하게 개편된 애널리틱스, 이제는 여러 부분에서 네이버블로그를 거의 다 따라잡았다고 생각이 된다. 그 정도로 이전부터 문제점들이 하나하나 개편되고, 완전 뜯어고치는 식으로 되고 있는데, 게다가 구글 애드센스까지 가능하다 보니까 전문적으로 블로그를 운영하고자 하는 사람들은 네이버블로그에서 점점 티스토리로 넘어오는 것 같다. 다만, 이전에 문제였었던 네이버 애드포스트수익도 생각보다 꽤 되고, 기본적으로 같은 노력이라면 티스토리보다는 네이버 블로그가 방문자가 더 많기도 하다. 다만, 네이버블로그의 경우에는 저품질 등의 문제가 항상 발생하고, 여러 문제점들이 지속적으로 발생하기 때문에 단단하고 안정적으로 블로그를 운영하고자 하는 사람이라면 티스토리가 더 낫다고 본다. 이번에 개편된 티스토리 애널..
이매지네이션 라이브러리 티스토리 글 쓰기 이미지 업로드 오류 「임시 해결방법」 티스토리로 글을 쓰다가 나처럼 글을 먼저 쓰고 관련된 이미지를 업로드하는 방식과 이미지를 업로드하고 그 아래에 내용을 적어가는 방식을 함께 사용하는 사람들이 있을 것이다. 네이버 블로그나 티스토리 둘 다, 이미지를 업로드하다가 오류가 발생하곤 한다. 티스토리의 경우에는 임시저장이 잘 안 되는 경우가 있어서 글을 쓰다가 글을 통째로 날려버린 경험이 한두 번이 아니다. 그럴 때는 그 시간이 아깝기보다는 다시 똑같은 내용을 적을 수가 없어서 마음이 아프게 된다. 이미지를 업로드하다보면 이미지 업로드 상태에서 멈추는 경우가 자주 발생한다. 이럴 때는 글을 먼저 업로드 한 다음에 수정 버튼을 눌러서 이미지를 마저 업로드하는 것이 최선의 방법인데, 문제는 이미지 업로드 상태에서 새로고침을 하거나 뒤로 가기를 누르면..