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

 
Previous Post 지메일(Gmail)에, 자신의 프로필 사진 업로드 기능 생김 / 사진 올리는 법[리눅스] 파일명 앞에, 마침표가 있는 파일은? 유닉스 히든 파일(Hidden Files)...[리눅스/Linux] 부팅할 때, NumLock 키 자동으로 켜기: NumLock ON[리눅스] 환경 설정 파일들의 간단한 설명; profile / bashrc / bash_p...리눅스/Cygwin(시그윈)의, 프롬프트에 현재 경로만 나오도록 변경; PS1 정의리눅스 ls 명령에서, 한글 파일이름 표시법은? Cygwin에서 한글 파일명이 물음표로 바...Cygwin (시그윈) 다운로드/설치법 [윈도우에 리눅스/유닉스 환경 만들기][QnA] IE 브라우저 제목표시줄에, 제목이 아닌, 페이지 주소(경로)만 표시돼요 [HT...[HTML-CSS 기초] 웹페이지에, 링크(link) 만드는 태그는?; 하이퍼텍스트 링크 ...[포토샵 강좌] 별(Star) 그리기 / 각종 문양 그리기: Adobe Photoshop;...

[HTML-CSS] 이미지(그림/사진)에 액자 붙이기: CSS Picture Frame

Thursday, June 29, 2006
스폰서 링크

똑같은 그림이라도 어떤 액자에 담겨 있느냐에 따라 분위기가 상당히 달라집니다. 일전에 올렸던 "[서양화] 갤러리에 유화 1점 업데이트 : OIL PAINTING GALLERY" 포스트에 오늘 그림을 넣어서 업데이트하려고 보니까, 액자가 없으니 썰렁하더군요.

<table align="center">
  <tr>
    <td style="border:1px solid black; padding:20px;"><a href="http://ca.geocities.com/mwultong/gallery/01031226.html"><img src="http://static.flickr.com/64/170214667_7c06daca7d_o.jpg" width="200" height="150" style="border:3px solid blue" alt="서양화 갤러리" /></a></td>
  </tr>
  <tr>
    <td style="font:11px Arial, Helvetica, sans-serif; text-align:right;"><a href="http://www.flickr.com/photos/mwultong/"><span style="color:#3993ff; font-weight:normal">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</span></a></td>
  </tr>
</table>

그래서 이런 액자 만들기 코드를 작성해 보았습니다. 원래는 예전에 만든 것인데 블로그에 적합하도록 개조했습니다. 위에서 굵게 강조된 부분이, 액자를 이루는 핵심 코드입니다. IE와 파이어폭스에서 똑같이 보이도록 조정했습니다.

※ 두 번째 <tr>의 <td> 태그에 있는 www.flickr.com 링크는 플리커(Flickr)에 이미지를 올려두었을 때만 의미가 있습니다. 플리커 약관에 의하면, 이미지를 플리커에 올려놓고 호스팅할 때는, 반드시 그 그림을 플리커(Flickr)로 링크해야 한다고 되어 있습니다. 그런데 여기서는 그림을 플리커로 링크를 안했고 일반 웹계정으로 링크했기에, 대신에 플리커로 가는 링크를 이렇게 직접 만들어서 붙인 것입니다.



결과:
서양화 갤러리
www.flickr.com




단, 블로거닷컴(www.blogger.com + blogspot.com)의 경우에는, 태이블을 이루는 태그들 사이에 행갈이가 없이 <table><tr><td>... 이렇게 한 줄로 이어붙여야 테이블이 정상적으로 나옵니다.

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