[스크랩] 시시한 이야기
게시글을 올리는데 사용할 적당한 배경을 찾아서
이 게시판을 열람히리라 짐작합니다.
그러나 내가 올리는 배경을 퍼가서 사용하기가 불편하실 겁니다.~
(ㅜㅜ)
내가 올리는 배경을 원용하긴 어렵지만 그래도 별말없이 그냥 봐주시는
대다수의 열람자분들에게 죄송스럽기도 합니다.
이 페이지를 빌어 감사의 뜻을 전합니다.~
그래서~
말로만 감사가 어찌구 할 게 아니라~
열람자분들이 유용하게 사용할 수 있는 좋은 정보가 있다면 뭘까~
이런 취지로~
게시글을 올리는 사람이라면 정말 꼭 알아야 할
유익한 정보를 하나 알려드리겠습니다.
내가 전하고자 하는 이 기능은
배경이미지를 까는 태그에 추가된 옵션이며,
이 옵션이 나온지는 오래되었습니다.
그러나 여기서 누구도 사용하는 것을 본적은 없고~
나 또한 사용을 기피했습니다.
내가 이 기능의 사용을 기피한 이유는
ie8 버전에서 인식이 안된다는 것인데~
2016년을 앞둔 이 시점에서까지 사용을 안하는 것은
득보다 실이 더 크리라고 생각됩니다.
게시글을 올리면서 배경을 까는 사람이라면
누구나 한번쯤 고민하고~
근본적인 해결방안이 없어서
차선책 내지 포기한 적이 있을 겁니다.
그것이 뭐냐?~ ㅎㅎ~
배경이 화면과 딱 맞지 않는다는 점입니다.
흐흐흐~
배경이미지를 제작하는 사람도 일정한 크기로 제작을 합니다.
어디서 배경이미지를 구해도 그 크기와 가로 세로 비율은
참 다양합니다.
요즘 컴 모니터의 모양과 크기는 또 어떤가요?~
열거를 하면 짜증납니다.~
ㅋㅋㅋ~
이것을 무슨 재주로 맞춘답니까?~ 휴우~
위 이미지는 이 페이지 배경이미지이며 크기는 보시는바와 같습니다.
이 페이지 배경을 살펴보면~
열람자의 모니터가 무지하게 크든 또는 무지하게 작든~
또 정사각형이든 직사각형이든~
조금 잘려지는 부분이 있을지언정 대충 맞을 겁니다.
흐~
어떻게?~
그것이 가능할까?~
싱겁도록 간단합니다.~
<style>
body { background-image:url( https://t1.daumcdn.net/cfile/cafe/274BFA4D564BCCCB0B );
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom right;
background-size: cover; }
</style>
위 태그는 이 페이지 배경이미지 태그입니다.
background-size 는
배경이미지의 크기를 조절하는 옵션값을 선언하는 키워드입니다.
몇종류의 옵션값이 있고
각각의 값들에 대하여 경우의 수대로 결과를 상세하게 설명하면
책 한권 집필해야 할겁니다.~ ㅋ~
그냥 저 옵션을 사용하면 대충 맞춰줍니다.~ 흐~
그런데~
나는 화면에 공백이 있을지언정~
내가 올리는 배경이미지가 온전하게 모두 보이기를 원한다~
이런 필요를 주장하는 사람도 있겠지요?~
그런 필요를 느끼는 분은
background-size: contain;
요걸 쓰세욤.~
최대한 맞취서 보여주되~
가로 세로 비율이 맞지 않는다면 그 부분 화면은 공백으로 보입니다.
또 하나 더 말씀드리죠.~
내가 만든 배경이미지가 길쭉하다 해도~
어떤 모양의 모니터든 간에 무조건 딱 맞게 보여주고 싶다.
이미지가 옆으로 또는 아래위로 찢어지든 말든~ ㅋ~
이런 결과를 원하는 분은
background-size: 100% 100%;
요걸 쓰세욤.~
적어도 배경이미지를 까는 분이라면~
이 옵션을 무시할 수 없을 겁니다.
감사합니다.
(^.^)