컴퓨터, IT/티스토리3 티스토리 꾸미기, <kbd> 태그로 키보드 입력 표시하기 블로그를 여러 가지 용도로 사용하는 분들이 많겠지만 정보 제공이나 리뷰, 특히 IT 계열 쪽 글을 작성하시는 분들의 경우 키보드 단축키 입력을 표시하는 경우가 종종 있죠. 이런 경우 단순히 글자를 "ctrl + alt + shift + i" 처럼 타이핑 해서 표현해도 되지만 키캡 형태로 스타일을 적용해 보여주면 좀 더 그럴듯 하게 글을 꾸밀 수 있습니다. 바로 아래 링크처럼 말이죠. ctrl + alt + shift + i 이걸 구현하기 위해서는 여러 방법이 있지만 이 글에서는 kbd 태그를 사용하는 방법을 적어봤습니다. kbd 태그 태그는 본래 키보드 입력, 음성입력 등 사용자의 입력을 나타내기 위한 폰트로 큰 효과는 없고 단순히 브라우저에서 고정폭 글꼴(글자의 폭이 항상 같은 글꼴입니다. 한글같은 사.. 2020. 4. 16. 티스토리 제목 텍스트에 윤곽선, 그림자 넣기 시간이 조금 생긴 김에 기본 템플릿만 적용해놓고 사용하던 티스토리 블로그에 소소한 디자인 수정을 시작중입니다. 앞서 글에서는 본문 첨부 이미지의 크기와 배경을 지정했었는데, 이걸 마치고 블로그를 다시 훑어보다보니 이제는 제목 부분의 텍스트가 거슬리더군요. 이것도 제가 사용하는 "Book Club" 스킨의 문제인데, 이미지 위에 올라가는 텍스트에 아무런 배경이 없다보니, 밝은 단색 배경이 있는 이미지 위에 올라가는 텍스트의 경우 제대로 보이질 않습니다. 그리고 글 상단에 올라가는 배너 역시 마찬가지입니다. 이걸 해결하기 위해서는 텍스트 뒤에 배경을 깔아주던가, 그림자를 넣어주던가, 아니면 텍스트 자체에 아웃라인을 주어야 하는데 일단 전 여기에도 그림자를 깔아주는 방법을 사용하려 합니다. 스킨 편집하기 앞서.. 2020. 4. 15. 티스토리 이미지에 윤곽선, 테두리 넣기 티스토리 블로그의 경우 미리 만들어진 다양한 스킨을 적용할 수 있어 HTML, CSS를 잘 다루지 못하는 사람이라도 간편하게 맘에 드는 디자인을 고를 수 있는건 장점이지만 기본 스킨에서 제공하는 세팅 외에 사용자가 원하는 부분을 일부 수정하려면 결국 CSS나 HTML 소스를 어느 정도 수정할 수 밖에는 없습니다. 예를 들어 이미지에 경계선, 또는 경계면 효과를 넣는 법 같은 것 말이죠. 일부 티스토리 스킨들의 경우 이미지 업로드시 경계면에 border line, 또는 여타 효과가 없습니다. 물론 디자인 컨셉에 따라 그게 맞는 경우도 있겠지만 사진이 아닌 그림이나 웹 스크린샷등을 올릴 땐 경계선이 있는게 더 좋을때도 있는데, 이런 경우 일일히 에디터를 HTML 모드로 전환 후 원하는 보더 효과를 추가하거나.. 2020. 4. 15. 이전 1 다음
