안녕하세요.
P.223 에 나와 있는 "투명한 gif로 만든 고정위치 툴팁"에 대한 한 가지 문의와 의견 드릴려고 합니다.
* 문의 내용
제공되는 소스에서 CSS내용에 보면
p {
position:relative;
margin:10px 10%;
}
부분으로 지정이 되고 있는데요. p선택자에 position:relative; 로 상대적 위치를 지정하는 이유가 있는건가요?
* 의견
이 예제의 경우에 툴팁의 내용이 길어지면 네모상자로 돌출된 부분이 반복이 되는 문제가 있더라구요.
툴팁의 내용이 항상 짧은 것이 아니라 길어질수 있다고 생각이 되니까요.
그래서 제 나름대로 해결해 보기로는
div.tooltip p선택자에 적용된
background:url("images/tooltipBody.gif") top right;
부분에서 배경 반복을 없애기 위해서
background:url("images/tooltipBody.gif") top right no-repeat;
로 수정하고, tooltip.Body.gif파일이 현재는 세로 크기가 200픽셀인데 돌출된 부분의 아래 부분을 좀 더 키워서 세로 크기를 넉넉하게 500픽셀 정도로 구성한 gif로 제작하면 좋지 않을까 생각이 됩니다.
P.223 에 나와 있는 "투명한 gif로 만든 고정위치 툴팁"에 대한 한 가지 문의와 의견 드릴려고 합니다.
* 문의 내용
제공되는 소스에서 CSS내용에 보면
p {
position:relative;
margin:10px 10%;
}
부분으로 지정이 되고 있는데요. p선택자에 position:relative; 로 상대적 위치를 지정하는 이유가 있는건가요?
* 의견
이 예제의 경우에 툴팁의 내용이 길어지면 네모상자로 돌출된 부분이 반복이 되는 문제가 있더라구요.
툴팁의 내용이 항상 짧은 것이 아니라 길어질수 있다고 생각이 되니까요.
그래서 제 나름대로 해결해 보기로는
div.tooltip p선택자에 적용된
background:url("images/tooltipBody.gif") top right;
부분에서 배경 반복을 없애기 위해서
background:url("images/tooltipBody.gif") top right no-repeat;
로 수정하고, tooltip.Body.gif파일이 현재는 세로 크기가 200픽셀인데 돌출된 부분의 아래 부분을 좀 더 키워서 세로 크기를 넉넉하게 500픽셀 정도로 구성한 gif로 제작하면 좋지 않을까 생각이 됩니다.
2012.09.28 00:19:32 (*.55.81.239)
답변 감사합니다.
그런데 "상대적 위치를 지정하는 이유는 다른 p태그들과 균형을 맞추려고 지정하고 있습니다."라고 하셨는데
현재 position:relative 부분을 추가하거나 제거하더라도 전혀 보여지는 부분에서 차이가 없고, p의 갯수가 내용을 길게 하더라도 마찬가지 인것 같은데요... 어떤 역할을 하는지 주신 답변과 제가 테스트해봐도 이 부분은 잘 이해가 안 가네요.
그리고, 배경 이미지의 경우는 gif이미지 자체가 용량이 작은데다 거의 단색인 형태라서 용량부분은 부담을 거의 주지 않는 수준이라서 의견 드려 보았던 것이구요. 용량적인 부분은 늘 염두해두고 적용하도록 하겠습니다.^^
그런데 "상대적 위치를 지정하는 이유는 다른 p태그들과 균형을 맞추려고 지정하고 있습니다."라고 하셨는데
현재 position:relative 부분을 추가하거나 제거하더라도 전혀 보여지는 부분에서 차이가 없고, p의 갯수가 내용을 길게 하더라도 마찬가지 인것 같은데요... 어떤 역할을 하는지 주신 답변과 제가 테스트해봐도 이 부분은 잘 이해가 안 가네요.
그리고, 배경 이미지의 경우는 gif이미지 자체가 용량이 작은데다 거의 단색인 형태라서 용량부분은 부담을 거의 주지 않는 수준이라서 의견 드려 보았던 것이구요. 용량적인 부분은 늘 염두해두고 적용하도록 하겠습니다.^^
상대적 위치를 지정하는 이유는 다른 p태그들과 균형을 맞추려고 지정하고 있습니다.
의견주신방법은 어느정도 길어지느냐에 따라서 리소스를 적절히 조정하시면 된다고 생각합니다.
때에 따라서는 반복이 좋을 수도 있고 때에따라서는 큰 이미지가 좋을수도 있습니다.
이미지를 반복하는 경우에는 이유가 있습니다.
여기서는 툴팁이지만, 배경화면이라고 했을때 퀄리티를 보장하기 위해 커다란 이미지를 깔아버린다면
웹상에서 이미지를 받아오는 시간이 오래걸려서 유저가 로딩시간에 지루함을 느낄수 있습니다.
(보통 유저는 그리 참을 성이 좋지 않아서 자기가 반드시 원하는 정보가 아니면 1-2초의 딜레이에
페이지를 떠나버립니다.)
실제 웹페이지를 서비스 할때 이런부분은 매우 중요합니다.
작은 이미지를 한장 받아서 브라우져에서 반복 처리한다면 다운로드 속도는 줄어들게 됩니다.
다만 통으로 큰 이미지인 것처럼의 퀄리티는 보장할 수 없겠지요.
이런 장단점이 있으니 실제 개발을 하실때 생각하시면 좋지 않을까 생각됩니다.
즐거운 학습되세요~ ^^