5년간의 개발 경험을 정리하려고 계획하고 있습니다. 개발자로서 성장하기 위해서, 그리고 유용하면서도 흔하지 않은 정보를 공유하기 위해서 시작한 블로그였는데요. 이런 저런 핑계로, 자주 글을 작성하지 못했습니다. 그래도 글감이 생각 날 때마다 메모는 해왔습니다. 이제는 이렇게 지난 약 5년동안 쌓아온 경험, 아이디어(제안), 꿀팁 등을 정리하고 가야 할 때가 되었다고 생각하게 되었는데요. 5 Years Commit 이라는 이름(해시태그: #5yearscommit)으로 연재를 기획하고 있습니다. 많은 관심 부탁드립니다. #5yearscommit
품질 낮은 포스팅 삭제 과거에 공부했던 내용을 정리했던 포스팅을 삭제합니다. 활용도가 적고, 충분히 다른 블로그 글이나 여타 컨텐츠들로 대체될 수 있다고 생각하여, 인터넷 공간에서 잡음이 될만한 포스팅은 삭제합니다. 태그 재지정 기존에는 태그를 포스팅과 관련있는 모든 키워드를 넣었었는데, toast-ui 블로그의 태그 지정 방식에 영감을 받아 포스팅의 태그를 재지정합니다. 가능하면 태그는 포스팅의 주제를 관통하는 한가지의 키워드를 선정하여 부여합니다. 태그로 포스팅을 쉽게 인덱싱 하기 위해서입니다. 일정 2022-09-22 ~ 2022-09-30 (완료)
CSS blockquote style blockquote 안에 쓰여진 영어 단어의 word-break 가 작동하도록 CSS 에 word-break: normal 을 적용하였습니다. blockquote 의 하단 여백이 좁아 어색했던 것을 수정하였습니다. blockquote { word-break: normal; margin: 20px 0 !important; } 적용된 모습 quote style #1 [before] To those who do not know mathematics, it is difficult to get across a real feeling as to the beauty, the deepest beauty, of nature. It is necessary to understand la..
일반 글자 색상을 #222222 -> #292929 로 변경하였습니다. 글 제목의 font-weight 를 700 으로, font-size 를 2.2em 으로 변경하였습니다.
로고를 적용해보았습니다. 이에 따라 블로그 스킨 CSS 를 다음과 같이 변경하였습니다. 이전 /* Header Type 01 Title */ h1.jb-site-title { margin: 15px 0px; font-size: 1.5em; } h1.jb-site-title span.jb-site-title-image img { width: 80px; vertical-align: initial; } @media ( min-width: 768px ) { h1.jb-site-title { margin: 20px 0px; font-size: 2.0em; } h1.jb-site-title span.jb-site-title-image img { width: 100px; } } @media ( min-width: 1..
2017년 8월부터 2018년 1월까지 스마트미디어인재개발원(SMHRD) 과정에서 학습했던 내용을 '보기 좋게' 리뉴얼 하고자 합니다. header 계열 tag 를 활용하여 문서의 구조 표현 tistory 의 코드 highlight 기능이 추가됨에 따라, 기존 코드를 코드블럭으로 표현 노트정리처럼 요약되어 있는 부분을, 처음 읽는 사람도 이해할 수 있도록 풀어쓰기 명사형 문장구조 걷어내고 서술형 문장구조로 다시 서술 (ex, 변수를 정의함 -> 변수를 정의한다.) 하위 카테고리 통합 및 단순화 대표이미지(썸네일) 추가 github 소스코드 링크 추가 2020년 7월 5일에 완료한 시점에 이 글을 추가합니다. 2020년 5월 14일에 시작하여 2020년 7월 5일에 마무리하였습니다. 주요한 변경사항은 다음..
본문과 첨부된 이미지 사이의 구분을 위해 본문 내 이미지에 그림자 및 위쪽 여백을 추가하였습니다. /* ColdMater - 본문 내 첨부이미지 스타일 2020-07-03*/ figure.imageblock { margin-top: 20px !important; } figure.imageblock img { box-shadow: 0px 5px 10px 1px #c1c1c1; } 아래는 적용된 모습입니다.
TOC(Table Of Contents) 디자인 변경 기존 원본 색상 및 디자인에서 CSS 를 수정하여 TOC 디자인 변경을 진행하였습니다. 변경부분 .toc-active, .toc-common:hover { color: #20404a; text-shadow: 2px 1.5px 3px silver; } .toc-parent-active { color: #206ba4; text-shadow: 2px 1.5px 3px silver; } TOC(Table Of Contents) 소스코드 Github Repostiroy 등록 JB FACTORY 의 JB SKIN 167 스킨에서 TOC 를 적용하는 방법과 소스코드를 github repository 에 올려놓았습니다. https://github.com/coldMa..
신규 글을 표시하는 N 마크의 아이콘의 크기가 제대로 표현되지 않는 문제를 수정하였습니다. /* index-title(목록에서의 제목)의 New 아이콘 크기 조정 - coldMater START*/ h3.jb-index-title a img {width: 18px !important; height: 13px !important} /* index-title(목록에서의 제목)의 New 아이콘 크기 조정 - coldMater END*/ 스킨편집 - CSS 에 위 내용을 추가하여 수정하였습니다.
https://www.jbfactory.net/14100 JB SKIN 167 | 긴급 공지 아래 문제를 해결한 새 버전을 다운로드 하실 수 있습니다. 버전은 3.0.2입니다. https://www.jbfactory.net/14103 JB SKIN 167 스킨을 사용 시 화면에 아무 것도 나오지 않거나 애드센스 광고만 나오는 현상이 www.jbfactory.net 해당 오류에 따라 임시 조치하였습니다. Tistory 의 스킨편집의 HTML 수정 부분에서 아래 코드 부분을 삭제하였습니다. // Cover Slider Type 01 $( '.jb-cover-slider-type-01 .jb-slider a' ).each( function() { var jbSliderCaption = $( '.jb-slide..
기본 코드블록 안에서 줄바꿈이 되는 경우에 아래 스크린샷과 같이 자동으로 줄바꿈이 되어 코드로서는 가독성이 떨어지는 현상이 발생한 것을 발견했습니다. (필자가 JB Factory 라는 스킨을 적용하여 발생한 문제일 수도 있습니다.) CSS 편집에서 pre 태그의 CSS 속성을 다음과 같이 수정하였습니다. /* ColdMater - 코드블록 좌우 스크롤 활성 2020-06-17*/ pre { margin: 20px 0px; font-family: Consolas, Menlo, Monaco, "Courier New", monospace; white-space: pre; overflow-x: auto; } 적용 결과는 아래와 같습니다. System.out,.println~ 부분이 좌우로 길기 때문에 스크롤하여..
CSS 를 수정하여 Inline Code Block 의 스타일을 다음과 같이 변경하였습니다. 스타일은 Notion 을 참고하여 적용하였습니다. code { font-family: Consolas, Menlo, Monaco, "Courier New", monospace; color: #eb5757; background: rgba(135,131,120,0.15); margin: 0 2px; padding: 2px 5px; border-radius:3px; border: 1px solid #e0e0e0; }적용내용은 다음과 같습니다. inline code block
Tistory 의 접은글(더보기 버튼) 기능관련 UI 의 어색함을 해결하기 위해 다음 CSS 를 수정하였습니다. /* ColdMater - 접힌 글 보기 */ div [data-ke-type="moreLess"] { margin: 15px 0 15px 0;} .moreless-content { border: 2px dotted #ccc; padding: 10px; background-color: #eee;} .btn-toggle-moreless { min-width: 70px; width: 100% !important; } 적용결과 더보기 CSS 를 적용한 접은글입니다.
해당 글의 코드 자료를 찾고싶으시다면 아래 github 페이지를 방문해주세요. (해당 글의 날짜를 통해 찾으시면 쉽게 찾으실 수 있습니다.) JAVA 베이직https://github.com/coldMater/smhrd_Java_Basic_Tutorials Python 베이직https://github.com/coldMater/smhrd_Python_Basic_Tutorials JavaScripthttps://github.com/coldMater/smhrd_javascript Web(HTML, CSS, JSP, Servlet, Server, AJAX)https://github.com/coldMater/smhrd_Web R Basichttps://github.com/coldMater/smhrd_R_Basic_..