# 주저리주저리/블로그 업데이트 검색 결과
14 개의 검색 결과가 있습니다.
# 주저리주저리/블로그 업데이트

[블로그 디자인 1.0.12] 블로그 상단 헤더 고정시키기 + 하단 프로그레스바 설정

어제 새벽에 CSS의 position 속성을 공부하면서 새롭게 알게 된 sticky를 블로그에 적용시켜봤습니다. 너무나도 간단해서 허무할 수준..이지만, 헤더를 고정시키면서 프로그레스바와 겹치는 상황이 발생했습니다. 그래서! 주변에 조언을 구해서 프로그레스바를 하단으로 내렸습니다 ㅎㅎ 기존에 사용하던 cdn으로는 커스터마이징이 힘들어서, 로직을 아예 바꿔버렸습니다 ㅠ 바로 보러가시죠 :) 목차 0. 블로그 상단 헤더 고정 위에서 설명한대로 헤더영역의 position을 sticky로 바꿔주면 끝입니다. 다만 주의해야 할 것은 sticky속성이 모든 브라우저에서 사용되는 것은 아니기 때문에, 별도의 polyfill 과정이 필요할 수 있다는 점을 생각하셔야 합니다! (IE와 사파리의 문제이지만, 해당 이슈에 ..

2022. 2. 27. 14:56
# 주저리주저리/블로그 업데이트

[블로그 디자인 1.0.11] [미완] 타이틀 폰트에 preload 적용하기

예전부터 눈에 너무 거슬렸던 폰트변화..를 고쳐보려고 합니다. 브라우저를 열고 처음으로 접속하면 타이틀의 폰트가 따닥하고 변합니다.. 한번 접속한 다음부터는 캐싱이 되는지 정상적으로 뜨는 것 같던데, 그래도 불-편~ 목차 0. 바로 수정해보기 괜히 거창하게 적었긴 한데, 정말 쉽게 수정할 수 있습니다. 늘 그렇듯이 HTML 편집에 들어갑니다. 폰트를 가져온 부분을 찾습니다. 저는 내에서 폰트를 href로 받아옵니다. link 태그에 rel속성으로 preload를 추가해줍니다. as속성은 style, href는 폰트 주소를 넣어주면 됩니다. 그리고 헤드의 맨 윗부분에 넣어줍니다. (저는 css파일도 preload 처리를 해줬습니다!) 여기까지 한 후에 적용을 눌러주면, 끝입니다. 쉽죠?! 1. 자세히 알아..

2022. 1. 23. 00:13
# 주저리주저리/블로그 업데이트

[블로그 디자인 1.0.10] 글씨체 바꾸기

맑은 고딕체를 계속 보다보니 눈이 아프더라구요?! 블로그를 보시는 분들이 조금 더 편안하게 보실 수 있도록 글씨체를 수정해보려고 합니다! 목차 0. 글씨체 바꾸기 이번에도 환경설정 > 스킨 편집 탭에 들어갑니다. HTML 편집 버튼을 눌러줍니다. CSS 탭으로 들어갑니다!! ctrl+F를 눌러서 'sans-serif'을 검색해줍니다. 그러면 여러 위치가 뜨는데, body,html 부분을 찾아서 sans-serif 앞에 원하시는 폰트를 넣어주시면 됩니다! 저는 Noto Sans KR로 바꿔보도록 할게요! 비슷한 방식으로 여러분들이 원하는 위치의 글씨체를 바꿔줄 수 있습니다! 저는 다른 부분들도 Noto Sans KR로 통일시켜줬습니다! (Font awesome 5 Free가 붙은 친구들은 건들지 않았습니다..

2021. 9. 27. 01:14
# 주저리주저리/블로그 업데이트

[블로그 디자인 1.0.9] 프로그레스바 만들기

본문 글을 확인할 때, 지금 얼마나 읽었는 지 스크롤바를 통해 파악을 할 수 있는데요! 추가로 상단에 얼마나 읽었는 지를 나타내는 프로그레스바가 있으면 예쁘지 않을까라는 생각을 해서 추가를 해 보려고 합니다! 목차 0. 프로그레스바 추가하기 아주아주 익숙하게 환경설정 > 스킨 편집 탭에 들어갑니다. HTML 편집 버튼을 눌러줍니다. 의 바로 위에 아래와 같은 script를 추가해줍니다. (script형태이기 때문에 위치는 상관이 없습니다!!) 여기서 우리가 바꿀 수 있는 내용은 height와 color입니다. height에 따라 바의 굵기가 바뀌고, color에 따라 바의 색깔이 바뀝니다. 1. 프로그레스바 원리 우리가 HTML에 작성했던 코드에는 script문이 2개가 있죠? 첫 번째 script문은 ..

2021. 6. 30. 01:09
# 주저리주저리/블로그 업데이트

[블로그 디자인 1.0.8] 글 상단에 광고 띄우기

이번에는 글 본문 상단 광고를 조정해보려고 합니다! 기존 티스토리의 본문 상단 광고는 크게 한 줄로 만들어집니다. 이번엔 이 광고를 애드센스 내에서 수작업으로 두 개로 쪼개서 나오도록 만드려고 합니다! 0. 광고 만들기 이번에도 구글 애드센스에 접속합니다. 왼쪽 탭에서 광고 > 개요 에 들어갑니다. 광고 위치를 조정할 때는 상단 탭의 사이트 기준에서 했었죠? 이번에는 광고 단위 기준 > 디스플레이 광고로 들어갑니다. 제목을 설정하시고, 광고 크기는 반응형으로 설정하시고 만들기 버튼을 눌러줍니다. 그럼 HTML 코드가 뜨는데요, client값은 현재 여러분의 구글 애드센스 아이디에 할당된 것이고, slot값은 이 광고에 할당된 값입니다. 나머지 코드는 모두 동일하기 때문에, slot값만 우선 복사해둡니다...

2021. 6. 29. 22:39
# 주저리주저리/블로그 업데이트

[블로그 디자인 1.0.7] 티스토리 광고 위치 조정

안녕하세요! 쏘코입니다. 그동안 블로그 업그레이드보다는 컨텐츠 업로드에 집중을 했습니다. 그리고 그 사이에 구글 애드센스도 수락을 받을 수 있었습니다. 광고 위치를 자동으로 설정하고 약 한달정도 시간이 지났습니다. 그러던 중 마음에 안드는 부분이 하나 생겼는데요, 바로 광고의 위치였는데요. 상단 네비게이션바 안에 광고가 생성되는 것이 마음에 들지 않았습니다. 이렇게 네비게이션바 안에 광고가 위치하게 되면 우측 햄버거바를 누르면 햄버거바가 광고에 가려서 정상적으로 작동을 하지 않더라구요.. 그래서 오늘 해 볼 것은 바로!! 광고의 위치 수정이 되겠습니다 😄😄 목차 0. 구글 애드센스 방문 먼저 이 문제를 해결하기 위해서는 티스토리가 아닌 구글 애드센스 홈페이지로 이동해야했습니다! 우선 구글 애드센스의 광고..

2021. 6. 29. 16:14