컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post 번개가 친 후 30초 이내에 천둥소리가 들리면 대피해야파일을 압축하는 이유는? 파일 압축의 원리는? [컴퓨터 초보자를 위한 강좌]딜리셔스의 'post to del.icio.us' 아이콘으로 북마크한 후, 자동으로 돌아오...WinZip(윈집)이란? .zip 확장자 푸는 프로그램은? 윈집 다운로드 하는 곳은?소음 차단용 3M 귀마개(이어 플러그; Ear Plugs) 사용기ima (IMA) 확장자 파일은? / 플로피 이미지란? [QnA]WinImage: 플로피 이미지 만들기/편집 프로그램 - Floppy Image 에디터; ...blogger.com / blogspot.com 에 백업 기능이 있습니까? [QnA][QnA] '웹 페이지가 올바르게 저장되지 않을 수 있습니다'라는 에러가 납니다구글 피카사 웹 앨범 (Picasa Web Albums) 사용기

플리커 앨범 HTML/CSS 코드 바로세우기(?): Flickr Badge

Monday, June 26, 2006

플리커 앨범(배지)을 만드는 데 사용하는, HTML+CSS+자바스크립트 코드를 받아보니 여러 가지 문제가 있었습니다.

가장 큰 문제는 <style type="text/css"> 태그가 본문에 섞여 있다는 것입니다. 물론 그래도 에러가 나지는 않았지만 원칙적으로 금지되어 있는 일입니다.

그래서 이것을 다음과 같이 분리시켜 주었습니다:
<head>
...중략...
<style type="text/css">
...중략...

 /* CSS : Flickr Badge Start */
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, sans-serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important; display:inline; }
#flickr_badge_uber_wrapper {width:150px;}
#flickr_www {display:block; text-align:center; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, sans-serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, sans-serif !important; color:#666666 !important;}
 /* CSS : Flickr Badge End */


...중략...
</style>
...중략...
</head>



그런데 배지를 블로그 사이드 바에 붙여 넣고 보니까. IE에서는 문제가 없었는데 파이어폭스에서는, 배지의 그림들이 좌측으로 쏠리는 문제가 있었습니다. 1~2시간 동안 아무리 생각해 봐도 왜 그런지 알 수가 없었습니다. 그래서 아예 블로그 템플릿의 CSS 구성 요소를 하나씩 지워가며 역추적을 했는데, 결국 원인을 찾아내었습니다. 플리커 코드의 문제라기보다는, 블로거 템플릿에 있는 다음의 CSS 가 말썽의 원인이었습니다:

img {
        border:0;
        display:block; }


위의 CSS 는, 블로그의 모든 <img> 태그 속성을 정하는 것인데, display:block; 은 이미지를 블록(block)으로 렌더링하라는 의미입니다. 이미지는 원래 inline 구성 요소입니다. 그런데 블로그에서는 대체로 이미지를 블록으로 사용합니다.

그래서 display:block; 을 지웠는데 그랬더니 포스트에서 문제가 생겼습니다. 그림의 다음에서 행갈이가 되지 않고, 그림 우측으로 글들이 붙어 나왔습니다. 그래서 display:block; 을 지울 수가 없다는 사실을 깨달았습니다.

그런데 가만 생각해 보니
.flickr_badge_image img {border: 1px solid black !important; }
여기에다가 display:inline; 속성을 추가하면 되겠더군요. 역시 잘 되었습니다. 위의 코드 박스에, 파란 글씨로 이 결과가 반영되어 있습니다. display:inline; 이라는 것은 그림 우측에서 행갈이를 하지 말고, 그림을 문장의 자연스러운 한 부분으로 여기라는 의미입니다.




플리커 배지의 본격적인 코드



<!-- Start of Flickr Badge -->
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&amp;count=4&amp;display=random&amp;size=t&amp;layout=v&amp;source=user&amp;user=70007114%40N00"></script>
<tr>
<td id="flickr_badge_source" align="center">
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td width="10" id="flickr_icon_td"><a href="http://www.flickr.com/photos/mwultong/"><img id="flickr_badge_icon" alt="mwultong's photos" src="http://static.flickr.com/45/buddyicons/70007114@N00.jpg?1145511189" width="48" height="48" /></a></td>
<td id="flickr_badge_source_txt" style="text-align:left"><nobr>More of</nobr> <a href="http://www.flickr.com/photos/mwultong/">mwultong's paintings</a></td>
</tr></table>
</td>
</tr>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->


이 부분에는 큰 문제는 없었습니다.

다만 플리커 앨범(배지)에는 그림이 3개나 5개 나오는데, 4개가 가장 적당하다고 여겨졌습니다. 4개가 나오도록 하는 옵션이 제공되지 않았기에 직접 코드를 수정해 주어야 했습니다. 원래의 코드에 보면 count=3 이라는 부분이 있는데 이것을 count=4 로 바꾸어 줌으로써 그림이 한꺼번에 나오는 숫자를 조정할 수 있었습니다.

그리고 자바스크립트 주소 즉 src="" 이 속에, 앰퍼샌드(&) 기호들이 섞여 있습니다. &기호들을 &amp; 으로 변경했습니다. 뭐 꼭 이럴 필요는 없지만 되도록 HTML 규약에 충실하도록 하기 위해서입니다.


플리커 배지 맨 밑에, More of <사용자ID>'s photos 라는 부분이 있는데, '가운데 정렬'로 되어 있습니다. 그런데 브라우저마다 정렬이 달라지는 것 같기도 하고, 또한 왼쪽 정렬이 더 깔끔해 보여서

이 줄에: <td id="flickr_badge_source_txt"><nobr>More of...
이런 코드를
style="text-align:left"
넣어, 왼쪽으로 정렬되게 했습니다.


플리커 배지 맨 밑의 텍스트 자체도 바꿀 수 있었습니다.
More of mwultong's photos 라고 되어 있던 것을, More of mwultong's paintings 라고 바꾸어 보았습니다.


☞ HTML/CSS/자바스크립트(JavaScript)

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top