티스토리를 하면서 그래픽이 아닌 CSS로 해결하게 됩니다. 왜 CSS로 해결하려 경향이 있냐면 CSS를 어느 정도 알고 그래픽 프로그램을 잘 다루지 못하기 때문입니다. 결정적으로 티스토리는 네이버나 다음 블로그와 다르게 거의 제한이 없기 때문입니다. 만약 네이버 블로그처럼 제한이 있다면 CSS를 사용하지 못합니다.
어떤 사람은 속도 때문이라 생각할지 몰라도 짜증만 나지 않으면 속도는 그렇게 신경을 안 씁니다. 가령 웹폰트를 사용하지 않았을 것입니다.
원형 이미지
이 블로그를 최신 브라우저와 PC로 본다면 이 블로그 최상단의 원형 프로필 사진을 볼 수 있는데 이것을 네이버나 다음 블로거는 포토샵 등과 같은 그래픽 프로그램으로 만든 원형이 아닐까 하지만 부트스트랩(CSS)로 사각형 그래픽을 원형으로 만든 것입니다. 익스플로러 8이하에서는 상단의 프로필 사진은 사각형으로 보입니다.
네이버나 다음 블로그에는 CSS 제한이 있으므로 불가능합니다. 댓글 아이콘 등 대부분 원형은 CSS를 사용한 것입니다. 참고로 아래는 원형 이미지이니 익스플로러 8이하에서도 원형으로 보입니다.
그럼 원형을 만들기 위해서 어떻게 했냐하면 아래 그림을 보듯이 이미지에 class="img-circle"이라고 정의하고 이미지 크기만 정해 주면 끝납니다. 그리고 거기에 흰색 테두리를 주고 싶다면 img-thumbnail 까지 더해주면 됩니다. 즉 class="img-circle img-thumnbnail" 이것은 이 블로그 메인을 보면 됩니다. 참고로 이것에 대해서는 http://getbootstrap.com/css/#images-shapes에 나왔습니다.
만약 원형이 아니고 아래 그림처럼 모서리가 약간 둥근 모양을 하고 싶다면 부트스트랩에서는 class="img-rounded"으로 하면 되고요. 하여튼 부트스트랩은 쉽습니다. 쉬운만큼 많은 사람이 사용하여 톡특한 맛이 없습니다.
위는 부트스트랩에서 그렇다는 것입니다. 부트스트랩이 아니면 표준 CSS에서 위와 같이 사용하면 안 됩니다. 티스토리 #1 반응형 스킨을 사용한다면 그것을 보면 class="img_profile"에 CSS에 그것이 설정됐다는 것을 알 수 있습니다. 부트스트랩이 아닌 표준 CSS를 사용하는 것은 여기에 나왔듯이 border-radius를 사용한다고 알고 있습니다. 거기에 나왔듯 border-radius 속성은 익스플로러 9이상에서 지원하네요.
버튼
이 블로그는 부트스트랩을 사용하므로 http://getbootstrap.com/css/#buttons에 나온대로 사용하면 간단히 버튼을 만들 수 있습니다. class="btn"에 btn-default~btn-danger를 삽입하여 색상도 넣을 수 있습니다. 부트스트랩을 사용하면 간단히 알 수 있습니다. 이 블로그 처음으로,위로 가기,댓글 적기,더보기 등 다양한 곳에 사용했습니다. 참고로 예전에 이 블로그는 부트스트랩을 사용하지 않았으므로 http://www.cssbuttongenerator.com/에서 버튼을 만들었습니다.
아이콘
아래와 같은 것을 굳이 그래픽으로 만들지 않고 아이콘 폰트를 사용합니다. 아마도 티스토리를 사용한다면 많은 사람이 사용할 것입니다. 아래와 같은 것 일부는 부트스트랩에서도 지원하여 사용했습니다. 부트스트랩을 사용하지 않더라도 Font-Awesome이라는 곳에서 지원하는 아이콘 폰트가 있으므로 CSS만 안다면 거기를 사용이 간편합니다. 모른다면 그래픽을 사용할 수 밖에 없습니다.
아래 아이콘을 부트스트랩에서 지원하는 아이콘 일부입니다. 부트스트랩 사용 전에는 Font-Awesome에서 지원하는 아이콘을 사용했거든요. 부트스트랩을 사용하지 않는다면 http://fortawesome.github.io/Font-Awesome/에서 Font-Awesome을 사용해보세요. 참고로 부트스트랩에서 지원하는 아이콘은 http://getbootstrap.com/components/에서 볼 수 있습니다.
그라디언트
그라디언트 배경을 만드는 것인데 아래 그림을 보듯이 이 블로그 배경은 그래픽을 사용하지 않은 CSS로 만든 그라이언트 배경입니다. 배경이 마음에 안들면 CSS만 수정할 수 있으니 그래픽 프로그램보다 CSS로 만드는 것이 좋았습니다. 이제는 이 블로그 배경과 그라디언트 배경이 어울리지 않아 적용하지 않았습니다. 참고로 그라디언트 배경은 http://www.colorzilla.com/gradient-editor/에서 만들 수 있습니다.
거의 제한이 없는 티스토리에서 이런 것을 자주 함으로써 소재가 생기거든요. 예전에 제가 티스토리에서 블로그라는 소재로 글을 적었으니 다른 사람은 이렇게 할 필요가 없을 것 같습니다. 하겠다면 말리지 않겠습니다. 단지 블로그가 멋있다고 방문자수가 많은 것이 아닙니다. 멋있게 꾸밀 시간에 콘텐츠 생각을 하세요.
'IT.인터넷.생활 관련 > 스크립트.HTML.CSS' 카테고리의 다른 글
| 유튜브 동영상 배경에 나타내기 (0) | 2018.09.03 |
|---|---|
| 해결책은 jsfiddle 삽입이다. (0) | 2018.05.21 |
| jqeury 클래스추가 유용한 것 같다. (0) | 2017.09.15 |
| 동영상 배경으로 티스토리를 멋있게 (9) | 2016.05.27 |
| 동영상 배경 나오는 것을 해결했다. (5) | 2016.03.08 |
| 썸네일 사진에 재생 버튼 만들기 (4) | 2016.02.02 |
| CSS3와 스크롤 애니메이션 (2) | 2016.01.08 |
| 다양한 배경을 익혔다. (4) | 2015.11.24 |
