폴라로이드 이미지 / 카드

· 2017-08-31 (목) 17:45:12 · 2534

폴라로이드 이미지 / 카드


91308e91ff090fb4abed793c1e3856ce_1504169100_9184.png
 


div.polaroid {

    width: 80%;

    background-color: white;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}


img {width: 100%}


div.container {

    text-align: center;

    padding: 10px 20px;

}


[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

body {margin:25px;}


div.polaroid {

  width: 80%;

  background-color: white;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  margin-bottom: 25px;

}


div.container {

  text-align: center;

  padding: 10px 20px;

}

</style>

</head>

<body>


<h2>Responsive Polaroid Images / Cards</h2>


<div class="polaroid">

  <img src="rock600x400.jpg" alt="Norway" style="width:100%">

  <div class="container">

    <p>The Troll's tongue in Hardanger, Norway</p>

  </div>

</div>


<div class="polaroid">

  <img src="lights600x400.jpg" alt="Norway" style="width:100%">

  <div class="container">

    <p>Northern Lights in Norway</p>

  </div>

</div>


</body>

</html>


|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

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

+
분류 제목 글쓴이 날짜 조회
CSS 17-09-10 조회 2,018
CSS 17-09-10 조회 2,432
CSS 17-09-09 조회 2,008
CSS 17-09-09 조회 2,258
CSS 17-09-09 조회 2,050
CSS 17-09-07 조회 1,924
CSS 17-09-07 조회 2,293
CSS 17-09-07 조회 1,888
CSS 17-09-06 조회 1,982
CSS 17-09-06 조회 2,084
CSS 17-09-06 조회 2,092
CSS 17-09-02 조회 1,891
CSS 17-09-02 조회 4,588
CSS 17-09-02 조회 2,500
CSS 17-09-01 조회 2,908
CSS 17-09-01 조회 2,439
CSS 17-09-01 조회 2,370
CSS 17-08-31 조회 2,250
CSS 17-08-31 조회 2,535
CSS 17-08-31 조회 2,270
CSS 17-08-29 조회 2,421
CSS 17-08-29 조회 2,801
CSS 17-08-29 조회 2,116
CSS 17-08-25 조회 2,753
CSS 17-08-25 조회 2,176
CSS 17-08-25 조회 1,943
CSS 17-08-24 조회 1,621
CSS 17-08-24 조회 1,944
CSS 17-08-24 조회 2,716
CSS 17-08-23 조회 2,399