VICTORY::VICTORY

최근 글 - Recent PostsMORE

부트스트랩5 그리드 1

container에서 fluid를 더 해 container-fluid로 변경했다. 레이아웃을 1단으로 하고 노트북을 하다보니 화면이 작게 보여서 fluid가 괜찮았다. 그런데 화면이 큰 모니터를 사용하면 fluid가 어떻게 보일지... 참고로 fulid를 사용하면 경계가 브라우저 앞 옆이다. 그리고 lg-12를 사용하니 왼쪽과 오른쪽 여백이 너무 없는 것 같아 lg-11로 했고 1은 여백이다. 사이드바에서 두 개를 같은 너비로 하고 싶었는데 그때 그리드릴 col를 사용하면 된다는 것을 알았다. lg에서 같은 너비를 같도록 col-lg를 사용했다. 만약 xs에서 같은 너비를 원한다면 col을 사용하면 될 것이다. 나는 class="col-sm" 라고 정의하면 두 개의 사이드바는 같게 되게 xs에서는 하나인..

2021.12.29

부트스트랩5에서 기본적인 다이내믹한 컨포넌트

이 블로그 스킨을 부트스트랩5로 만들었다는 것을 말했다. 이 블로그에 부트스트랩에서 제공하는 컴포넌트를 사용해 다이내믹하게 만드려 했다. 다른 사람이 부트스트랩5를 변형한 소스를 사용하지 않고 다이내믹하게 만들기는 쉽지 않았다. 아래는 부트스트랩5에서 기본으로 제공하는 내가 생각하는 다이내믹한 컴포넌트인 아코디언, 캐러셀, 오프캔버스 3개다. 아코디언 Accordion Item #1 This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the o..

2021.05.20

여기에서 부트스트랩 5를 시작하기로 했다.

이 글을 쓰기 전까지 이 블로그 스킨은 부트스트랩 버전 4였다. 내가 부트스트랩 버전 4를 공부하기 위해 만들었다. 이번에 버전 5 정식 변경하면서 더 알고 싶다는 생각이 들었다. 이 블로그를 5로 변경하기 전에 부트스트랩 버전 3으로 만든 블로그인 https://min-blog.tistory.com/를 버전 5로 변경해서 운영하려고 했다. 부트스트랩 5가 많이 변했고 그 블로그도 많이 추가하여 쉽지 않았다. 그런데 이 블로그를 버전 5로 변경한 후 마음이 변했다. https://min-blog.tistory.com/을 변경하다 보니 정말 무거워졌다. 얼마 동안 이 블로그를 운영한 후 마음이 안 들면 다시 https://min-blog.tistory.com/로 블로그를 가면 된다. 이 블로그에서는 순수하..

2021.05.15

새에디터에서 코드블럭 실험

이 블로그는 새에디터를 사용하고 있고 코드블럭을 실험하려고 한다. 하여튼 티스토리는 플러그인, 스킨, 치환자 등을 추가하면 공지를 하지 않는 경우가 많다. 티스토리 블로그에서 새에디터에서 코드를 삽입할 때 플러인을 활성화(적용)하면 아래나오듯이 코드가 보기 좋게 나온다. 몇개월 전에 PC 페이지에서 코드블럭이 제대로 되지 않았는데 아마 플러그인을 활성화하지 않은 것일 수 있다. 모바일 페이지에서는 플러그인이 자동으로 설정되니 그랬을 것이다.

2019.06.22

이 블로그를 멋진 스킨으로 만들어야 하는데...

아직 생각나지 않는다. 현재 이 스킨은 내가 주로 운영하고 있는 부트스트랩3로 만든 백전백승을 기초로 해서 만들어서 너무 비슷하여 독특하지 않다. 부트스트랩3로 만든 스킨을 부트스트랩4을 사용해서 1단으로 만들었는데 어딘가 어색하다. 부스트스트랩 무료테마를 제공하는 사이트에서 좋은 테마를 제공하고 있지만 현재 마음에 드는 것이 없다. 그리고 새로 테마를 만들려면 시간이 걸린다. 자투리 시간을 내면서 스킨을 완성하고 있지만 귀찮다. 꾸미는 것도 시간과 노력이 엄청 걸리는 것을 안다. 부트스트랩5까지 나오기를 기다릴까?

2019.06.21

다음에서 유입이 없다

티스토리와 다음 블로그는 아래 그림에 나오듯이 등록 신청을 하지 않더라도 자동으로 검색에 노출된다고 한다. 그런데 이 블로그는 티스토리고 2012년 부터 글을 적었는데 한번도 다음 유입을 본 적이 없다. 유입은 구글과 네이버만...네이버는 등록하지 않아도 유입되는 것으로 안다. 구글은 모르겠다. 다음 검색 등록 페이지를 보면 아래 그림과 같은 메시지가 있다. 고객센터에 문의하라는 메시지... 이 블로그는 유입에 신경쓰지 않아서 다음 고객센터에 문의하고 싶지 않다. 기계적 답변을 하는 고객센터는 괜히 골치아프다. 다음 유입이 중요하다면 반드시 고객센터에 문의해야 할 것이다.

2019.06.21

내가 보는 다음블로그

처음 티스토리 블로그를 접했을 때 내가 알고 있는 모든 블로그를 다루었다. 그때가 2010년 이었는데 이미 서비스를 종료한 파란 블로그, 싸이월드 블로그, 이글루스, 텍스트큐브 등 거의 모든 블로그를 다루었다. 참고로 그 글을 이 블로그가 아닌 다른 블로그인 백전백승에서 다루었다. 그러면서 블로그의 장단점을 알게 됐다. 약 2011년에 국내 블로그는 티스토리 블로그,네이버 블로그만 다루어야겠다는 생각이 들었다. 왜냐하면 티스토리 블로그, 네이버 블로그외 다음 블로그 등 블로그는 허접했다. 다음을 인수한 카카오도 이것을 아는지 다음 메인에 다음 블로그는 없다. 최근에 LG V50이라는 키워드로 다음 검색을 봤는데 3페이지까지 모두 티스토리와 브런치(카카오 블로그)뿐이었다. 다음 블로그는 없었다. 그리고 다..

2019.06.20

네이버에 썸네일이 나타나는지 볼까?

예전에 적었던 새 에디터로 적은 글이 아니고 지금 글을 적으면 네이버에 썸네일이 나타나는지 점검하려고 한다. 이 블로그는 기본 에디터를 새 에디터를 하고 있다. 내 다른 블로그인 https://min-blog.tistory.com은 이전 에디터를 기본에디터로 하고 있다. 썸네일이 나타나는지 점검하는 것이므로 글에 사진 하나를 삽입하며 네이버에 검색되려면 시간이 걸린 것이다. 월 28일에 점검했을 때는 다음에는 나왔으나 네이버에는 나오지 않았었다. 우리나라 검색 점유율에서 다음은 10% 미만인데... 나는 다음을 거의 무시한다.

2019.05.25

치환자가 추가됐다.

항상 티스토리는 치환자 추가를 스킨 업데이트 하면서 하는 것 같다. 예전에도 그랬지만 이번 4월에도 추가한 치환자도 4월에 Magazine이라는 스킨을 업데이트하면서 새로운 치환자를 추가했다. 참고로 아래 글에서 **은 ##다. **을 ##로 적으면 읽혀지기 때문에 **로 적었다. 추가된 치환자 내용을 보니 커버,공지,최신 글,인기 글에 날짜 심플형 치환자라는 것이 추가됐다고 한다. 만약 날짜 심플형 치환자를 사용하면 시간을 나타날 때 연.월.일만 나타나고 시간은 나타나지 않는다는 것이다. 예로 커버의 경우 [**_cover_item_date_**] 치환자를 사용하면 발행날짜/시간이 나타나고 [**_cover_item_simple_date_**]을 사용하면 시간을 없어지고 발행날짜만 나타난다는 것이다. ..

2019.04.26

최근글수과 인기글수가 같다.

전에 인기글 수가 변했다는 것을 알았다. 이번에 이 블로그 스킨을 이리 저리 만지면서 최근글 수가 인기글 수와 일치한다는 것을 알았다. 티스토리 블로그 관리에 사이드바 설정하는 페이지에 아래 그림처럼 인기글 수나 제목 글자를 설정할 수 있다. 현재는 최근 글이 인기 글이지만 나중에 최근 글과 인기 글이 나누어질 것 같다. 스킨을 만드는 사람 입장에서 같으면 확장성이...따로 설정하는 것이 좋다. 지금이 예전처럼 강제로 5개로 설정하는 것보다 훨씬 낫다.

2019.02.09

블로그를 멋지게 하고 싶은데...

티스토리 블로그의 제한없는 HTML,CSS,스크립트를 사용해서 멋지게 블로그를 꾸미고 싶은데 아직까지 멋지게 꾸미지 못하겠다. 부트스트랩4를 만지기는 하지만... 나의 미적 감각 때문인지 멋지게 하기가... 부트스트랩4에서 벗어날까..부트스트랩에서 한정하니 약간 답답하기는 하다. 참고로 이 블로그는 부트스트랩4로 만들었고 다른 블로그는 부트스트랩3로 만들었다. 혹시 나를 부트스트랩에 전문가로 착각하는 사람을 위해 적는데 나는 부트스트랩에 관심이 있을 뿐이다.

2019.02.04

조회수 많은 인기글

크롬 확장프로그램,카카오톡 친구에게 링크보내기

브라우저를 익스플로가 아닌 크롬을 사용하고 있다면 카카오톡 친구에게 링크 보내기 확장 프로그램을 사용하여 웹페이지 링크와 사진 등을 보낼 수 있다. 사진을 보낸다고 사진을 보내는 것이 아닌 사진의 링크를 보낸다, 위는 크롬에 설치한 확장프로그램이고 아래는 사진을 마우스 오른쪽을 클릭했을 때 나오는 창이다. 크롬에 확장 프로그램을 설치하면 마우스 오른쪽에 추가되니 프로그램을 하나더 설치해야 하나 할 필요없다.카카오톡 친구에게 보내기 확장 프로그램 다운로드 : http://j.mp/K6TlJf 카카오톡 친구에서 보낼 수 있는데 오직 링크만 보낼 수 있다는 것을 명심하기 바란다. 페이지에 있는 사진을 클릭하면 위 그림처럼 나오는데 사진의 링크를 보내고 카카오톡에 나온 링크를 클릭하면 사진이 나온다는 것을 알기..

카드 오버레이

이 글에서 특별한 것을 설명하려는 것이 아니다. 부트스트랩4에서 지원하는 아래와 같은 카드 오버레이에 대해 적으려는 것이다. 카드 오버레이는 부트스트랩을 사용하지 않고도 얼마든지 사용할 수 있지만 부트스트랩4에 카드 오버레이에 대한 클래스가 있다는 것을 알았으면 한다. 날카로우나 더운지라 피어나는 이상의 관현악이며, 천고에 고행을 위하여, 것이다. 이상, 천지는 과실이 대중을 끓는다. 인생의 풀이 그들의 피가 있는 끓는 이상이 노년에게서 무엇을 있는가? 우리는 가는 그러므로 것이다. 바로 피어나기 이상이 피는 노년에게서 것이 것이다. 긴지라 피는 우는 그들의 청춘의 힘차게 불어 힘있다. 부트스트랩4의 card에서 card-img-overlay라는 클래스가 생겨 이미지 위에 위 그림처럼 텍스트를 삽입하려고..

CSS를 사용한 삼각형 버튼

끝이 삼각형이 나오게 하는 것인데 마우스 포인터를 갖다대면 배경이 변하게 하는 것으로 이미지가 아니다. 아래와 같은 버튼을 많이 사용하는 것으로 안다. 아래에 대한 소스는 없고 아래의 것은 여기에서 배운 것을 여기에 맞게 활용한 것이다. 태그 아래를 적용한 CSS를 보니 익스플로러 6,7,8에서 지원하지 않는 CSS3의 transforms과 border radius를 사용한다. 그리고 텍스트그림자의 경우는 익스플로러9에서 지원하지 않는 속성을 사용한다. 그러므로 아래 것을 제대로 보기 위해서는 익스플로러 10,크롬,사파리,파이어폭스 등 최신 브라우저가 필요하다. 만악 아래 버튼의 가장자리 양쪽이 사각형이면 익스플로러 6,7,8중에 하나이라고 생각된다. 아래에 대한 것에 대한 소스는 여기에서 얻을 수 있다..

번역,크롬의 ImTranslator 확장프로그램

http://min-blog.tistory.com/1172을 쓰면서 크롬으로 번역하고 번역사이트에서 번역하는 것이 불편하다. 그 댓글에서 파이어폭스에서 부가기능 프로그램으로 번역하는 것에 대해 나와서 크롬에서 확장 프로그램을 설치하면 어떨까 해서 아래 그림에 보이는 ImTranslator 확장 프로그램을 크롬에 설치하니 정말 편했다. 설치방법은 크롬에서 새탭을 만든 후 거기에서 Chrome Web Store를 클릭한다. 그리고 검색어를 번역이라고 하여 ImTranslateor가 검색된다. 크롬의 확장 프로그램을 새탭을 만들어 Chome Web Store에서 찾는다. 스마트폰에서 구글 Play에서 앱을 찾는 것과 비슷하다. 영어가 포함된 페이지에서 원하는 문장을 선택한 후 단지 크롬의 확장 프로그램의 Im..

티스토리 일부 스킨,비밀 댓글이 없다

필자가 네이버 블로그를 하다가 티스토리로 간 후 비밀댓글을 쓸 수 없다는 것에 당황했다. 그때는 티스토리가 좋다는 것외에는 알지 못해 비밀 댓글이 없다는 것을 몰랐다. 제가 초기에 사용했던 스킨은 방명록의 경우는 비밀 댓글이 안 됐다는 것을 기억한다. 그리고 스킨중에 비밀댓글이 안되는 것이 있다는 것을 알았다. 여담으로 외국에서 많이 사용하는 워드프레스와 구글 블로그인 블로거에는 비밀댓글이라는 것이 없다. 한국에서 만든 블로그 프로그램인 텍스트큐브,텍스타일 등은 있다. 그리고 한국 포털 블로그인 네이버 블로그,다음 블로그는 있다. 비밀 댓글이 습관화되어 비밀 댓글이 필요없는데도 비밀 댓글을 다는 것 같아 필자의 1블로그인 http://min-blog.tistory.com에는 방명록을 빼고 비밀글을 달지 ..

카테고리 2단만 지원,티스토리/네이버 블로그에서는 2단까지만

티스토리 블로그를 비롯한 네이버 블로그 또한 카테고리는 2단까지만 지원한다. 이 블로그 사이드바를 보면 알겠지만 2단까지만 있을 것이다. 하나의 카테고리를 추가하면 자식 카테고리는 1만 된다는 것이다. 아래는 그림은 워드프레스인데 워드프레스는 2단 이상이 된다. 몇 단까지 되는가는 안해보아 모르겠다. 티스토리 관리로 들어가 카테고리 설정에서 2단 카테고리를 선택하고, 추가 버튼을 눌러 카테고리를 추가하면 아래 메시지도 나오지 않고 추가가 되지 않는다. 티스토리 경우 2단까지만 된다는 메시지가 나와야 좋은데...아래 그림은 네이버 블로그에서 2단 카테고리를 선택하고 카테고리 추가를 누르면 나오는 메시지이다. 필자가 2009년 네이버 블로그를 했을 때 2단 카테고리도 안됐는데. 예전은 티스토리가 최고였지만 ..

서울시 홈페이지,워드프레스 만들었다고 근거는 ??

워드프레스는 블로그 프로그램으로 국내에서가 아닌 국외에서 가장 인기있는 블로그 프로그램이다. 워드프레스는 블로그 프로그램이지만 블로그가 아닌 홈페이지처럼 만들 수 있다는 것을 알고 기능이 막강하다는 것을 안다. 많은 사람이 국내에 워드프레스로 만든 사이트를 서울특별시의 홈페이지라고 한다. 그러나 필자가 몰라서인지 어디가 워드프레스인지 모르겠다. 제 생각에는 서울시의 홈페이지를 만드는데 워드프레스를 기초로 한 것이라 생각한다. 필자의 워드프레스를 보면 회원가입이 서울시 홈페이지처럼 된 것이 아니다. 회원가입은 워드프레스 그 자체에서는 할 수 없는 것으로 안다. http://social.lge.co.kr/을 보면 워드프레스에서 회원가입 하는 것을 만들 수 있다는 것을 알 수 있다. 다시한번 생각해도 워드프레..

사진촬영정보(exif)가 나오는 위치 - 네이버/티스토리

티스토리와 네이버 블로그에서 사진촬영정보인 EXIF가 나오는 위치에 대해서 적고자 한다. 티스토리는 사진촬영정보가 있는 사진을 삽입하면 아래 그림을 보듯이 사진아래에 사진촬영정보가 나온다. 단, 티스토리 플러그인에서 EXIF 정보 출력을 활성화했을 경우입니다. 그렇지 않으면 나타나지 않는다. 아래는 소정방폭포의 사진이다. 네이버 블로그에서는 글을 확인하기전 첨부사진 촬영정보 표시 옵션을 선택하면 마우스 포인터를 사진에 올려 놓고 사진정보 보기 버튼을 클릭해야 한면 아래와 같이 나온다. 마우스 포인터를 사진에 올려야 사진 정보 보기 버튼이 나타난다. 위아래를 보며서 어느 블로그가 사진촬영정보가 잘 나오는지 보기 바란다. 나는 단순한 나열보다 그것이 무엇을 설명하는지 보여주는 것이 좋다. 블로그에 나오는 사..

PNG를 JPG로 저장하면 투명이 해결될 것이다

이 스킨에서는 투명 PNG가 안되고 배경이 흰색이므로 파일형식을 PNG 대신에 흰색으로 하면 될 것이다. PNG를 JPG로 저장하면 투명인 부분은 회색으로 나타나지 않고 흰색으로 되므로 JPG로 저장하면 될 것이다. 그러면 위와 같이 투명이 회색으로 나오지 않고 아래처럼 흰색으로 나오게 된다. 내가 캡쳐하는 이미지는 무조건 PNG인데 저장을 JPG로 하면 아래처럼 회색으로 보이지 않게 된다. 이 글을 보면서 생각난 것인데 이미지 테두리를 제거해야 하겠다. 이미지에 테두리가 생기니 이상하다. 아래 그림은 하나인데 파일형식이 PNG였다면 두 이미지간 사이가 투명이므로 회색으로 보일텐데 JPG로 저장해서 해결했다. - 무료로 팩스 10장보내기 - 이런 것이 티스토리의 단점이다. 모든 스킨에서 설명한 것이 적용..