블로그 13

[Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)

Syntax Highlight를 티스토리에 적용해보자.블로그를 몇년만에 다시 시작하고 있는데 티스토리에 정말 많은 기능이 생겨나있다.그중 예전에 꽤나 고생해서 넣었던 코드 문법 강조(소스 코드 하이라이트)기능을 그냥 지원해주고 있던거에 깜짝 놀랐다.조금더 알아 보니 원래 적용하고 있던 Syntax Highlight가 아니라 highlight.js에서 제공하는 비슷하지만 다른 기능이였다.기존 사용하던 Highlight(이하 SH)는 점점 퇴보해서 유지보수 및 업데이트가 되지 않고 있으며 충돌도 자주 일어난다고 한다.그래서 모두들 highlight.js로 갈아타는중이라는 글들을 보았다.(실제로 SH홈페이지에 들어가 보았지만 왠 이상한 Wallpaper홈페이지에 들어가진다.)(기존 SH주소 : http://a..

Blog 2025.01.08

[Blog] Code Pen (코드펜) 티스토리에 적용시켜보기

코드펜(Code Pen) 기본 사용방법을 알아보자.가끔 다른 블로그에 보이던 HTML과 CSS를 소스를 바로 볼수 있게 해주는 기능이 보였는데필자는 .Net과 Java를 기본으로 포스팅하고 있어서 별 생각이 없었다.하지만 점점 HTML과 CSS의 공부의 필요성을 느껴져 해당 내용을 포스팅 할려고 하다보니코드펜의 위력을 알게되었고 이걸 왜 이제 알았을까 하는 생각이 들정도로 기능이 뛰어나다.코드펜이란?코드펜(Code Pen)은 사용자가 HTML, CSS, Javascript를 작성하면 실시간으로 결과를 확인할수 있는 온라인 코드 편집기능이다.매번 css업데이트를 하면 업로드하고 최근사용기록 지우고.. 새로고침했는데 이게 적용된건지 안된건지 확인도 해봐야되고....아무튼 고생하면서 확인할수 있던 부분이 그냥..

Blog 2025.01.06

[CSS] 주석으로 설명을 적는 방법

CSS에 주석으로 설명을 달아보자. HTML이나 자바스크립트처럼 CSS에도 주석을 달수 있다.보통 연결된곳 혹은 스타일의 목적을 설명하기 위해 추가한다.'/*' 로 시작해서 '*/'로 끝난다.예제/*블로그 상단 운영환경 테이블*/ div.toptable{ width: 100%; border-collapse: collapse; border-spacing: 0; BORDER: rgb(193,193,193) 3px double; PADDING: 10px; MARGIN : 10px; DISPLAY: inline-block; BACKGROUND-COLOR: rgb(238,238,238)..

CSS 2025.01.06