<![CDATA[
<div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/ZUhri4EEOmw?si=oByZKiOTiv6gVvo7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/ZUhri4EEOmw?si=oByZKiOTiv6gVvo7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p>부트스트랩 5 무료 강좌 | 예제 8 : 디지털 명함 만들기 | bootstrap 그리드 시스템 | 카드 스타일</p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b><!DOCTYPE  html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b><html lang="KO"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>  <head></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>    <meta charset="UTF-8"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>    <meta name="viewport" content="width=device-width, initial-scale=1"></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>    <link href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css</a>" rel="stylesheet" integrity</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>     ="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>      crossorigin="anonymous"></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>    <link rel="stylesheet" href="style.css"></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>    <title>부트스트렙 디지털 명함!</title></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>    <style></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>         body {</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>                 background-image: url(images/bg-img.jpg);  </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>                 background-position: center;   </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>                 background-size: cover;</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>     }</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>   </style></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>  </head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>  <body></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>        <section class="container"> </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b><span>             <</span><span style="color: #2f6f9f;">div</span> <span style="color: #006ee0;">class</span><span style="color: #555555;">=</span><span style="color: #d73038;">"card"</span> <span style="color: #006ee0;">style</span><span style="color: #555555;">=</span><span style="color: #d73038;">"width: 18rem;"</span><span>></span> <span><</span><span style="color: #2f6f9f;">img</span> <span style="color: #006ee0;">src</span><span style="color: #555555;">=</span><span style="color: #d73038;">"..."</span> <span style="color: #006ee0;">class</span><span style="color: #555555;">=</span><span style="color: #d73038;">"card-img-top"</span> <span style="color: #006ee0;">alt</span><span style="color: #555555;">=</span><span style="color: #d73038;">"..."</span><span>></span> <span><</span><span style="color: #2f6f9f;">div</span> <span style="color: #006ee0;">class</span><span style="color: #555555;">=</span><span style="color: #d73038;">"card-</span></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b><span style="color: #d73038;">           body"</span><span>></span> <span><</span><span style="color: #2f6f9f;">h5</span> <span style="color: #006ee0;">class</span><span style="color: #555555;">=</span><span style="color: #d73038;">"card-title"</span><span>></span>Card title<span></</span><span style="color: #2f6f9f;">h5</span><span>></span> <span><</span><span style="color: #2f6f9f;">p</span> <span style="color: #006ee0;">class</span><span style="color: #555555;">=</span><span style="color: #d73038;">"card-text"</span><span>></span>Some quick example text to build on</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>          the card title and make up the bulk of the card's content.<span></</span><span style="color: #2f6f9f;">p</span><span>></span> <span><</span><span style="color: #2f6f9f;">a</span> <span style="color: #006ee0;">href</span><span style="color: #555555;">=</span><span style="color: #d73038;">"#"</span> <span style="color: #006ee0;">class</span><span style="color: #555555;">=</span><span style="color: #d73038;">"btn btn-primary"</span><span>></span>Go</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>          somewhere<span></</span><span style="color: #2f6f9f;">a</span><span>></span> <span></</span><span style="color: #2f6f9f;">div</span><span>></span> <span></</span><span style="color: #2f6f9f;">div</span><span>></span> </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>         <div class=".vh-100.d-flsx.justify-content-center.align-items-center"></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>         </div></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b>        </section></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b></body></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size16"><b></html></b></span></p><p> </p>
<!-- -->
]]>
첫댓글 https://haeeeell.tistory.com/38