티스토리 highlight.js 설정 및 Syntax Highlight 플러그인 언어 추가

티스토리 highlight.js 사용법 및 편하게 사용하는 팁 이번 포스트는 티스토리 구문 강조를 위해 highlight.js 를 사용하는 방법 을 설명합니다. 추가로 기존 Syntax Highlight 플러그인 테마를 그대로 사용하기 위한 방법 도 함께 소개합니다. highlight.js 티스토리에서 코드 하이라이팅을 하기 위해 Syntax Highlight 플러그인을 사용할 수 있습니다. 기본 제공되는 플러그인으로 쉽게 코드 구문 강조를 할 수 있지만, 지원되는 언어의 종류가 적어 포스팅 하는 언어의 코드가 없는 경우가 있습니다. 이런 경우 highlight.js를 사용하면 Syntax Highlight 플러그인에 없는 언어와 다양한 테마를 적용 할 수 있습니다. highlight.js 설정 방법 추..

Tistory 2020.12.01

아두이노 #51 MAX7219 8x8 LED Matrix - MAX7219 동작 원리

Arduino : MAX7219 8x8 LED Matrix 동작 원리 이전 포스트에서 8x8 LED Matrix 동작원리와 사용법에 대한 포스트를 작성하였습니다. 이번 포스트는MAX7219 LED Dot Matrix를 사용하기 전에 MAX7219의 동작 원리에 대해 설명합니다. 편리하게 사용할 수 있는 많은 라이브러리가 있기 때문에, LED Matrix 를 동작하기 위해 반드시 MAX7219의 동작 원리를 이해해야 하는 것은 아닙니다. 하지만, 기존 라이브러리에 없는 추가 기능을 만든다든지, 용량과 속도를 최적화 한다든지, 유사하지만 다르게 동작하는 LED Matrix 동작 시켜야 하는 등의 과제가 있을 때 도움이 될 것이라 생각합니다. LED Matrix가 처음이라면? LED Matrix가 처음이신 분..

Embedded/Arduino 2020.11.30

아두이노 강좌 #50 SD-Card를 사용한 웹 서버로 LED 제어

Arduino Web Server LED Control Using SD-Card 지난 포스트에서는 SD-Card를 사용하여 웹서버를 구축하는 방법에 대해 설명하였습니다. 이번 포스트는 SD-Card를 사용한 웹서버에서 LED를 제어하는 방법 에 대해 소개합니다. SD-Card 사용 방법과 Arduino Ehternet Shield를 사용하여 LAN에 연결하고 웹 서버 구축하는 방법은 하단의 관련 페이지를 참고해주세요. SD-Card를 사용하여 웹 서버 동작 준비물 본 예제의 구성품은 아래와 같습니다. Arduino Uno x 1EA Arduino Ethernet Shield 2 x 1EA LED x 1EA Resistor x 1EA BreadBoard x 1EA 유무선 공유기 x 1EA Jumper Wi..

Embedded/Arduino 2020.11.27

직장인을 위한 무료 윈도우 유용한 필수 프로그램 모음 1탄

윈도우 무료 유용한 프로그램 1탄 (고전 프로그램) 저의 업무 환경을 편리하게 하고, 생산성을 향상시키고, 지금도 꾸준하게 사용하는 Window 프로그램 모음 1탄입니다. 1. Everything : 빠른 파일 검색 주요 기능 : 빠른 파일 검색 Everything은 네트워크 드라이브를 포함한 모든 파일 검색을 도와주는 프로그램입니다. 윈도 탐색기에서 파일을 검색하기 지치거나, 파일명이 기억이 날듯 안 날듯한 모든 프로그램을 빠르게 검색할 수 있습니다. 별표(*), 물음표(?)와 같은 와일드카드 문자도 사용 가능합니다. 부가기능 및 옵션 기본 기능만 사용해도 충분하지만 아래와 같은 부가 기능 및 옵션도 있습니다. 네트워크 드라이브 추가 가능 검색된 파일의 폴더로 바로 이동 가능 여러 창 옵션 사용 가능 ..

Productivity/Windows 2020.11.26

#7 CSS Sticky 속성으로 사이드바 내부 일부 영역 화면에 고정 하기

Sidebar CSS Sticky 포지션으로 상단 고정 현재 제작 중인 스킨은 상단의 Navigation 메뉴바와 왼쪽 사이드바 일부 영역은 CSS Sticky 속성을 사용하여 화면에 고정하도록 구상을 하였습니다. 이번 포스트는 Sticky 포지션을 이용하여 사이드바를 화면에 고정하는 방법 을 소개합니다. 레이아웃 구성 PC 화면에 적합하다고 생각하는 3단 레이아웃을 구상하였습니다. 아래 그림에서 배경색을 표시한 상단 메뉴바와, 왼쪽 사이바 부분의 일부 영역은 스크롤을 내리면 화면에 고정하도록 구상을 하였습니다. Sticky Position 사용 방법 및 주의 사항 사용방법 스크롤에 따라 화면에 고정되는 Sticky 속성은 아래 코드와 같이 Position 속성과 top, bottom, left, rig..

Tistory 2020.11.26

움짤 리사이징 - GIF 이미지 사이즈 크기 온라인에서 쉽게 변경 하는 방법

Online Tools : GIF Resize 움직이는 이미지 GIF의 사이즈를 변경 하고 싶을 때 별도의 툴 설치 없이 온라인에서 쉽게 사용할 수 있는 사이트를 알려 드립니다. 온라인으로 GIF 사이즈 변경 방법 iloveIMG 사이트 접속 아래의 링크를 클릭하여 iloveIMG 사이트의 이미지 크기 조절 페이지로 이동합니다. 여러 이미지 크기를 한 번에 조절하세요! 여러 JPG, PNG, SVG, GIF 파일 선택 후, 신속하게 무료로 크기를 조절하세요! 픽셀 또는 퍼센트를 정해 여러 이미지의 크기를 조절할 수 있습니다. www.iloveimg.com 탐색기에서 GIF 그래그 크기를 변경할 GIF 파일을 탐색기에서 웹페이지로 그래그 합니다. 크기 조정 할 넓이 지정 파일을 그래그 후 아래 화면과 같이..

Productivity/Windows 2020.11.26

#6 CSS Position Sticky 으로 Navi 메뉴바 스크롤 내릴 때 상단 고정

Nav 메뉴바 CSS Sticky 속성으로 상단 고정 현재 제작중인 스킨은 상단의 Nav 메뉴바와 왼쪽 사이드바의 일부 영역은 Position:sticky; 속성을 사용하여 상단에 고정하도록 구상을 하였습니다. 이번 포스트에서는 상단 Nav 메뉴바를 Sticky 속성을 사용하여 상단에 고정하는 방법 을 소개합니다. 레이아웃 구성 PC에 적합한 스킨을 제작하기 위해 아래 그림과 같이 3단 레이아웃을 구상하였습니다. 아래 레이아웃에서 붉은 색으로 표시한 부분은 화면 상단에 고정할 영역입니다. 상단에 고정할 요소는 CSS의 Sticky 속성을 사용할 예정입니다. Position Sticky CSS Fixed? Sticky? CSS 포지션(Position)에서 화면을 고정하는 방법은 Fixed 속성과 Stick..

Tistory 2020.11.26

#5 CSS Flex 로 반응형 3단 레이아웃 구성하기

CSS Flexible Box로 반응형 3단 레이아웃 구성하기 지난 포스트에서는 CSS Grid의 Grid template areas 속성을 사용하여 반응형 3단 레이아웃을 구성하는 방법을 소개하였습니다. 이번 포스트에서는 CSS Flex(Flexible Box)로 반응형 3단 레이아웃을 구현하는 방법 에 대해 소개합니다. 반응형 레이아웃 구상 아래 반응형 3단 레이아웃 구성은 현재(2020년 11월) 스킨에 적용된 레이아웃입니다. 구현 초기에 CSS Grid의 grid-template-areas 속성으로 구현하려 했으나, IE호환이 되지 않아 다른 방법을 고민하다가 모바일 접속률은 낮고, 불필요한 내용이 들어가면 로딩 속도가 느려지니 본문만 표시하는 방식으로 바꾸었습니다. 아래 그림과 같이 HTML 요..

Tistory 2020.11.25

#4 CSS Grid의 Grid template areas 속성으로 반응형 3단 레이아웃 구성하기

grid template areas 속성으로 3단 레이아웃 구성 CSS Grid의 Grid template areas 속성은 비전공자인 제가 느끼기에 웹페이지 2차원 레이아웃을 구성하는 방법 중에 가장 직관적이고 쉬운 방법으로 느껴졌습니다. 이 포스트는 Grid-template-areas 속성을 사용하여 반응형 3단 레이아웃을 구성하는 방법 에 대해 소개합니다. 반응형 레이아웃 구상 티스토리 스킨을 제작을 해야겠다 생각하고 아래와 같은 페이지 레이아웃을 구성하였습니다. PC에서는 3단, Tablet 크기에서는 오른쪽 사이드바가 Article의 아래, 모바일에서는 왼쪽 사이드바를 보이지 않도록 구성하였었습니다. 타블릿이나 모바일에서 Right Side 바에 있는 일부를 하단으로 보여주기 위해 구상하였습니다..

Tistory 2020.11.25

#3 티스토리 스킨 제작 레이아웃 구상 Part.2 사이드바, 본문 활용 방안

레이아웃 구상2 : 사이드바, 본문영역지난 포스트에서는 제작할 스킨에 기대하는 효과와 구현 방법에 대해 설명하였습니다. 이번 포스트는 제작할 스킨의 사이드바와 본문 영역의 레이아웃 구성에 대해 작성하였습니다. 지난 글 요약직접 스킨을 제작하면서 기대하는 효과는 아래와 같고, 블로그의 상단부에서 그 나마 할 수 있는 레이아웃을 구상하고 설명하였습니다. 이탈율 감소체류시간 높이기세션당 페이지수 높이기적절한 광고 배치 가능한 환경 왼쪽 사이드바왼쪽 사이드바는 크게 두 가지 영역으로 나누었습니다. 위쪽의 영역은 일반적인 포지션을 가지고, 아래쪽 영역은 Sticky 한 옵션으로 스크롤을 내리면 상단에 고정되는 박스로 실제로 블로그 스킨은 아래와 같은 용도로 사용 할 수 있도록 구상을 하였습니다. (상단) Side..

Tistory 2020.11.23