본문 바로가기

전체보기100

[jQuery] placeholder에 오늘 날짜, 현재 시각 넣기 학원에 다니면서 HTML과 CSS를 배운지 약 한 달이 됐을 무렵, 첫번째 과제로 다른 친구와 둘이 사이트를 만든 적이 있었다. 주제를 선정하다가 콘텐츠가 풍부한 여행 예약 사이트(예를 들면 트립닷컴이나 마이 리얼 트립 같은)를 주제로 정해 구현했었는데 요즘 공부한 내용 복습 겸 그걸 조금 더 개선해서 다시 만들어보고 있다. 여행 사이트의 핵심이라 하면 아무래도 메인 상단에 있는 이 검색창이라 할 수 있는데 지난번에 검색해서 찾은 jQuery를 사용한 탭메뉴 덕분에 탭 안에 탭을 넣는 부분까지는 쉽게 구현할 수 있었다. [jQuery] 한 페이지에 탭메뉴 여러개 넣기 처음 만들었던 사이트를 포트폴리오에 사용하기 위해 다시 만들고 있는데 메인 페이지에서 사용하는 3개의 탭 메뉴를 CSS에서 jQuery로 .. 2020. 10. 19.
[CSS] safari에서 transition 오류가 날 때 해결 방법 핸드폰은 안드로이드이기에 safari를 전혀 사용하지 않고, 데스크탑은 Mac을 사용하지만 평소에는 크롬을 99.9% 이용하기에 블로그 스킨을 바꾸고서 safari에서 transition 때문에 오류가 나는 걸 모르고 있었다. 문제의 transition 오류는 바로 이 부분. 각 게시글에 마우스를 올리면 해당 썸네일의 이미지가 transform: scale(1.1);이 되는데 이미지를 부드럽게 커지게 하기 위해 transition: all .5s;를 적용했다. 한편 썸네일에는 border-radius: 50px 50px 0 50px;이 적용한 상태였는데 이렇게 마우스를 hover할 때마다 테두리의 border-radius가 잠깐 사라지는 것이다. 보통 이런 문제가 생겼을 때 가장 보편적인 해결 방법으로는.. 2020. 10. 18.
[티스토리 스킨 편집] 제목 잘리지 않게 하는 방법 (제목 말 줄임표 없애기) 지금 사용하는 북클럽 스킨을 살펴보니 게시글의 제목이 한 줄 이상 넘어가게 되면 이처럼 말줄임표를 붙이면서 첫 줄에서 넘어가는 문장을 자동적으로 생략하고 있다. 그냥 보기엔 게시글의 높이가 통일성 있어 보여서 좋을진 모르겠으나 내 경우 '블로그 꾸미기'카테고리에서 간단한 팁을 공유하는 게시글에는 다른 게시글과의 구분과 노출을 위해 '티스토리 스킨 편집'이라는 문구를 제목 맨 앞에 넣곤 하는데 그러면 이처럼 정작 전달해야 할 정보가 전해지지 않는다. 상단 메뉴... 블로그 폰... top 버튼... 스크롤시... 나도 나지만 방문자들이 보기엔 이게 뭐야? 싶을지도. 이제 시작단계라 지금은 게시글이 몇 없다지만 나중에 점점 게시글은 쌓이기 시작하는데, 제목이 계속 이렇게밖에 안 보인다면 나도 내 글을 몰라볼.. 2020. 10. 17.
블로그 다크 모드를 만들다. 티스토리 스킨 편집에 한창 재미들린 요즘. 다양한 걸 시도해보고 싶어서 자꾸만 오늘은 어떤걸 바꿔볼까 궁리하는데 그러다 문득 이런 생각이 들었다. "지금 스킨에서 다크 모드를 한 번 만들어볼까?" 다른 스킨으로 바꾸는 것도 좋지만 이번에 바꾼지 얼마 안 됐기 때문에 눈의 피로를 덜어주려는 생각보다는 그냥 새로운 분위기의 스킨을 만들고픈, 두개의 스킨을 같이 쓰고픈 마음이 더 컸다.🤣 그런데 하필 이런 생각이 왜 자려고 눕기 전에 들었는지... 얼른 만들어보고 싶어 괜히 핸드폰으로 구글링하면서 두근두근 잠 못 이루다가 다음날 아침에 바로 작업에 착수했다. 한 페이지를 다크 모드로 바꾸는 건 자바스크립트, 제이쿼리 쪼렙인 나도 할 수 있지만 페이지가 바뀌어도 한 번 바꾼 모드를 유지해야 하는 부분은 전혀 감.. 2020. 10. 16.
[티스토리 스킨 편집] 상단 메뉴 없애기(초⭐️간단!!) 티스토리 블로그에 관심을 가진지도 어언 한 달. 처음엔 Odyssey 스킨을 사용하다가 애드센스에는 Book Club 스킨이 좋다는 얘기를 듣고서는 북클럽 스킨을 조금씩 손보며 계속 사용하고 있다. 아마 많은 블로거들이 나와 같은 이유로 북클럽 스킨을 사용하고 있는 듯하다 :) 북클럽 스킨을 적용하고 스킨 편집 > 홈 설정에서 홈 화면 글 수를 9개로 늘리면 이렇게 콘텐츠의 길이와 사이드바의 길이가 얼추 보기 좋게 맞춰진다. 여기서 난 잘 사용하지 않는 상단의 메뉴도 없애볼까 한다. 관리 화면에서 홈, 태그, 방명록 대신 자주 쓰는 다른 메뉴를 넣을 수 있긴 하지만 북클럽 스킨 특성상 사이드바에 이미 카테고리가 있기도 하고... 또 메뉴가 많아서 주요 메뉴를 상단에 집어넣으면 이 상단바가 유용하겠지만 난.. 2020. 10. 15.
[티스토리 스킨 편집] 블로그 폰트 바꾸기(+무료 한글폰트 사이트) 블로그를 꾸밀 때 수고 대비 가장 큰 효과를 볼 수 있는 걸 찾아본다면 바로 블로그의 폰트를 바꾸는 게 아닐까 싶다. 지금 쓰는 스킨도 새로 만든 것이 아니라 기존의 티스토리 스킨인 Book Club스킨에서 하나 둘 고친 것이다 보니 기본 스킨에서 솔직히 큰 차이는 없달까? (아무리 이것저것 뜯어고쳐봤자 전체적인 구조가 변하질 않았으니ㅠ) 그래서 스킨을 입히자마자 처음 시도한 건 바로 폰트 바꾸기~ 일단 무료 한글 폰트 사이트에 접속한다. 상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누 상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누 noonnu.cc 이미 알 사람은 다 아는 무료 한글 폰트 사이트 '눈누'. 무료 한글 폰트가 귀하디 귀한 요즘 같은 때에 상업적 이용도 가능한 데.. 2020. 10. 14.
[티스토리 스킨 편집] top 버튼 꾸미기(CSS3 animation) 지금 사용 중인 스킨은 티스토리에서 만든 스킨 중 Book Club. 이 스킨의 하단(footer) 오른쪽을 보면 페이지가 아무리 길더라도 클릭 한 번에 페이지 맨 위로 갈 수 있는 버튼이 하나 있다. 여기에 마우스를 올려보면 이렇게 버튼 색깔이 바뀌는 것은 좋긴 하나, 크기도 작고, 페이지를 최하단까지 내려야 이 버튼을 볼 수 있기 때문에 나는 이걸 좀 더 내 취향에 맞게, 쓰기 편하게 바꿔보려 한다. (Home 키가 없는 키보드 특성상 commnad + 위 화살표를 눌러야 하는데 귀찮다. 그냥 클릭 한 번으로 끝내고 싶다.) 우선 이번에 수정할 내용 첫 번째로는 간단하게 페이지 어느 부분에서도 간편하게 맨 위로 갈 수 있도록 스크롤을 하거나 창 크기를 조정해도 항상 그 위치에 고정하는 것. 그리고 마.. 2020. 10. 12.
리틀 포레스트 밤조림, 올 가을도 달달하게! 재작년에 영화 리틀 포레스트를 본 후, 나도 밤 조림을 따라 만들어 본 적이 있다. 신랑도 나도 밤을 워낙 좋아해서 평소 같으면 이렇게 뭘 만들 새도 없이 다 쪄서 먹었겠지만 밤 농사를 짓는 외가에서 받은 게 워낙 많았던지라, 어머님께 드리고도 남은 양이 어마어마했다. 마침 영화에서 봤던 밤 조림이 특히 맛있어 보였던 게 기억나 한번 따라 만들었는데 만드는 게 비록 조금 귀찮긴 해도 쪄서 먹는 것과는 다른 색다른 맛이 있었다. 그리고 올해도 역시나 밤 풍년. 지지난주에 직접 외가에 내려가 밤을 주워왔는데 그땐 떨어진 지 좀 된 밤들이라 그런지 벌레도 많이 먹고, 알도 평소보다 크지 않아서 올해는 밤으로 뭐 만들 거 없이 그냥 조금씩 쪄서 먹으면 되겠다 싶었다. 그런데, 지난주에 또 내려간 엄마가 새로 주.. 2020. 10. 8.
도일리 드림캐쳐 코바늘로 도일리를 만드는 건 좋은데, 문제는 그렇게 만든 도일리를 활용할 곳이 생각보다 많이 없다는 것이다. 작은 건 주로 컵받침으로 쓰고, 식탁에도 두 개 깔아보고, 선반으로 쓰는 침대 옆 작은 통나무에도 깔아보지만 완성된 후 옷장에서 그냥 방치되고 있는 도일리가 아직 세 개. 이걸 어떻게 활용할 방법이 없을까 생각하다가 핀터레스트, 그리고 인스타에서 많이 봤던 바로 그 인테리어 소품! 드림캐쳐를 만들어보기로 했다. 우선 사용할 도일리는 가장 최근에 만든 이것. 28cm 원형 도일리 발단은 인터넷에서 도일리를 구경하다가 발견한 사진 한 장. 도일리 도안을 보다 보면 자주 보이는, 일명 파인애플이라 불리는 그 모양이 조금 지겨워지던 때에 색다른 느낌의 도일리는 없을까 shynaunum.tistory.co.. 2020. 10. 5.

티스토리툴바