플렉스박스 포토갤러리

CSS로 가로 배치 가변 메뉴 만들기

HTML에서 리스트 방식으로 뿌리는 카테고리 구조는 보통 세로로 뿌려지게 됩니다. 블로그 레이아웃 구조상 왼쪽 메뉴나 상단 메뉴로 뿌릴 경우 세로로 뿌리게 되는데, 상단 메뉴로 카테고리를 뿌리리면 초보자의 경우 배치를 잡는데 상당한 애를 먹게됩니다. 생각보다 간단한데, 강제로 위치를 잡으려고 이것저것 만지다보면 레이아웃이 산으로 가게 되는 경우가 종종 발생합니다. 기본 개념을 이해하고 첨부파일의 소스를 보면 생각보다 쉽게 가로배치 메뉴를 붙..

사진 2018.10.09 02:28
글을 퍼날라 복제 블로그를 운영하는 유저를 응징하는 방법

블로그를 운영하다보면 정말 토시하나 틀리지 않고 내글을 그대로 가져다가 자기 블로그에 올려놓고 광고를 덕지덕지 붙여놓은 사이트를 경험할때가 있습니다. 좋은 글이어서 어쩌다 복사해건 것이거나, 본인 의견이라도 다는 식으로 수정이라도 좀 해서 올려놨으면 그러려니 할 텐데, 여러개를 그대로 반복적으로 베껴가는 걸 보게 되면 화가 치밀어오르게 됩니다. 이런 경우 어떻게 해야하나 고민을 하게 되는데, 보통은 이런 블로거들은 복사를 하지 말라고 경고 메시지를 ..

사진 2018.10.09 02:17
SCSS로 CSS를 최적화해서 만들기

CSS Preprocessor(프리프로세서)가 나온지 꽤 되었지만, 대규모 사이트 작업이 아닌 이상은 그다지 필요성이 없어서인지 SCSS나 LESS가 생각보다는 그렇게 널리 사용되고 있지 않습니다. 써보면 꽤 편리한데. Preprocessor 컴파일러를 설치해서 매번 컴파일을 해주는 것도 귀찮고, 자잘한 사이트의 부분부분을 조정하는데 한단계를 더 거쳐서 뭔가를 해야한다는 점이 꽤나 귀찮기도 합니다. 이런 귀찮음을 줄여주기 위해 파일이 변경되면 자동으..

사진 2018.10.09 02:12
네이버 검색에 잘 노출되는 컨텐츠를 만들기

네이버 검색엔진이 최근에 개편이 되면서 자사 블로그와 카페 글만을 노출해주는데서 타사 블로그의 글도 검색결과에 포함해서 보지는 통합 구조로 변경이 되면서 일대 혼란이 일어났었습니다. 티스토리의 글이 갑자기 네이버 검색에서 검색이 안되는 경우가 발생하면서 검색 최적화를 다시하거나, 변경된 정책에 맞춰 저품질 사이트가 되지 않는 피나는 노력?을 해야하는 상태가 되었습니다. 시간이 지나면서 다소 개선되었지만, 네이버 블로그를 같이 열어야 하는게 아닌지 고..

사진 2018.10.09 02:06
블로그의 어뷰징 글과 유저를 차단하는 방법

블로그를 운영하다보면 가끔씩 광고글이 올라가는 것을 경험하게 됩니다. 사이트 방문자가 많을 수록 유명한 사이트가 많을 수록 이런 댓글들은 점점 늘어납니다. 이런 경험을 해보지 못했다면 당신의 블로그는 방법자가 거의 없는 블로그라는 뜻이거나 어뷰저에게 그다지 맛나보이는 사이트가 아니라는 뜻입니다. 불행하게도 그렇습니다. 일단 어뷰징 댓글을 보게되면 관리자 화면에서 그냥 삭제하지 말고, IP와 유저 아이디를 확인해서 차단을 박는 일부터 해야 합니다.

사진 2018.10.09 02:01
검색 엔진에서 잘 노출되게 하는법

검색엔진은 기본적으로 잘 알려진 사이트들만을 주기적으로 검색합니다. 잘 알려지지 않는 당신의 사이트는 있는지조차 알지 못하며, 일년을 기다려도 검색엔진에는 사이트의 어떤 글도 표시가 되지 않습니다. 엄청나게 뛰어난 나의 글을 검색엔진이 알아서 찾아와서 인덱싱을 해주고 검색 결과 최상단에 표시해줄거라는 기대는 그냥 망상쯤에 해당된다고 보면 됩니다. 당신의 사이트가 존재한다는 사실을, 또 사이트에 어떤 글이 있다는 사실을 검색엔진에 친절하게 알려주는 일..

분류없음 2018.10.09 01:59
Javascript로 구현한 영화정보를 가져오는 소스

영화진흥원 사이트에서 제공하는 영화정보 공개 API를 기반으로 만든 자바스크립트 소스입니다. 소스 그대로 복사해서 사용하면 되고, API키는 영화진흥원 사이트에서 본인 것으로 새로 발급받으셔서 기존의 것을 덮어쓰면 됩니다. 기본적으로 화면 로딩시에만 한번 불러오도록 설정되어 있으며, 타이머 주기값을 0보다 큰 값을 주면 분단위 주기로 화면 갱신을 하면서 최신 영화 정보를 로테이션해서 보여줍니다.

분류없음 2018.10.09 01:54
Masonry 타입 반응형 포토 갤러리 스킨

브라우저 너비에 따라 자동으로 이미지 크기와 배치가 자동으로 정렬되는 스킨입니다. 이미지 로딩전에 레이아웃이 잡혀서 레이아웃이 깨지는 문제가 생기지 않도록 이미지 로딩 후 레이아웃이 애니메이션처럼 잡히는 스킨입니다. 레이아웃 지연이 불편하신 분들은 이미지가 좀더 빠르게 로딩되도록 썸네일 크기를 조금 더 작게 조정해주실 것을 권장합니다.

사진 2018.10.09 01:50
반응형으로 자동 크기 조절되는 우측 사이드바

브라우저 너비가 변하는데 따라서 자동으로 표시되거나 호출 아이콘으로 반응하는 우측 사이드바 입니다.쇼핑몰 장바구니나 웹사이트 우측에 표시해야할 고정 내용들을 담는데 유용하게 사용할 수 있습니다. 사이드바가 브라우저 크기에 반응하는 지연시간을 설정할 수 있습니다. 소스의 주석 표시된 위치에 사이드바 크기와 배경색을 지정하면 다양하게 모양을 변형할 수 있습니다.

사진 2018.10.09 01:45
후지 XT-3 샘플 샷입니다.

새로 구입한 카메라 테스트겸 올립니다. 가볍게 스냅으로 들고 다니기에 좋아서 풀프레임 포기하고 구입했는데 잘 구입한 것 같습니다. 렌즈는 번들킷만 구입을 했는데, 표준줌 F2.0이 탐이 나기는 했지만 예산의 압박을 못이기고 기본 번듯킷만 우선 써보기로 했습니다. 연사 속도는 가히 우주 최강급입니다. 오토포커싱도 역대 최강급이라고 할 만큼 뛰어납니다. 렌즈 성능이 번들입에도 빠르게 반응하고 선예도도 나쁘지 않아 번들에 이정도면 감사할 정도입니다.

일상 2018.10.09 01:42
초보자도 세팅 가능한 이미지 슬라이더

초보자도 간편하게 개인웹사이트나 블로그에 적용할 수 있게 만들어진 이미지 슽라이더 입니다. 이미지 크기와 갯수, 그리고 롤링 타임 간격만 값을 입력해주면 바로 사용할 수 있는 이미지 슬라이더 입니다. 이미지 안에 텍스트 문구를 넣고 싶은 경우 html 파일 안의 주석으로 표시된 텍스트 문구 넣는 위치에 내용을 입력하면 자동으로 레이아웃이 잡혀 이미지 슬라이더와 함께 표시가 됩니다.

사진 2018.10.09 01:39
반응형 다크 배경 스킨 배포합니다.

어두운 배경을 선호하는 분들을 위한 검정 배경의 스킨입니다. 배경 이미지로 별이 빛나는 밤하늘을 붙여서 야경을 보고 있는 듯한 느낌을 낼 수 있도록 했습니다. 컨텐츠 가로 크기는 820px로 설정되어 있습니다. 블로그 설정에서 컨텐츠 에디터 너비를 820px로 조정하셔야 레이아웃이 잘 적용됩니다. 배경 이미지는 교체할 수 있습니다. 또는 심플하게 검정 배경을 원하시면 CSS파일에서 배경 이미지 링크를 삭제하면 됩니다.

사진 2018.10.09 01:36