My Tech Blog (편집)

✨커스텀 전 기본 헤더 티스토리에서 hELLO 스킨을 적용하고 게시글을 발행 한 뒤 헤더 부분의 모습이다. 썸네일로 설정한 이미지가 blur 처리되면서 헤더 배경으로 오고, 제목이 가운데로 온다. 그리고 아래는 글 발행시간과 해당 글의 카테고리가 한 줄로 나오는데, 카테고리명에는 태그에 href 속성이 걸려 있어서 클릭하면 해당 카테고리로 넘어 간다.  🧞‍♀️헤더 커스텀 완성작  이번 포스팅에서 커스텀할 내용은 크게 두 가지이다.헤더 좌측 상단에 아이콘 추가카테고리 이름에 마우스 올리면 색상이 변하는 hover 효과 주기물론 위 캡처처럼 발행일, 카테고리명의 위치를 카테고리명이 먼저 나오게 바꾸어 줄 것이다.카테고리에 hover 효과를 주면서 배경에 박스가 생기게 되어  앞으로 나오는 것이 더 낫기 ..

이번 컨텐츠에서는 티스토리 블로그 마우스 커서 변경하는 법 & 마우스 이펙트 추가하는 법 소개 해 드리려고 합니다.블로그 특성상 모바일에서는 안 되고 PC버전 블로그에서만 보여지는 기능입니다~!svg 아이콘을 받아서 css 추가 해 주는 법도 있지만 오늘은 정말 간단하게 소스만 복사해오면 바로 쓸 수 있는 방법 알려드리겠습니다. 1. 마우스 커서 모양 바꾸기 아래 링크에 접속해서 마음에 드는 커서를 선택한다.  Free Cursor Downloads - Cursors-4U.comDate: 16 Jan 2024, 22:00 By Tor With 11 Comments All commenting and comments have been removed from the cursor pages. Too many n..

티스토리 블로그는 html/css/js로 얼마든지 커스텀 할 수 있기 때문에 폰트도 수정 가능해요 오늘은 구글 폰트에서 제공하는 무료 폰트를 이용해서 코드블럭의 글씨체를 바꿔보겠습니다.  https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com  저는 Montserrat 체가 마음에 들어서 이걸로 골랐어요 ㅎㅎㅎ원하는 폰트 정했으면 화면 상단 Get Font 클릭해주세요.그러면 1 font family selected 화면으로 넘어오는데요 Get embed code를 클릭해주세요  web용 선택 해 주고 Copy..

코드블럭에 인라인 넘버 적용하기 1. html편집 블로그 관리 > 스킨 편집 > html편집  바로 위쪽에 아래 코드를 복사 붙여넣기 해 준다.   맥북의 경우 command + F, 윈도우는 ctrl + F 해서 /body 검색 해주면 바로 찾을 수 있다.or 스크롤 쭉 내려서 찾아주셔도 됩니다 ㅎㅎ   2. CSS 편집위 작업이 끝났으면 CSS 들어가서 아래 코드 추가 해 주자.#content에 이어서 쭉 붙여줘도 되지만 저 같은 경우 커스텀한 것들은 주석달아서 맨 밑에 붙여 넣어 주었어요~/* 코드블럭 인라인 넘버 적용*/#content .hljs-ln-numbers { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-..

이미지가 본문 폭을 벗어나는 문제  티스토리에서 hello 스킨을 적용해서 잘 쓰고 있는데, 이 스킨은 이미지가 본문 폭을 벗어났을 때 줄여주는 기능은 탑재하고 있지 않다. 그래서 블로그 스킨편집 창에서 손을 좀 봐 주어야 겠다고 생각했다. 일단 티스토리에서 width가 860보다 더 큰 이미지는 에디터에서는 무조건 860으로 보이게 해 놓은 거 같은데...글을 발행하면 최대크기가 1100으로 되어 있는지 1100까지도 나온다 1. 본문 쪽 맞춤 기능우선 스킨편집에서 html/css를 수정하지 않아도 본문 폭 맞춤 기능을 사용하면 이미지가 줄여지기는 한다.  하지만 에디터로 글을 작성할 때 이미지 크기랑 실제로 글을 발행하고 나서 보여지는 크기가 다르기 때문에 글 작성중에는 실제로 이미지 크기가 어느 정..

맥북을 다크모드로 설정 해 놓았더니티스토리 블로그도 다크모드로 보이는 현상때문에 골치가 아픈데요. 티스토리는 다크모드에 최적화된 블로그는 아니기 때문에다크모드로 보는 경우 글자가 반전되서 보이거나, 가독성이 떨어지는 경우가 있습니다. 그래서 애초에 다크모드가 작동 안되게 하는 법을 알려드리겠습니다. 제가 쓰고 있는 블로그 스킨은 다크모드 동작 태그를 포함하고 있어서 해당 태그를 삭제 또는 주석처리 하는 방식으로 다크모드를 없앨 수 있는데요.블로그 스킨 종류에 따라 해당 태그 위치가 다를 수도 있습니다. 1. [블로그 관리] > [꾸미기] > [스킨편집] 2. [html 편집] 이렇게 무시무시한 경고창이..html 코드 수정할 때는 다른 코드 안 건드리게 절대 조심하세요. 티스토리 운영자 : 건들다 망하면..

✨사진에 다양한 필터 적용하기✨ 안녕하세요. 오늘은 vscode로 html/css 만을 이용해서 사진에 필터를 적용하는 법을 배워봐요. 대각선, 흐림, 회색조, 세피아 네 가지로 연출해보는 다양한 사진 꾸미기!! 지금부터 시작해 볼까요 📌 1. 대각선을 활용한 빗금무늬 필터 사진에 대각선 필터를 적용해주면, 아날로그 느낌을 연출 할 수 있습니다. 또 카피라이팅 할 때 문구를 배치하기 위한 배경으로 사용하기도 좋아요. 가상요소인 ::before로 대각선을 만들고, 사진 위에 포갠 디자인입니다. ☑️ HTML 코드 ☑️ CSS 코드 📌 2. 도트 필터 점 무늬 필터로 화질이 낮은 사진에도 재미있는 효과를 줄 수 있어요. ☑️ HTML 코드 ☑️ CSS 코드 📌 3. 흑백사진 만들기(grayscale) gra..

✨사진에 프레임 추가하기 & 액자 만들기✨ 안녕하세요. 오늘은 가상요소로 사진에 대각선 프레임 추가하는 법, 모서리를 액자처럼 꾸미기(+ 응용 : 모서리를 테이프로 붙인 것처럼 꾸미기) 배워봐요.   📌 1. 대각선 프레임 만들기 사진에 입체감을 줄 수 있는 대각선 프레임 디자인이예요. 의사요소 또는 가상요소라고도 부르는 ::after이용해서 만들어볼게요. 준비 되셨나요?   ☑️  요소를 둘러싼 테두리에 이미지를 지정하는 border-imageborder-image-source: repeating-linear-gradient( 45deg, /* 45도 회전, 대각선의 기울어진 각도 */ #ea987e 0px, #ea987a 2px, /* 선 굵기와 색깔 지정 */..