[부트스트랩] 컨텐츠 #2 - 코드, 이미지, 모양

코드(Code)

부트스트랩을 사용하여 프로그래밍 코드를 삽입하거나 코드 블럭을 생성할 수 있습니다.

  

코드삽입(Inline code)

코드들 삽입하기 위해서는 <code> 태그를 사용하며, HTML 꺾쇠는 이스케이프 문자를 사용해야 합니다.

For example, <section> should be wrapped as inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

  

  

코드블럭(Code blocks)

여러줄의 코드는 <pre> 를 사용해서 표시 할수 있습니다.  .pre-scrollable 클래스는 최대 높이를 350px로 지정하고 세로스크롤을 나타나게 합니다.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

  

  

수식표현(Variables)

수식 표현은  <var> 태그를 사용합니다.

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

  

  

키보드 입력표시(User input)

키보들 입력을 표시하려면<kbd> 태그를 사용하여 표시합니다.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

  

  

샘플 출력(Sample output)

   <samp>  태그를 사용하여 프로그램 출력 샘플을 표시합니다..

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Images

반응형 이미지(Responsive images)

이미지에 반응성을 적용하려면  .img-fluid클래스를 지정합니다. 그러면 가로는 최대 100%를 보장하고 높이는 자동을 조정됩니다. max-width: 100%; height: auto;

<img src="..." class="img-fluid" alt="Responsive image">

SVG 이미지 와 and IE 10

Internet Explorer 10 에서 SVG images 에 .img-fluid 클래스 적용하면 균등하게 이미지 크기가 조정되지 않습니다. 이럴경우 스타일에   width: 100% \9; 속성을 추가하면 되지만 완벽하게 반응성을 제공하지는 않습니다.

이미지 썸네일(Image thumbnails)

이미지 썸네일 표시하게 위해 .img-thumbnail 클래스를 사용하며,  이미지 모서리에 1px 크기로 둥글게 만듭니다.

<img src="..." alt="..." class="img-thumbnail">

이미지 정렬(Aligning images)

이미지 정렬은 float classes 혹은 text alignment classes 와 함꼐 사용되며, block-수준 이미지는 .mx-auto  class 클래스를 사용하여 중앙에 배치할 수 있습니다.

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Figures

이미지와 연관된 텍스트 표시하기 위해 부트스트랩에서 사용하는  figure 컴포넌트에 대해서 설명합니다.

이미지에 캡션(이미지 설명)을 지정하려면  <figure>태그를 사용하면 됩니다.
.figure , .figure-img .figure-caption 클래스 사용하여  HTML5 에서 사용되는 <figure> 와 <figcaption> 엘레먼트의 기본 스타일을 지정하고<img> 에  .img-fluid 클래스를 지정하여 반응형으로 만들 수 있습니다.

A caption for the above image.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

text utilities. 사용하여 그림 갭션도 정렬 할 수 있습니다. 아래는 text-right 클래스를 사용하여 캡션을 우측정렬하였습니다.

A caption for the above image.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>

• 위의 글은 부트스트랩 사이트를 번역하여 작성하였습니다. 
• 이글의 원문은 https://getbootstrap.com/docs/4.0/content/code/ 를 참고하시기 바랍니다.