Others/티스토리 스킨 뚜따 프로젝트 (6) 썸네일형 리스트형 #5 노션처럼 티스토리에 인라인 수식을 넣어보자!!! 노션은 위처럼 수식을 $로 감싸면 수식이 예쁘게 변환이 된다.근데 티스토리는 이를 기본으로 제공하지 않는다 ㅠㅠㅠㅠㅠㅠㅠ 그래서, 직접 수식에 일일이 html 모드로 html으로 감싸주거나,아니면 스킨 자체를 편집해서, 노션처럼 감싸면 자동으로 해당 html 문을 삽입해주는 변환을 정의해줘야 한다. 당연히 후자가 더 편하고 scalable하므로, 후자를 택했고해당 내용은 아래 블로그를 보고 따라했다.https://ideaspread.tistory.com/8 [티스토리 수식 입력] LaTeX 사용머신러닝 포스팅을 하다 보니 수식을 입력해야 할 필요가 생겼습니다. 다른 포스팅들에서 여러 자료가 존재하지만 버전의 차이인지 저한테 적용되지 않는 것들이 있었습니다. 따라서 2023년 2월ideaspread.ti.. #4 bullet point(글머리 기호, 리스트)지만 인라인 코드를 넣고 싶어! 위처럼 bullet point안에 백틱으로 인라인 코드를 넣으니, 적용되지 않았다. ㅠㅠㅠㅠ그 이유는 위 css 코드에서 찾아볼 수 있었는데,`p code`는 paragraph안에 있는 인라인 코드에만 적용되고 있었고,bullet point안의 code에는 그냥 `code`가 적용되고 있었다.따라서, 위처럼 p code내용을 code에 그대로 넣어주면 해결된다. 그러나, 위 코드를 적용 시 그러나, 위 css를 적용 시, 기존의 p code또한 글씨 크기가 작아졌따..!!이는 F12로 관찰 결과, 글꼴을 적용하기 위해 p code도 code도 아닌 다른 무언가의 글씨 크기가 폰트를 위해 같이 적용된 걸로 보인다.따라서 위처럼 code에 폰트를 넣어주면 ~~~이렇게 아주 예쁘게 잘 해결대따~~~~~~~~~ #3 인라인 코드 백틱(`) 적용 [티스토리 스킨 뚜따 프로젝트] 인라인 코드가 완전 못생기게 나온다. 기본 설정이 안 되어있기 때문.ref의 블로그 글들을 참고하여, 노션에 가깝게 되도록 수정해 주었다. test.`123``abc``안녕?``$ pwd` ref. https://mingos-habitat.tistory.com/34https://jedemanfangwohnteinzauberinne.tistory.com/67 #2 본문 너비 넓히기 [티스토리 스킨 뚜따 프로젝트] 전반적인 문제상황 : 본문 너비가 너무 협소한 것 같음. 좀 좌우로 넓히고 싶음. 결과 : 만지다보니 본문 폭 자체는 지금대로 괜찮은 것 같음. 다만 글이 평행하게 왼쪽으로 살짝 이동했으면 좋겠어서, margind을 auto(가운데 정렬) 말고 수동으로 왼쪽 margin만 부여해줌으로서 해결함. 위에는 수정된 후 사진(그러나 티가 거의 나지 않았다고 한다...) *** 수정1) 쓰다보니 그냥 원래 꺼(auto로 가운데정렬한 거)가 더 괜찮은 것 같아서 그냥 다시 원상복귀함.어차피 불편하면 다시 바꾸면 되니까, 부담갖지 말고 수정하고 싶은 거 다 수정해버려~~.(기록만 잘 할것 대신!!) ***수정2) 본문의 제목 대비 왼쪽 여백을 20px에서 10px로 줄였음.이제 제목이랑 본문이랑 너무 좌우간.. #1 왼쪽 사이드바 고정 [티스토리 스킨 뚜따 프로젝트] 전체적인 문제상황 : 티스토리 왼쪽 사이드바가 고정이 아니니까 불편함. 그냥 고정이었으면 좋겠음. 문제상황 1: 사이드바를 고정하고 싶음 결과 1: 사이드바가고정됨 문제상황 2: 사이드바로 인해 음영처리 되던 게 이제는 필요가 없음.결과 2: 음영처리 사라짐 문제상황 3: 사이드바가 본문을 침범함결과 3: 침범하지 않도록 padding과 width를 줄여주고, height도 겸사겸사 늘려서 스크롤을 없앰. 문제상황 4: 메뉴바가 고정이 안됨결과 4: 이제 잘 고정됨. 최종결과 : 매우 깔쌈해진 모습. 참고자료: https://built.tistory.com/58: https://investox.tistory.com/m/7 #0 블로그 뚜따 계획 [티스토리 스킨 뚜따 프로젝트] 블로그 스킨 기본형(Poster)으로 바꾼 이유: 1. 그 전에 쓰던 Flatmint가 #1 스킨 기반이라 빠르지만 코드가 좀 어려웠음.2. 내 블로그를 내 입맛에 맞게 처음부터 끝까지 뚜따하고 싶음3. 위의 과정을 블로그에 전부 기록하고 싶은데 이전 블로그는 기록 빵꾸난게 너무 많음.html css 공부한 지 오래돼서 많이 까먹었지만복습 겸 구글링 + gpt한테 질문하면서 겸사겸사 공부하자. 앞으로의 블로그 뚜따 계획 (뚜따 완료는 취소선)1. 왼쪽 사이드바 고정2. 본문 폭 넓히기3. 본문 및 h1 및 h2h3h4... 글꼴 변경 및 글씨 크기 변경4. (위와 동일) 에 대한 위아래 margin 변경5. 글머리 기호(점 표시 및 숫자 표시 둘다)에 대한 여백 및 글꼴 및 글씨 크기 변경6. 코드블록 .. 이전 1 다음
