반응형 레이아웃 실습(placeholder)

LYN·2022년 7월 11일
0

BS

목록 보기
6/10

place holder.com

1. img-style

  <body>
    <img src="https://via.placeholder.com/150" alt="" class="img-rounded" />

    <img src="https://via.placeholder.com/300" alt="" class="img-circle" />

    <img src="https://via.placeholder.com/150x300" alt="" class="img-circle" />

    <img src="https://via.placeholder.com/100" alt="" class="img-thumbnail" />

    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="js/bootstrap.min.js"></script>
  </body>

img 태그를 활용하여 placeholder라는 웹사이트를 통해 이미지 모양을 정할 수 있다.

1) 둥근 모서리 사각형

<img src="https://via.placeholder.com/가로x세로" alt="" class="img-rounded"/>

2) 원형(타원형)

<img src="https://via.placeholder.com/가로x세로" alt="" class="img-circle"/>

3) 썸네일(테두리 사각형)

<img src="https://via.placeholder.com/가로x세로" alt="" class="img-thumbnail"/>

2. text-style

1) 색상

<p class="text-ooo">Lorem ipsum dolor sit amet.</p>

ooo에 들어갈 내용에 따른 색
muted
primary
success
info
warning
danger

2) 배경

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

필요한 양식은 그때그때 찾아서 사용하면 될 것 같다.

profile
우리는 전에도 틀렸고, 앞으로도 틀리리라는 것, 진보로 나아가는 진정한 길은 확실성이 아니라 회의로, "수정 가능성이 열러있는" 회의로 닦인다는 것

0개의 댓글