본문 바로가기

스킨편집

(2)
티스토리 Poster 스킨 상단 메뉴 고정하기 모바일 폰트 CSS 수정하기 깔끔한 반응형 스킨 Poster 티스토리 블로그 스킨 Poster를 사용하고 있습니다. 최근에 블로그를 생성하면 디폴트로 선택되는 스킨이기도 합니다. 무엇보다도 모바일과 PC 모두에서 잘 동작하는 반응형 디자인을 잘 지원하는 스킨이기도 하고 모노톤의 모던함을 강조하는 깔끔하고 심플한 면이 매력적인 스킨입니다. 상단 메뉴 버튼을 고정시키자 Poster 스킨은 좌측 상단에 사이드 메뉴를 오픈하는 햄버거 버튼이 존재합니다. 화면이 스크롤되면 해당 버튼이 사라지게 되어 모바일 등에서는 조금 불편한 것 같습니다. Poster 스킨의 CSS를 일부 수정하여 이 버튼을 항상 같은 위치에 고정되도록 해보겠습니다. 메뉴 버튼의 CSS 클래스 확인 크롬 개발자도구로 메뉴 버튼의 CSS 클래스를 먼저 확인합니다. Poste..
티스토리 블로그 이미지 그림자 효과 주기 이미지 그림자 효과 이미지에 box-shadow CSS 속성을 적용하여 테두리에 그림자 효과를 줄 수 있습니다. 티스토리 블로그 에디터에서 이미지에 효과를 줄 수는 없기 때문에 스킨의 CSS를 수정하거나 스킨에 Javascript 코드를 삽입하는 방법으로 이미지에 그림자 효과를 줄 수 있습니다. CSS box-shadow 속성 CSS box-shadow 속성의 문법은 다음과 같습니다. box-shadow: h-offset v-offset blur spread color h-offset 과 v-offset 은 필수로 지정해야 하는 속성 값이고 나머지 속성 값은 생략이 가능합니다. Value Description h-offset 그림자의 수평 위치 설정. 음수로 설정하면 왼쪽으로 이동시킵니다. (필수) v-..