코딩ㆍ개발 정보176

• CCZ-CROSS 스킨은 "새로운 글쓰기" 모드에서는 충돌이 생긴다. 그렇다면? CCZ-CROSS 스킨은 "새로운 글쓰기" 모드에서는 충돌이 생긴다. 새로운 글쓰기 모드에서 클래스와 스타일을 넣어 글쓰기를 하면, 티스토리 새로운 글쓰기 엔진이 열심히 다듬어서, 작성한 태그나 클래스 속성이 사라질 수 있기 때문이다. 그렇다면? CCZ-CROSS 스킨은 어떻게 사용할 수 있을까? 티스토리 구버전 글쓰기를 계속 사용해야 할까? 티스토리 구버전 글쓰기를 하면서 서식에 추가해서 불러가며 사용해야 할까? 아니다. CCZ-CROSS 스킨을 새로운 글쓰기 모드에 맞춰서 변경 해서 사용해야 할 수도 있다. 크게 적용안되는 부분은 이미지를 감싸는 P 태그에 inner-cap 을 적용하거나 border를 적용하는 부분이나.DL, DT, DD 로 구성되는 부분mark 태그를 넣는 부분 등. 차이만 찾아내.. 코딩ㆍ개발 정보/티스토리블로그 2020. 8. 29.

• 

  티스토리에 부트스트랩 적용하기 티스토리에 부트스트랩을 적용하려고 할 경우는, ①부트스트랩 파일과 jQuery 파일 다운로드, ②스킨 이미지 폴더에 업로드, ③스킨 HTML 변경 순으로 진행하면 된다. 부트스트랩 내려받기 부트스트랩 다운로드 사이트 [bootstrapk.com/getting-started/#download]로 이동하여 부트스트랩 다운로드 클릭 jQuery 내려받기 jQuery 다운로드 사이트[Download the compressed, production jQuery 3.5.1]로 이동하여 jQuery 다운로드 클릭 (js가 그냥 브라우저에 출력된다면, 마우스 오른쪽 클릭해서, 다른 이름으로 저장, 해주시면 됩니다.) 다운로드 압축 해제 및 정리 jQuery 파일은 부트스트랩을 동작하기 위한 필수 파일이니 당연히 업로드.. 코딩ㆍ개발 정보/티스토리블로그 2020. 8. 29.

• 

  티스토리 코드블럭, 코드 하이라이트 적용하기 티스토리 블로그를 보다 보면, HTML이나 기타 프로그래밍 랭귀지 등을 보기 좋게 꾸며놓은 것을 쉽게 볼 수 있다. 소스코드하이라이팅 부분인데, 티스토리 기본 세팅에는 코드 하이라이트그 적용되어있지 않다. 티스토리 플러그인에서 설정하기 1. 관리자 페이지 플러그인으로 이동하여 코드 검색 2. 테마 선택하여 적용 3. 코드 블럭 클릭 4. 코드 타입 선택하여 내용 입력후 적용 5. 적용 내용 확인 /* 잘못된 주석문 */ 코드 하이라이트 된 부분을 확인할 수 있습니다. 이외의 코드 하이라이트 highlight.js [출처:https://cho-coding.tistory.com/215, https://kwonkyo.tistory.com/143, webdir.tistory.com/439, somjang.tis.. 코딩ㆍ개발 정보/티스토리블로그 2020. 8. 25.

• 

  sublime text, emmet 기본 LANG 속성을 KO로 변경하는 방법 Atom 기본 HTML 스니펫에서 LANG=en을 LANG=ko로 변경하는 방법 Atom에서는 Emmet의 View Code 를 클릭하여 변경할 수 있다. 출처: https://treasureland.tistory.com/1 [보물섬] [File] -> [Settings] -> [Packages] -> [emmet] -> [Settings] 버튼 클릭 emmet Settings에서 View Code 버튼을 클릭합니다. 소스트리에서 [emmet] -> [node_modules] -> [emmet] -> [lib] -> [snippets.json] snippets,json파일을 열면 상단에 variables 변경 SublimeText3의 기본 HTML 스니펫에서 LANG=en을 LANG=ko로 변경하는 방법.. 코딩ㆍ개발 정보/HTML 연습 2020. 8. 25.

• 

  sublime text의 emmet 탭이 먹히지 않아요? 이거 어쩐일인지 .. 맥OS에서 서브라임텍스트를 얼마전에 깔고, 지금 다시 에밋을 하려고 하는데 탭을 치면, 에밋이 동작해야 하는데, 이상한게 동작한다. 이렇게 되고 먹히지 않는다. 뭐지? 초기화 해보자 시도 결과: 실패 지우고 재 설치 재설치 하니 telemetry 라는게 있다.. 얼마전에 갑자기 뭐 뜨길래 대충 눌렀는데 NO (또는 YES) 해보고 에밋 해보자. 흐미 .. 또 안된다. 지워 보자 이번엔 서브라임텍스트에 설치된 패키지를 삭제하고 ⌘ Cmd + Shift + P눌러서 인스톨러 띄우고, PCRP (Package Control: Remove Package)를 클릭하여, emmet 등 사용하지 않는 툴을 삭제 한다. finder 응용프로그램에서 지우고, 위치에 있는 SublimeText 폴더도.. 코딩ㆍ개발 정보/HTML 연습 2020. 8. 23.

• [CCZ-CROSS] 스킨 적용하기 현재 CCZ-CROSS 스킨 적용하는 방법은 저 같이 블로그 사용 능력이 뛰어나지 못하고, 웹페이지 만드는 능력이나 자바 스크립트 등에 익숙하지 못한 사람이 저처럼 헤매는 것을 좀 줄여드리고자 작성하는 부분이므로, 설명이 좀 미비한 부분이 있을 수 있습니다. 질책의 댓글 보다는 제게 안내의 메시지로 댓글 남겨주시기를 당부드립니다. 티스토리는 네이버 블로그와는 다르게 스킨을 다운로드 받아 블로그에 등록하고 편집할 수 있습니다. 이번에는 흉내쟁이님의 CCZ-CROSS 스킨을 적용해 보겠습니다. 대략적인 모습은 다음과 같습니다. CCZ-CROSS 스킨 다운로드 SITE https://webdir.tistory.com/category/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC/%EC%8A.. 코딩ㆍ개발 정보/티스토리블로그 2020. 8. 23.

• 

  sublime text에서 들여쓰기 단축키, 브라우저로 보기 단축키 만들기 서브라임텍스트에서는 reindent가 기본적으로 단축키가 지정되어있지 않는 경우가 있습니다. 이런경우 사용자 단축키로 지정할 수 있다. 1. 메뉴 > preferences > Key Bindings를 클릭한다. 2. 화면에서 왼쪽이 기본 시스템 단축키고, 오른쪽을 사용자 지정 단축키이다. 오른쪽 부분에 단축키 될 부분을 입력하면 된다. 명령 세트는 이렇다 {단축키, 명령어, 옵션}, * 단, 왼쪽에서 새로 지정하려는 단축키가 지정이 되어있는지, 충돌되지는 않는지 미리 찾아보기해서 참고한다. 3. 선택영역 자동정렬을 ctrl+shift+i 로 지정하려고 할 경우 다음 내용을 [ ] 안에 넣는다. // reindent all { "keys": ["ctrl+shift+i"], "command": "reinde.. 코딩ㆍ개발 정보/HTML 연습 2020. 8. 21.

• 

  sublime text에서 작성한 HTML 파일 브라우저에서 바로 보기 1. 서브라임텍스트를 실행하고 2. Cmd + Shift + P 클릭하여 인스톨러 띄우고 3. view in browser 검색해서 설치 4. opt + Control + V 클릭 5. 기본 설정 브라우저를 변경하려면, Sublime Text > Preferences > Package Settings > View in Browser > Settings — User 에서 { "browser": "chrome", } 처럼 새로 입력후 저장하시면 됩니다. 출처 보기 코딩ㆍ개발 정보/HTML 연습 2020. 8. 19.

• 

  티스토리 글 작성 시 reCAPTCHA 인증, 쉽게 하는 방법 티스토리 글쓰기 완료 하려고 들면, reCAPTCHA 가 나타납니다. 이게 은근히 번거롭습니다. 정상적으로 이미지를 클릭해도 계속 이미지가 바뀌면서 선택하라고 하는데, 어떤 분들은 이 답답함에 티스토리를 떠나는 분들도 있는 것 같습니다. reCAPTCHA :출처 - 위키피디아 reCAPTCHA ("리캡차")는 카네기 멜론 대학교의 메인 피츠버그 캠퍼스의 루이스 폰 안, 벤 모러, 콜린 맥밀런, 데이비드 에이브럼, 매뉴얼 블럼이 개발한 CAPTCHA 시스템이다. 2009년 9월에 구글로 판권이 넘어갔다. reCAPTCHA는 CAPTCHA와 비슷하게 사용자에게 화면에 왜곡된 단어 이미지를 보여준 뒤, 보이는 대로 단어를 입력하라고 한다. 화면에 나타나는 두 개의 단어는 접근이 제한된 구역[1]에 봇이 접근을.. 코딩ㆍ개발 정보/티스토리블로그 2020. 5. 9.

• 무들 (moodle, 교육용 오픈 소스) 소개 및 설치 방법 무들은 학습관리시스템 (LMS) 혹은 가상학습환경(VLE)로 알려진 강좌관리시스템(CMS)입니다. 무들은 교육자들이 효과적인 온라인 학습 사이트를 구축하는데 사용할 수 있는 무료 웹 어플리케이션입니다. - from http://moodle.org 무들 설치파일 선택 방법 http://moodle.org/downloads/ 접속하여 1. 표준 무들 패키지를 설치한다. 2. 윈도우즈용 무들을 설치한다. (소개는 이것으로 합니다) 윈도우즈용 무들 설치 방법 1. Moodle 2.0.2+ 버전(2011.03.15 최신)을 다운로드 받는다. 2. 로컬 드라이브에 압축을 푼다. (압축푼 폴더에서 README.txt를 확인한다.) 3. 압축푼 폴더에서 "Start Moodle.exe" 를 실행한다. 4. 방화벽 차단.. 코딩ㆍ개발 정보/티스토리블로그 2020. 5. 6.