플러그인을 사용하지 않더라도 티스토리에서 그림을 클릭하면 원본 크기의 그림을 어두운 배경과 함께 볼 수 있는 라이트박스(Ligthbox)를 적용합니다. 오늘은 자바스크립트를 이용하여 기능을 변경합니다. 목표 포스트에 그림을 추가하면 티스토리에서는 아래와 같은 마크업으로 변환합니다. 여기서 라이트박스 이벤트는 span이 담당합니다. 우리는 이 span을 img와 분리해서 별도의 버튼으로 만들게 됩니다. 크게보기 스크립트 function lightbox_modify() { let wrapper = article.querySelectorAll('figure.imageblock'); wrapper.forEach(function(elem){ let img = elem.querySelector(..
오늘의 스킨제작: 라이트박스수정하기
소제목을 기준으로 목차를 생성하는 스크립트를 작성합니다. 순수 자바스크립트로 작성했습니다. 항상 자바스크립트를 이용해서 무언가를 하려고 할 때면 제이쿼리(jQuery)를 먼저 불러왔었는데요. 생각해보니 제가 만드는 대부분의 기능은 굳이 라이브러리의 도움이 있어야만 하는 것도 아니고, 라이브러리를 사용했을 때 스크립트의 길이가 극적으로 줄어드는 것도 아니었습니다. 지금 제작하는 스킨을 시작으로 제이쿼리에서 벗어나려고 합니다. 방식 artlcle_wrapper라는 클래스가 있습니다. 이 클래스는 블로거가 작성한 블로그 포스트의 본문을 담는 컨테이너입니다. 이 클래스에서 제목을 3단계(h1, h2, h3)까지 찾은 후 목차 마크업을 만들어 toc_wrapper 켄테이너에 담으면 됩니다. 스크립트 var art..
오늘의 스킨제작: 자바스크립트로 목차 생성하기
단어 사이는 하이픈(-)으로 프로그래밍에 익숙한 경우 카멜 표기법(camelCase)이 파스칼 표기법(PascalCase)을 사용하는데 익숙해져 있습니다. 하지만 CSS를 다루는 경우에는 스네이크 표기법(snake_case)과 유사하지만 밑줄 대신 하이픈을 사용하는 방식을 많이 사용합니다. (X) topbarTitleText (O) topbar-title-text BEM 방법 BEM 방법은 블록(Block), 요소(Element), 변경(Modifier)을 기준으로 나누어 선택자의 이름을 정하는 것입니다. 각각은 이중 밑줄(__)으로 구분합니다. 블록은 어디에 사용하는지를 나타내고, 요소는 대상의 종류를 나타냅니다. 가령, 네비게이션 바의 카테고리가 가지는 선택자 명칭은 nav__category 가 됩니..
스킨 제작: CSS 이름규칙
스킨에 필요한 정보를 담아놓은 마크업 파일인 index.xml을 만들어 티스토리가 스킨을 인식하고 필요한 정보를 가져올 수 있도록 합니다. 스킨의 이름과 설명, 제작자 정보, 스킨 사용시 블로그 설정 기본값, 스킨 옵션을 정의할 수 있습니다. 우선, 텍스트 에디터 등을 이용해 index.xml을 만들고 가장 윗줄에 이 파일이 어떤 형식으로 작성되었는지 표시합니다. xml은 겉보기에 html과 유사합니다. 와 등으로 데이터를 태그로 묶어 표시합니다. 작업할 index.xml안에는 티스토리가 약속한 태그 안에 필요한 정보를 채우면 티스토리는 내용을 읽고 필요한 내용을 스킨사용자에게 표시합니다. 스킨 이름 위와 같은 형태로 태그쌍 사이에 필요한 것들을 집어넣습니다. 상세한 규칙은 티스토리 스킨 가이드: 스킨 ..
스킨 제작: 스킨 정보 파일 [index.xml]
자바스크립트 표준 규약의 변경으로 인해 생성기가 정상적으로 동작하지 않습니다. 때문에 이 문서의 내용은 티스토리 API를 이용한 사이트맵 생성기 가 대체합니다. 읽기 전용의 티스토리 API를 이용하는 방식이기 때문에 훨씬 빠르고 정확하게 사이트맵을 제작할 수 있습니다. 원리와 조건 티스토리의 /category/?page={index}의 {index}를 증가시키면서 접근 가능한 포스트들을 등록합니다. 때문에 스킨에서 페이지 리스트가 정의되어 있어야 합니다. 사용법 아래 폼에 티스토리 블로그 주소를 붙여넣고 시작을 누르면 자동으로 진행합니다. 작성한 포스트(공개)수와 크롤링한 포스트의 수를 비교하신 다음, 태그의 URL 적절하게 쓰였는지 확인하신 후 sitemap.xml을 다운로드 하면 됩니다. 사이트맵 양..
온라인 티스토리 사이트맵 생성기
티스토리의 경우 카카오와 다음에서는 자동으로 검색엔진에 웹문서를 등록합니다. 하지만 네이버와 구글은 각각 네이버 웹마스터 도구와 구글 서치콘솔에 사이트를 등록해야 검색이 됩니다. 우선은 해당 웹마스터 도구에 RSS를 등록해서 해결할 수 있습니다. 그러나 티스토리가 제공하는 RSS는 50개의 최신글만 지원하며 51번째 글부터는 최신 정보 반영이 안됩니다. 저는 이 문제를 사이트맵으로 해결하려고 합니다. 여기서는 기본적인 양식을 살펴보고 차후에 자동으로 티스토리 블로그를 크롤링하여 사이트맵을 만드는 프로그램을 코딩할 예정입니다. XML 사이트맵 양식 http://www.example.com/foo.html 2018-06-04 구글에서 제공하는 사이트맵 예시입니다. 태그 단위로 이루어져 있으며 태그와 태그 사..
티스토리 블로그를 위한 XML 사이트맵 양식
프로그래밍 언어를 배운 후 밑바닥부터 시작해 게임을 만드려고 한다면, 상당한 시간과 노력을 필요로 합니다. 간단한 충돌 하나 구현하는 것도 상당히 힘들죠. 게임 엔진 게임 엔진은 게임을 만들 때 자주 사용하는 기능들을 미리 담아둔 패키지입니다. 코드 모음으로 제공하는 경우나 거대한 종합 개발 소프트웨어로 제공하는 경우가 있습니다. 잘 알려진 게임엔진으로는 유니티(Unity), 언리얼 엔진 4, 파이게임(PyGame), 렌파이(Ren'Py) 등이 있죠. Phaser Phaser는 자바스크립트 기반의 게임 엔진입니다. 무료로 사용할 수 있고 오픈소스입니다. 물리 엔진, 그래픽 엔진, 사운드 엔진 등을 포함하는 코드모음 입니다. 자바스크립트 게임 엔진이 가지는 장점을 활용하고자 할 때 이용할 수 있습니다. 자..
자바스크립트를 위한 게임엔진: Phaser
포스팅을 하다보면 그래프나 차트가 필요한 경우가 있습니다. 보통은 엑셀 등을 사용해서 그래프나 차트를 그린 후 이것을 그림으로 저장하여 포스팅에 포함하지만 원시데이터가 필요하거나 수정을 해야하는 경우가 있습니다. Plotly는 포스팅 하는 과정에서 수치를 직접 입력하여 그래프나 차트를 표시하는 도구입니다. Plotly Plotly는 각종 여러 언어를 지원하는 오픈소스 그래프 라이브러리입니다. 점 그래프나 막대그래프 뿐만 아니라 데이터를 지도 위에 표시할 수도 있고, 3D 차트를 그릴 수도 있습니다. 여기서는 CDN을 통해 Plotly를 불러오고 간단한 사용법을 다룹니다. Plotly.js Plotly.js에서 제공하는 CDN을 아래 HTML 태그로 간단하게 불러올 수 있습니다. 불러온 Plotly를 아래..
[Plotly.js] 웹 문서에 그래프 넣기
간혹 같은 페이지인데도 오페라, 크롬, 사파리, 엣지에서 보이는 모습이 다른 경우가 있습니다. 특히나 모바일에서는 생각과 다른 모습으로 보이는 경우가 있는데요. 이것은 별도의 스타일을 지정하지 않으면 브라우저에서 제공하는 스타일 기본값을 사용하기 때문입니다. 이런 문제를 해결하는 방법으로는 크게 두가지가 있습니다. reset.css: 브라우저가 지정한 모든 스타일을 지운다 normalize.css: 기본 지정 스타일을 통일한다. reset.css reset.css는 현재 이 스킨이 사용하는 스타일 초기화입니다. 모든 속성을 지우고 스킨이 지정한 스타일만 보여줍니다. 파일의 크기가 작다는 장점이 있지만 당연하다 싶은 스타일마저 다시 설정해야 합니다. normalize.css normalize.css는 모든..
브라우저 기본 스타일 초기화: reset.css와 normalize.css
End of content
No more pages to load