suyanado
'웹' 카테고리의 글 목록

웹/HTML,CSS

티스토리 파비콘 만들고 적용시키기 (적용 안되는 이유는?..)

티스토리를 운영하다 보니 본격적으로 블로그를 꾸미고 싶은 욕구가 마구 들었습니다.저는 아이콘을 좋아하는데, 예전 네이버 블로그 퍼스나콘을 기억하시나요?지금은 사진설정이 가능하지만 10년 전에는 퍼스나콘으로 자신을 표현했었습니다. 그래서 아이콘 정하느라 한두 시간을 쓴 적도 있었지요. 파비콘은 구글 검색이나 북마크, 사파리 즐겨찾기에서 내 블로그 주소 옆에 보이는 아이콘입니다.검색시 눈에 들어오는 아이콘이 있다면, 유저들의 클릭을 유도하기도 좋겠지요. 그래서 구글검색을 하면 제 블로그의 아이콘이 보이도록 적용해보록 하겠습니다. 먼저 아이콘을 만들어야 하는데요, 두 가지 방법이 있습니다. favicon.io 사이트 이용favicon.io 사이트는 기본적인 틀은 제공하며 텍스트만 입력하면 손쉽게 파비콘을 만들..

웹/HTML,CSS

티스토리 앱에서 스킨 오류 문제 해결.. (redirect.js 문제)

우연히 티스토리 앱을 설치했다가 아래 화면을 보게 되었습니다.스킨의 페이지 로딩화면이 계속 나올 뿐 포스트 내용이 보이지 않았습니다.분명 pc나 모바일에서는 제대로 보이므로 서버 문제는 아니고 스킨의 문제라고 생각했습니다. 혹시나 해서 손가락으로 화면을 축소해 보니 아래와 같이 페이지는 제대로 로드되었지만 로딩화면이 사라지지 않는다는 것을 확인했습니다.그래서 html css코드에서 로딩 화면 시간을 수정 해보거나, 혹시나 티스토리 정책이 바뀌게 되어서 오류가 생긴 걸까 확인해 보았지만 모두 아니었습니다.  원인은 바로 처음 블로그를 만들 때 설정해 둔 모바일에서 접속 시 pc버전 url로 리다이렉트 되게 설정해 둔 게 문제를 일으킨 것이였습니다.티스토리는 모바일에서 블로그에 접속할 때 기본적으로 모바일웹..

[티스토리] clipboard.min.js 가 안될 때 이유 중 하나..

오랜만에 티스토리에 들어왔다 코드블록 클립보드 복사가 안되는 것을 발견했습니다. 바로 위 버튼이지요 copy버튼을 클릭하면 자동으로 복사를 하도록 해 놨는데 클릭해도 복사완료라는 메세지만 뜰뿐 붙여 넣기가 안 되는 것입니다. 이런 식으로 출처만 나와버려서 저는 처음에 제가 설정해뒀던 본문 복사 드래그 방지 때문에 안되는 걸까 생각이 들어 스킨을 설정하기 이전으로 돌려보았습니다. 그래도 안되길래 티스토리에서 정책이 바뀌어서 이전에는 제대로 적용 되었던 코드가 사용 불가능하게 된 걸까 해서 찾아보았지만 그것도 아니었습니다. 뭐가 잘못된 걸까 싶어서 Hoxy.. 설마 복사 시 블로그 출처를 자동으로 넣어주는 플러그인이 문제일까 싶어서 해제해 보니 바로 되는 겁니다.... 티스토리 관리페이지 - 플러그인 메뉴의..

웹/HTML,CSS

[CSS] 이미지에 그림자 넣기 ( 그림자 코드 디자인 예제 공유)

저는 주로 포스팅할 때 스크린샷 위주의 이미지를 사용하는데요.사진이 하얀색, 블로그배경색도 하얀색이라 그 둘의 경계가 구분되지 않아 포스팅을 읽을 때 사진에 집중이 약간 떨어지는 느낌을 받았습니다. 그래서 사진은 사진이다 딱 구분을 하기위해 사진에 그림자를 넣어보기로 했습니다. css의 box-shadow 속성을 사용합니다. box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px 3px; /*색상(rgb코드,rgb코드,rgb코드,투명도) 수평오프셋,수직오프셋,흐림,확산*/수평 오프셋 : 그림자의 좌우 위치를 설정수직 오프셋 : 그림자의 상하 위치를 설정흐림 : 그림자의 가장자리가 선명 - 흐림 정도를 설정확산 : 그림자의 넓이를 설정그런데 위 처럼 한줄로만 그림자를 만들면..

웹/HTML,CSS

[티스토리] hello 스킨 사용자에 맞게 수정 하기

hello 스킨을 사용하면서 수정했던 부분들을 모아보았습니다. 표의 테두리 보이게 하기 글머리 기호 다음줄 자동 들여 쓰기 로딩화면 없애기 또는 수정하기 1. 표의 테두리 보이게 하기 헬로스킨은 기본적으로 표의 테두리가 bottom에만 테두리가 실선으로 세팅되어 있습니다. 모든 테두리를 실선으로 보이게 수정을 했습니다. 스킨편집 -> CSS에 들어가 'td'로 검색을 합니다. #content. contents_style table td, th의 border-bottom-width: 1px; 부분을 주석처리하거나 지웁니다. 다음, border-width 값을 1px로 바꾸어 줍니다. 적용 후 새로고침을 하면 모든 테두리가 다 보이는 것을 확인할 수 있습니다. 다크 모드에서도 잘 적용됩니다. 2. 글머리 기..

상단으로