본문 바로가기

code block4

[Tistory] 티스토리 스킨 편집의 기초 - HTML, CSS, JavaScript [개요] 티스토리 블로그는 개인 및 기업의 다양한 콘텐츠를 공유하는 데 매우 유용한 플랫폼이다. 블로그의 시각적인 요소는 방문자들에게 강력한 인상을 남기며, 스킨 편집은 그 중에서도 중요한 역할을 한다. [기본 개념 이해하기] HTML HTML은 웹 페이지의 구조를 정의하는 마크업 언어이며, 웹페이지 내 요소들의 배치와 구조를 결정하고 웹브라우저가 이해하고 해석하게 사용자에게 시각적으로 표현된다. 티스토리 스킨에서는 HTML을 사용하여 블로그의 요소들을 배치하고 조직화한다. 즉, 블로그를 구성하는 곳이라 생각하면 된다. // HTML 기본 구조 // 헤더 제목 여기서 , , , 등은 시맨틱 태그로, 각각 웹페이지의 헤더, 네비게이션, 주요 콘텐츠 영역, 푸터를 나타낸다. CSS CSS는 Cascading.. 2023. 8. 26.
[Tistory] Code block custom - Code 라인별 숫자 추가, 폰트 설정, 가로 스크롤 [Code 라인별 숫자 추가] 1. HTML 코드 수정 2. CSS 편집 /* 라인 번호 블록에 대한 스타일링 */ /* Line Number CSS */ /* for block of numbers */ .hljs-ln-numbers { /* 다양한 브라우저에서 터치 콜아웃과 사용자 선택 비활성화 */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center;/* 번호 가운데 정렬 */ color: #B5B5B5;/* 번호 색상 설정 */ border-right: 1.. 2023. 8. 25.
[Tistory] Code block 테마 변경 - 심화편 (Highlight.js 활용) [Highlight.js] 아무래도 기본 테마는 부족한 점들이 많다. 그래서 우리는 또 다른 여러 가지 테마를 직접 가져와 적용해볼 것이다. ◈ Highlight.js ◈ highlight.js Usage highlight.js can be used in different ways such using CDNs, hosting the bundle yourself, as a Vue plug-in, as ES6 modules, with Node.js, and web workers. See our README on GitHub for more details. As a Module Highlight.js can be used with Node on the highlightjs.org 이렇게 테마를 직접 받아서 적.. 2023. 8. 23.
[Tistory] Code block 테마 변경 - 기본편(Syntax Highlight 적용) [Code block 테마 변경하기] 티스토리에서 기본적으로 지원하는 플러그인을 통해 코드 블럭에 테마를 적용해볼 것이다. 1. 관리 페이지 우측 하단의 플러그인 메뉴로 들어간다. 2. "Syntax Highlight - 코드 문법 강조" 클릭 위 플러그인은 티스토리에서 기본으로 제공하는 코드 블럭 테마 플러그인이다. 3. 8가지 테마 중 원하는 테마를 선택 후 적용을 클릭한다. ※ 기본 테마(8가지) 출력 예시 2023. 8. 23.

티스토리툴바