날개를달다 IT 잡학다식 사전

highlight.js에 쓰이는 폰트를 변경해보자.제목 라벨과 Copy버튼을 넣고 가만히 보고 있었는데 뭔가 자꾸 어색한 느낌이 들어서 뭐 때문인지 몰랐다가 Visual Studio를 켜고난뒤에 알았다. 폰트가 코딩때 사용하던 폰트가 아니여서 다른 폰트로 소스코드를 보니 뭔가 어색한 느낌이 들었던것이다.필자는 D2 Coding 폰트를 사용하고 있어서 해당 폰트를 올려서 적용하도록 해보겠다.D2 Coding 폰트 다운로드   GitHub - naver/d2codingfont: D2 Coding 글꼴 D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub. github.com 필자도 ..

highlight.js에 적힌 소스코드를 클릭 한번에 복사해보자.필자가 이전 Syntax Highlight에서 제일 애용했던 기능은 더블클릭시 소스 전체 선택이였다.필자가 올린 소스를 다시 사용하는데 복사 붙혀넣기가 안되면 그것만큼 불편한것도 없기때문이다.(몇몇 소스는 너무 길기도 해서 드래그하기도 힘들다.. ㅠㅠ)아쉽게도 highlight.js에는 그런기능이 없으니 Copy버튼을 하나 만들어서 버튼 클릭시 소스를 클립보드에 복사하도록 해보자.CSS 추가우선 아래 CSS부터 추가 해주자. /*/////////////////////////*/ /*코드 Copy 버튼*/ /*/////////////////////////*/ div.highlightTopDiv > .toolbar { /*위치 고정..

highlight.js에 적힌 소스코드가 어떤 언어인지 제목 라벨에 표시해주자.현재 필자의 블로그를 보면 소스강조구문(highlight.js)위에 해당 소스코드가 어떤 언어인지 표시가 되어있다.필자와 같이 해당 기능을 추가해도록 해보자.CSS 추가우선 아래 CSS부터 추가 해주자..highlightTopDiv { /*텍스트 관련*/ font-size: 16px; font-weight: bold; text-transform: uppercase; /*대문자로 표시해주기*/ /*색상 관련 - 각자 자기가 결정한 스킨에서 색을 추출하길 추천함*/ color: #FFB871; background-color: #222222; /*그림자 효과 관련*/ margi..

HTML작성시 특수문자 처리 하는 방법에 대해 알아보자.필자는 VS Code라는 프로그램을 사용하여 HTML로 블로그 글을 다 적은후 티스토리 HTML에 붙혀넣기 하여 블로그를 작성한다.평소에는 별 문제가 없지만 특수문자를 적을때 HTML소스코드의 한부분으로 인식할때가 종종 있다.그래서 특수문자는 따로 치환해서 표시를 해줘야 하는데 우선 자주쓰는 몇몇 특수문자부터 알아보자. 코드 특수 문자 코드 특수 문자 코드 특수 문자 코드 특수 문자 < ..

highlight.js의 사용방법을 알아보자.아직 highlight.js 설치가 되지 않은사람은 아래 링크를 먼저 보고 오자.   [Blog] highlight.js 설치하기(티스토리에 설치하기) highlight.js를 직접 설치해보자.이전 블로그글 [Blog] 소스 코드 하이라이트 기능 사용하기 (Syntax Highlight 티스토리 버전)에서 티스토리 플러그인 코드 문법 강조 (Syntax Highlight)기능 설정과 사용방법 mirwebma.tistory.com 티스토리 플러그인 사용방법과 동일하게 사용하기티스토리 플러그인 사용방법과 동일하게 글쓰기에서 더보기 -> 코드블럭 클릭후 코드를 입력하면 된다.자세한 방법은 [Blog] highlight.js ..

highlight.js를 직접 설치해보자.이전 블로그글 [Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)에서 티스토리 플러그인 코드 문법 강조 (Syntax Highlight)기능 설정과 사용방법에 대해 알아보았다.다시 한번 직접설치와 비교하여 장단점을 알아보자면티스토리 Syntax Highlight 플러그인 장단점장점1. 일단 설치가 너무 간단하다.2. 사용방법이 편함3. 티스토리에서 지원해주는 만큼 소스충돌 걱정 없이 사용가능단점1. 테마가 7개밖에 없다. (직접설치는 498개)2. 지원해주는 언어가 20개 밖에 없다 (직접설치는 192개)3. 추가기능을 HTML로 사용할수 있는데 이왕 할꺼면 직접설치를 하는게 더 좋다.필자는 블로그글을 적을때..

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

margin과 padding에 값을 넣는 방법들을 살펴보자.1.한번에 입력margin: 10px; /*상하좌우 전체다 같은값*/2.하나하나 지정해주기margin-top: 10px;margin-right: 5px;margin-bottom: 0px;margin-left: 10px;3.한줄로 하나하나 지정해주기 (상,우,하,좌)한줄로 적을때 순서는 '상'부터 시작해서 시계방향으로 설정해준다.margin-top: 10px, 5px, 0px, 10px; /*상,우,하,좌*/4.한줄로 지정해주기 단축 (상하,좌우)margin-top: 10px, 5px; /*상하,좌우*/5.한줄로 지정해주기 단축2 (상,좌우,하)margin-top: 10px, 0px, 5px; /*상,좌우,하*/padding도 마찬가지로 적용된다...

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

CSS font-weight 글씨 굵기CSS font속성중 weight는 글씨의 굵기(웨이트)를 설정합니다.예제 See the Pen Untitled by 날개를달다 (@pmdgstri-the-flexboxer) on CodePen. 기본적으로 normal과 Bold 두가지를 많이 사용합니다.그리고 숫자 100부터 900까지의 100단위로 속성이 있는데400은 normal과 700은 bold와 같은 굵기 입니다.현재 예제에서는 아무리 숫자를 바꿔도 normal과 bold 두종류 밖에 설정되지 않습니다.그 이유는 글꼴마다 지원하는 굵기가 정해져 있기때문입니다.더 얇은 굵기나 더 굵은 굵기를 지원하는 글꼴을 따로 찾아서 적용해야 100~900사이의 숫자가 의미가 있습니다.특수한 경우 ..