다양한 배경을 익혔다.

제가 알고 있거나 배운 CSS를 사용한 배경을 3가지에 대해 적을까 합니다. 그리고 모두 이 블로그에서 볼 수 있습니다. 저는 배운 것을 그냥 알고만 있기가 싫거든요. 이런 것이 모두 적용 가능하므로 티스토리가 좋은 것입니다. 네이버나 다음 블로그는 못합니다. 

첫 번째는 CSS를 입문하면 기본적으로 익히는 배경 설정은 이미지 배경입니다. 대부분 아는 것입니다. CSS를 사용하지 않더라도 티스토리에서 스킨위자드로 하는 것입니다. 만약 스킨에 스킨위자드가 없다면 CSS를 사용해야 할 것입니다. CSS를 모른다면 배경 설정을 할 수 없다는....그래서 티스토리가 어렵습니다. 참고로 네이버 블로그라면 리모콘이나  관리 > 꾸미기 설정 > 세부디자인 설정으로 하는 것입니다. 네이버 블로그는 스킨에 리모콘이나 관리 > 꾸미기 설정 > 세부디자인 설정이 모두 있기 때문에 네이버 블로그는 쉽습니다. 

두 번째는 CSS3에 있는 background-size라는 속성을 사용하는 것이었습니다. 깊게 들어가 background-size:cover라는 것을 사용하여 한 이미지를 배경에 꽉 차게 최적화 하는 것으로 이 블로그 맨 아래에 사용했습니다. 그래서 화면을 축소해도 이미지가 반복되지 않습니다. 크롬이라면 글꼴 크기를 작게 해보세요. 배경이 반복되지 않고 화면에 반복되지 않습니다. cover에 대해서는 100번 말해도 모르니 한 번 보는 것이 좋으니 여기에서 보고 이해하기 바랍니다.  

cover를 어디에서 봤냐면 텀블러(tumblr)를 리뷰하다가 보았습니다. 그래서 찾아보았는데 CSS3에 background-size라는 속성이 생겼더라고요. 국외 블로그는 익스플로러 비중이 낮기 때문에 가능할 것입니다. 티스토리를 포함한 네이버, 다음 블로그 등은 못합니다. 왜냐하면 익스플로러 비중이 높아서....cover는 익스플로러 8 이하에서는 안 됩니다. 더해서 CSS3의 대부분은 익스플로러 8에서 지원하지 않습니다. 

background-size:cover를 익스플로러 7~8에서 되도록 하는 방법을 여기에서 설명하고 있었습니다. 그래서 제가 그 방법을 사용했는데 배경에 따라 이상하게 나오더라고요. 익스플로러 8에서 예전에 두 군에 적용했는데 하나를 없앴습니다. 익스플로러 7~8에서는 되게 해도 이상하더라고요. 익스플로러 낮은 버전.....그 한 군데는 부트스트랩 동영상 배경입니다. 

위에서 적었지만 background-size:cover는 네이버나 다음 블로그 등 대부분의 블로그에서 볼 수 있는 배경 반복이 아님을 다시 말합니다.

세번째는 로딩은 느리지만 멋있다고 생각하는 지금 보는 동영상 배경입니다. 참고로 video 태그는 전에 말했듯 HTML5 속성이라 익스플로러 8이하에서 사용할 수 없어 안 보입니다. 하여튼 익스플로러 7~8에서 안 되는 것이 많습니다. 익스플로러 6을 사용하는 사람이 없을 것이라 생각하고 무시합니다. 구글 애널리틱스 통계를 보니 이 블로그에 익스플로러 7~8로 접속하는 방문자가 많더라고요. 아래 더보기안에 그림을 보면 익스플로러 7~8 방문자 수가 한 달 방문자 수의 약 12%나 됩니다.

그런데 이 블로그 메인과 맨 위에 나타나는 배경은 HTML5만을 사용한 것이 아니라 부트스트랩을 사용한 것입니다. 그 코드에 대해서는 나중에 적겠습니다. 만약 이 글을 스마트폰에서 본다면 메인과 맨 위에 나타나는 동영상 배경은 볼 수 없을 것입니다. 그래서 hidden-xs와 hidden-sm을 사용해 나타나지 않게 했거든요.

위에서 말한 background-size나 video 태그를 사용할 수 있는 티스토리가 어려우나 좋은 것입니다. 즉 CSS3를 포함한 CSS를 사용할 수 있어서 좋습니다. 반면에 이런 것을 네이버나 다음 블로그에서는 사용할 수 없어 쉽습니다. 쉬우면 단점이 있기 마련입니다. 후에 지원하면 가능할 것입니다. 그런데 지원할까...익스플로러 7,8을 고려한다면....