css 미리보기 이미지 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

css 미리보기 이미지 정보

CSS css 미리보기 이미지

본문

미리보기 이미지


이 border속성을 사용하여 축소판 이미지를 만듭니다.


31234ab8620368f9ba13b0aed9c8761d_1503985114_8072.png
 

img {

    border: 1px solid #ddd;

    border-radius: 4px;

    padding: 5px;

    width: 150px;

}


<img src="paris.jpg" alt="Paris">



[전체소스]


<!DOCTYPE html>

<html>

<head>

<style>

img {

    border: 1px solid #ddd;

    border-radius: 4px;

    padding: 5px;

    width: 150px;

}

</style>

</head>

<body>


<h2>Thumbnail Images</h2>

<p>Use the border property to create thumbnail images:</p>


<img src="paris.jpg" alt="Paris" style="width:150px">


</body>

</html>



31234ab8620368f9ba13b0aed9c8761d_1503985140_608.png
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
}

img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>
[전체소스]
<!DOCTYPE html>
<html>
<head>
<style>
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
}

img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>

<h2>Thumbnail Image as Link</h2>
<p>Use the border property to create thumbnail images. Wrap an anchor around the image to use it as a link.</p>
<p>Hover over the image and click on it to see the effect.</p>

<a target="_blank" href="paris.jpg">
  <img src="paris.jpg" alt="Paris" style="width:150px">
</a>

</body>
</html>

추천
0

댓글 0개

전체 1,263
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT