본문 바로가기

반응형

분류 전체보기

(429)
티스토리 스킨 만들기 #5 - 스킨 테스트 페이지 본 페이지는 단순히 스킨이 어떻게 보이는지 테스트용으로 제작되어 아무런 정보도 담고 있지 않습니다. 본 블로그에 적용된 스킨에 관련해 궁금하신 분들은 티스토리 스킨 만들기 #1 - 요구 사항 정리로 이동해주세요 콘텐츠 디스플레이 테스트 애국가 1절 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 (후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 2절 남산위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리기상 일세 (후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세 3절 가을하늘 공활한데 높고 구름없이 밝은달은 우리가슴 일편단심일세 (후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세 4절 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라사랑하세 (후렴..
티스토리 스킨 만들기 #4 - ToC(Table of Contents) 이전 글 보기 : 티스토리 스킨 만들기 #3 - 코드 블록 교체 글의 내용이 길어지다 보면 내게 필요한 내용을 찾기 위해 끊이 없이 화면을 스크롤 해야 하는 경우가 있다. 이럴 때 목차를 자동으로 만들어 주면 좋지 않을까 항상 생각해 왔는데 이미 그런 것이 존재 했다. ToC라고 매번 저게 뭘까 궁금했었는데 Table of Contents라고 글 제목들을 추려 자동으로 목차를 만들어 주는 기능라고 한다. 여기저기 기웃 거리며 쉽게 가져다 쓸만한 것이 없나 살펴 보았지만 이것들 역시 블로그 스킨 처럼 뭔가 나에게 2% 부족했다. 그래서 나름 나도 개발자라는 호승심에 간단하게 만들었다. ToC 기능 문서의 Heading 태그 기준으로 목차 생성 목차의 길이가 길때 문서의 스크롤에 따라 ToC도 같이 스크롤 ..
감자 농사 #5주차 감자를 심은지 5주 정도 지나니 이제 제법 밭이 초록색으로 뒤덮였습니다. 행여나 싹이 안나고 다 썩어 버리면 어쩌나 걱정했었는데 고맙게도 무럭무럭 잘 자라줍니다. 오늘은 15센티미터가 넘는 아이들을 순지르기를 했습니다. 보통 한구당 감자싹이 4~5개 정도 나오더군요. 이 중에서 튼튼해 보이는 싹 두개 정도만 남기고 잘라줍니다. 제 눈에는 다 튼튼해 보이는 아이들이라 어느 하나 솎아낼 아이를 고르는게 힘들었지만 작년 토마토 농사를 돌이켜 봤을 때 적절한 시기에 싹을 잘라 주지 않으면 줄기만 웃자라고 정작 열매는 제대로 맺히지 않더군요(감자니까 열매라고 하기엔 어울리지 않는 표현이네요) 순지르기 후에 얇게 묻혀 있는 아이들은 햍변에 청색으로 변할 수 있으므로 흙을 좀더 덮어 주었습니다. 이걸 북주기라고 합니..
티스토리 스킨 만들기 #3 - 코드 블록 교체 이전 글 보기 : 티스토리 스킨 만들기 #2 - 베이스 스킨 지난 티스토리 스킨 만들기 #2에서는 기본틀로 사용 할 스킨을 선택 했다. 이번에는 오리지널 알력2님의 블로그(https://alikong.tistory.com/46)에서 찾은 보물 같은 코드 블록을 블로그에 달아 보도록 하겠다. 오리지널 알력2님 코드 블록의 기능 줄 번호 표시 및 시작 번호 지정 기능 줄 하이라이트 기능 코드 블록을 생성하고 HTML모드에서 또는 와 같이 입력하면 특정 라인에 하이라이트를 넣을 수 있다(개인적으로 가장 고맙고 마음에 드는 기능이다) 자동 줄바꿈 적용시에도 바뀐 줄에 들여 쓰기 유지 코드 색상 값을 코드에서 사용하는 경우 색 미리 보여주기 괄호 및 태그예 마우스 오버시 짝 표시 코드 복사 시 텍스트 변환 및 들..
티스토리 스킨 만들기 #2 - 기본 스킨 비교 이전 글 보기 : 티스토리 스킨 만들기 #1 - 요구 사항 정리 나에게 꼭 맞는 티스토리 스킨을 만들기로 결심하고 이것 저것 공부를 하면서 내려진 결론은 '처음 부터 모든 것을 만드는 것은 무리다'. 자바스크립트와 CSS를 이제 갖배워서 내 맘에 쏙 들도록 만들기도 쉽지 않거니와 직장과 가정에 충실하면서 처음 부터 쌓아 올리는 것은 힘에 부치다. 티스토리에서 제공하는 오픈 소스 스킨들 중 맘에 드는 녀석을 하나 골라 나에게 아쉬운 기능들만 추가하자. 쉬운 길이 있는데 멀리 돌아가는 것은 내 스타일이 아니다. 티스토리 기본 스킨 비교 몇가지 조건으로 비교를 해보니 모든 기준에 부합하는게 Poster 스킨 하나 뿐이다. 리스트 사용시 뎁스도 표현되고, 인덱스 페이지에서 이미지가 없다면 아예 이미지를 표시하지..
[JavaScript] ToC(Table of Conents) 만들기 글의 내용이 길어지다 보면 내게 필요한 내용을 찾기 위해 끊이 없이 화면을 스크롤 해야 하는 경우가 있다. 이럴 때 목차를 자동으로 만들어 주면 좋지 않을까 항상 생각해 왔는데 이미 그런 것이 존재 했다. ToC라고 매번 저게 뭘까 궁금했었는데 Table of Contents라고 글 제목들을 추려 자동으로 목차를 만들어 주는 기능라고 한다. 여기저기 기웃 거리며 쉽게 가져다 쓸만한 것이 없나 살펴 보았지만 이것들 역시 블로그 스킨 처럼 뭔가 나에게 2% 부족했다. 그래서 나름 나도 개발자라는 호승심에 직접 만들어 보고자 한다. jQuery(https://jquery.com)를 기본 바탕으로 만들 예정이다. 요즘 javascript가 많이 개선되고 필요한 다양한 기능들이 지원되서 더 이상 jQuery에 의..
[JavaScript] let, const 변수 2015년 이전까지는 var만이 자바스크립트에서 유일한 변수였다. 하지만 자바스크립트 2015버전(ES6) 부터는 const 키워드와 let 키워드를 지원한다. const 변수 : 한번 값이 할당 되면 변경 할 수 없는 변수 let 변수 : 블록 유효 범위를 갖는 지역 변수. 선언과 동시에 임의 값으로 초기화 가능. var 변수 : 함수 블록 유효 범위 또는 전역 유효 범위를 갖는 변수. var 변수는 블록 유효 범위를 가질 수 없다. 만일 함수가 아닌 단지 블록 내에서 var 변수를 선언하였다면 블록 밖에서도 접근이 가능하다. typeof : 변수의 타입을 리턴 instanceof : 오브젝트가 해당 타입의 변수라면 true 리턴 javascript에서 null은 object다. typeof null은..
[CSS] position 프로퍼티 엘리먼트의 위치를 지정하는 프로퍼티는 top, bottom, left, right가 있다. 하지만 이 프로퍼티들은 아래에서 언급 할 position 프로퍼티가 지정되기 전까지는 동작하지 않으며 position 프로퍼티에 어떤 값이 지정되는지에 따라 다른 동작을 한다. position 프로퍼티는 엘리먼트가 위치하는 방법을 정의한다. position 프로퍼티는 아래의 다섯가지 값중 하나를 가질 수 있다. static relative fixed absolute sticky position: static; position 프로퍼티의 기본 값이며 static 포지션은 top, bottom, left, right 프로퍼티에 영향을 받지 않는다. position: static; 으로 설정된 엘리먼트는 페이지의 흐름에..
감자 농사 #4주차 시간이 정말 총알 같이 지나갑니다. 감자 농사를 시작하던 쌀쌀하던 날씨가 엊그제 같은데 벌써 감자를 심은지 한달이 지났습니다. 지난 주 겨우 새싹 몇개만 빼꼼이 고개 내밀고 있던 모습과는 사뭇 다릅니다. 그래도 감자가 어느정도 자라야 순지르기도하고 북주기도 해줄텐데 아직 너무 작은 아이들이라 물만 주고 왔습니다. 싹이 나기 시작하고 2주 정도간 급격하게 성장한다고 하니 다음주를 기대해봅니다. '감자 농사' 다른 글 보기
[CSS] ::before, ::after CSS에서 ::before와 ::after는 선택한 엘리먼트의 앞 또는 뒤에 content에 지정된 문자열을 추가합니다. 보통 엘리먼트를 장식 할 때 사용 됩니다. Example : https://kukuta.tistory.com https://kukuta.tistory.com Result : https://kukuta.tistory.com->

반응형