호기심 가득! 모지모지!

티스토리 반응형 스킨을 만지작거리다보니 요즘 대세인 반응형 웹에 대한 자신감이 늘어가는 중!~ 기본은 뭐니 뭐니해도 각 화면별 CSS만 잘 정리해주면 된다는 것~ 이번에 손대볼 곳은 배경이미지입니다. 기본스킨은 배경이미지 하나를 사용하고 있습니다만, 그냥 하나로만 사용하기엔 심심하고 재미가 없죠? 그래서 각 화면별 그리고 펼쳐치는 메뉴쪽 배경을 바꿔 볼 생각입니다. 방법을 간단히 요약하자면, 1. 각 영역별 이미지를 업로드한다. 2. 각각의 CSS상의 이미지 URL을 바꿔준다. 정도입니다. 크게 어렵지 않으니 겁내지 마세요~ㅎ 일단, 교체할 영역을 살펴보죠~ 가장 큰 PC화면에서 볼때 좌측의 배경이미지가 나타나는 부분입니다. 다스베이더가 오토바이를 타고 있는 이미지 보이시죠? 두번째는 중간 크기로 브라우..

브라우저의 기본기능 개발자도구를 이용해서 CSS를 쉽게 편집하는 방법을 올려봅니다. 일반적으로 소스보기 후 해당 소스를 하나하나 찾아가며 수정하는 분들이 혹 있으실까바 조금은 편한 방법을 소개해드립니다. 이미 어느정도 HTML을 만질 수 있는 분들은 해당사항이 안될지도 모르겠네요. 위의 사진처럼 익스플로러11 기준, 오른쪽 상단을 보시면 톱니바퀴가 보이실겁니다. 클릭하시고 보시면 메뉴에 개발자도구가 있습니다. (타 브라우저도 비슷한기능들이 있습니다.) 그리고 익스 버전별로 메뉴 모양이 조금씩 다른데 기능은 거의 동일하게 들어가 있습니다. 클릭하시면 아래처럼 브라우저의 하단에 창이 열립니다. 새창으로도 열리기도 하지요~ 옵션에서 변경가능합니다만 설명은 생략할게요~ 개발자도구 창을 보시면 맨앞에 DOM탐색기..

티스토리 스킨 포럼에서 질문이 있어서 답글로만 알려드렸던 내용인데 댓글로 질문을 달아주신 분이 있어서 작성해봅니다. 티스토리스킨 반응형 #2 메인화면, 글목록화면과 게시물안의 이미지에 확대효과주기입니다. 이미지위에 마우스를 가져다 대면 이미지가 살짝 확대되는 효과입니다. 솔직히 너무 많이 주면 버벅일 수도 있어서 이런 효과는 조심해서 주는편이긴한데 나름 괜찮아서 추가해보았습니다. 현재 제 블로그화면들의 이미지를 확인해보시면 어떤 느낌의 효과인지 확인하실 수 있습니다. 본 게시물에 들어간 이미지들 위로 마우스를 가져다 대면 살짝 커지죠? 일단, 위의 CSS는 메인화면 즉, 글 목록화면의 썸네일에 적용되는 소스입니다. 줄 수를 보시고 비슷한 위치에 넣어주시면 됩니다. 소스는 아래 .list_content ...