티스토리 페이지를 스크롤하여 내릴 때 상단에 좌측에서 우측으로 채워지는 바를 설치하기. 세 개의 코드 덩어리만 티스토리 html 편집기를 통해 추가시켜주면 된다. 첫번째, 코드 추가. 바로 위에 해당 코드를 추가해 준다. 코드 두번째, 세번째, css 에 색상 및 모양을 지정해줄 코드 추가. css 편집 페이지에서 맨 아래 해당 코드를 추가해 주었다. height 로 두께를 설정하고, background 속성으로 배경 색상과 바의 색상을 지정해 주고 투명도 또한 지정하였다. 그리고 살짝 입체적 효과를 주기 위해 backdrop-filter 로 블러 효과도 추가하였다. 코드 /* [편집] 상단 스크롤 바 추가 */ .progress-container { position: fixed; /*상단 고정*/ to..

이미지 테두리 페이지에서 이미지임을 강조하거나 은연중에 이는 다른 요소와 다름을 나타내고 싶을 때가 있다. 이것을 위해 티스토리 css 를 변경하여 해결할 수 있다. 일단 이미지가 있는 자신의 블로그 페이지를 띄우고 빈 여백에 마우스 우클릭을 하여 inspect (검사) 를 켠다. 그러면 오른쪽에 검사 창이 뜨는데 이제 관련 코드를 픽하여 변경 테스트를 해볼 것이다. 왼쪽 위의 네모 안 마우스 포인트 버튼을 클릭하면 왼쪽 창에서 해당 요소를 집어낼 수 있는데, 이미지를 클릭하여 해당 요소를 찾는다. 오른쪽 창의 Elements 를 통해 관련 html 코드가 선택 및 펼쳐진 것을 확인할 수 있고, 아래쪽 Styles 에서 css 에 해당하는 코드들이 나타난다. 제일 위에 해당하는 #tt-body-page ..

코드블럭 테이블 라인 제거 highlight.js 와 라인 번호를 적용하였는데 원치 않게 테이블 라인이 딱 생기게 되었다. 이것을 제거하여 깔끔하게 만들어 보자. 위 와같이 라인 번호, 코드가 엑셀 행렬 형태로 나뉘어 표시가 되었다. 이를 수정하기 위해서 티스토리 html 편집기 -> css 에서 ".article-view table" 를 찾아 .article-view table .article-view > table 와 같이 ">" 를 다섯군데 추가 시켜 article_view내에 있는 table에만 css적용 되도록 한다. .article-view > table { border: 1px solid #dadce0; border-collapse: collapse; } .article-view > tabl..

배경과 제목이 겹쳐 가독성 떨어짐 티스토리에서 제공되는 기본 스킨 중 Odyssey 를 수정하여 사용하면서 글의 제목에 표시되는 배경이 너무 선명해 겹쳐 보이는 현상을 없애기 위해 배경에 blur effect 를 적용하였다. 아래의 두 이미지는 그 블러 효과를 적용하기 전과 후이며, 제목의 가독성이 훨씬 좋아진것을 볼 수 있다. @ blur 적용 전. @ blur 적용 후. CSS 블러 필터 적용 효과를 적용하기 위해서는 계정의 톱니바퀴를 눌러 블로그 관리 설정에 들어간 후, 메뉴중 꾸미기 항목의 스킨 편집으로 들어가, html 편집, 그리고 css 에 들어가 코드가 있는 흰 공간을 한번 클릭하고 CTRL+F 로 검색창을 띄워 /* article-header 를 검색, 이곳에서 헤더에 관한 성질을 바꿀 ..