블로그에 라이트박스 기능을 적용했습니다.

2014. 4. 18. | 0 comments

사실 구글 Blogger에는 자체적으로 라이트박스 기능이 들어있습니다. 사진을 첨부하면 알아서 멋진 라이트박스로 보여주죠. 하단에 썸네일도 나오고, 무척 좋은 기능입니다. 설정에서 간단히 온/오프 할 수도 있죠. 포스트 본문에 삽입된 작은 사진을 크게 보여주기 때문에 간단히 사진 갤러리로도 사용할 수 있습니다.

하지만 2006년부터 꾸준히 커스터마이징을 해온 제 블로그 템플릿에서는 어떤 이유에선지 작동하지 않았습니다. 2009년에 구형 템플릿 -> 레이아웃(편의상 구분) 방식으로 변경한 이후 다시 최신 템플릿에 맞춰 바꿔야 하지만, 시간도 없고 아무래도 영 귀찮네요. 여기저기 손댄 부분도 많은데 그걸 다 옮겨오기가 겁날 정도입니다.

해외 사이트도 뒤져보고 여러 방법을 모색해 봤지만 결국 해결하지 못했습니다(라이트박스 관련 스크립트가 각 국가 언어별로 따로 제공되더군요). 그래서 아예 직접 만들까도 고민했습니다. 그 결과물이 이것 입니다만 결국 완성은 못했습니다. 원리는 간단하죠. 구글플러스에 올린 사진을 블로그에 삽입했을 때, 버튼을 누르면 중간의 주소값을 바꿔 좀더 큰 사진을 보여주도록 하는 것입니다. 어늦어도 구현도 되었지만 나머지 정리하는데 손이 많이가서 결국 중단하게 되었네요.

그러다 우연히 찾은 http://baksimgorkii.blogspot.kr/2010/10/blogspot-lightbox.html 이 글에 소개된 플러그인이 괜찮아보인다 싶었습니다. 예전에 여기저기서 자주 보였던 라이트박스 플러그인인데 Blogger 용으로 개조가 잘 되어 있더군요.

적용해봤더니 잘 됩니다. 다만 이미지 사이즈와 애니메이션 속도, 구글플러스에서 가져온 사진 파라미터 등이 약간 달라 수정을 좀 했습니다. 결과적으로 큰 사진을 1000px로 보여주고, 애니메이션 속도는 더 빠르게 했으며, 구글플러스의 사진도 문제 없이 보여지도록 했습니다.

지금 당장은 얼마 전 올린 꼬마버스 타요 직찍 사진마니산 일출 사진 포스트에 적용되어 있습니다. 앞으로 구글플러스에 올렸던 사진들도 블로그에서 많이 소개하고자 합니다.

게시물 내용의 일부입니다.
전체 내용을 보려면 클릭해주세요.

서울시내를 누비는 꼬마버스 타요, 가니 직찍 사진!

2014. 3. 28. | 2 comments

어제부터 꼬마버스 타요가 서울시내를 누비고 있는데요, 이중 ‘타요’와 ‘가니’가 광화문사거리를 지나죠. 그래서 직접 사진을 찍어왔습니다. 참고로 4개 캐릭터 버스의 각 노선과 차량번호는 아래와 같습니다.

 

  • 타요(파랑색) – 370번 간선노선, 74사5040
  • 로기(초록색) – 2016번 지선노선, 74사5009
  • 라니(노랑색) – 2211번 지선노선, 70사6322
  • 가니(빨강색) – 9401번 급행노선, 74사2171

 

포털사이트 DAUM의 ‘다음 지도’에서는 각 꼬마버스들의 위치를 확인할 수 있습니다. PC에서 http://map.daum.net/?tayo=on 로 접속하거나, 스마트폰에서 http://m.map.daum.net/actions/tayo 로 접속하면 됩니다(다음지도 앱에서는 지원하지 않네요). 그냥 daum.net 에 접속해서 ‘꼬마버스 타요’를 검색해도 볼 수 있군요.

 

다음지도와 서울버스 앱으로 타요의 위치를 확인한 뒤, 광화문사거리로 나갔습니다. 이 근처에서 370번 버스는 동화면세점 맞은편(북쪽), 그리고 금호아시아나 본관 앞에서 정차하죠. 회차는 서대문역 근처에서 합니다. 회차지점에서 잠깐 쉬기도 하니까 구경하시려면 농협중앙회 앞 정류장에서 기다리는 것도 좋겠네요.

게시물 내용의 일부입니다.
전체 내용을 보려면 클릭해주세요.

CSS에서 float 해제를 위한 여러 방법 중 애용하는 몇 가지

2014. 3. 21. | 0 comments

CSS에서 float란 개념은 참 쉬우면서도 어려운 개념이다. 각 요소들간의 관계도 따져봐야 하고, 부모요소와 자식요소 간의 관계도 따져봐야 한다. 수치 계산도 해야 하고, 정렬 문제도 고민해야 한다.

특히 제때제때 float를 해제해주는게 골치아픈데, 박스요소 안에 float된 요소가 있을 때나 바로 아래에 float되지 않은 요소 등을 넣을 때 신경쓰인다.


▲ 가장 흔한 박스 안의 float 요소. 노란색 박스 안에 빨강, 파랑 박스가 각각 좌우로 float된 형태. 딱 위와 같은 모습을 원하지만...

 


▲ 막상 만들어보면 이렇게 되기 일쑤. 빨강, 파랑 박스의 높이값 만큼 노란색 박스의 높이값이 늘어나지 않는다. 이때 float를 해제시켜주어야 하는데...

 

게시물 내용의 일부입니다.
전체 내용을 보려면 클릭해주세요.
태그:

특별히 선호하는 브랜드가 없을 때 노트북을 골라봅시다

2014. 3. 18. | 0 comments

(원래 지인 설명용으로 쓴 내용이라 지극히 주관적인 의견 및 개인적인 편견이 엄청나게 들어가 있으니 참고하시기 바랍니다.)


  • 용도부터 체크하자, 여기서의 용도란 뭐 '문서작업하고 인터넷 좀 하고 음악 좀 듣고 해요' 이딴거 아님. 그런 건 20만원짜리 아톰넷북으로도 다 됨. 동영상/사진 편집이나 하드코어 게이머가 아닌 이상, '포터블'인지 '데스크탑 대용' 인지만 체크해도 굳.
  • 노트북 들고 이동이 잦은 '포터블' 쪽이라면 일단 크기는 14인치 이하로 가자. 그리고 무게를 체크해 보자. 배터리도 많을 수록 좋다.
  • '데스크탑 대용'이라면 14인치 이상으로 가도 무방. 오히려 작은 것보다 더 싼 경우도 많다. 집에 놓고 쓰기 때문에 무게는 신경쓰지 않는다. 배터리도 마찬가지.

게시물 내용의 일부입니다.
전체 내용을 보려면 클릭해주세요.

트위터 타임라인의 이미지 미리보기 기능은 얼굴인식을 하는 듯

2014. 3. 3. | 2 comments

오랜만에 명탐정코난 놀이를 했습니다... 트윗으로 관련 내용 올립니다.
시간이 날 때 확실히 테스트를 해봐야겠군요.

 

 

게시물 내용의 일부입니다.
전체 내용을 보려면 클릭해주세요.