백.전.백.승.

배경에 나오는 유튜브는 [파묘] 입니다. 그리고 이전은 [윙카] 이었습니다. 참고로 유튜브 배경 멈춤, 소리, 재생 등은 오른쪽 상단 플레이바를 사용하면 됩니다.

Made with Bootstrap 3 And Powered by Tistory

이 글에서 부트스트랩 5에서 타이포그래피에 대해 적으려 한다.

 

부트스트랩에서 타이포그라피는 html에서 텍스트 요소 등을 어떻게 처리할 것인지 대한 것이다. 그냥 HTML 태그에 대한 부트스트랩을 어떻게 정의하는지 모를 때는 HTML을 그냥 사용한다. 그러니 부트스트랩을 사용하면 HTML만 아니라 CSS도 헷갈릴 때가 많다.

 

<h1>~<h6>

 

 HTML 태그에서 제목을 쓸 때 <h1>~<h6>까지 사용한다. 예로 아래와 같이 사용한다.

 

  <h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
  <h2>h2 Bootstrap heading (2rem = 32px)</h2>
  <h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
  <h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
  <h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
  <h6>h6 Bootstrap heading (1rem = 16px)</h6>

 

<h1>~<h6>

 

부트스트랩을 사용한다면 아래 소스처럼 클래스에 h1~h6을 추가하여 위와 같이 표현할 수 있다. 그런데 부트스트랩 3에서 아래와 같은 소스를 사용해 본 적이 없다. 구글 최적화를 위해 <h1>~<h6> 태그를 사용했다. 

 

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

 

<h1>~<h6> 태그를 사용하면 다음 줄로 넘어간다. 위 소스도 <p> 태그를 사용해서 다음 줄로 넘어간다. 알고 있듯이 <span> 등을 사용하면 다음 줄로 넘어가지 않는다.

 

제목을 크게 표시


HTML 태그에서 <h1>~<h6>으로 제목을 표시하를 간편하게 한다. 그리고 거기에서 가장 큰 제목이 <h1>을 사용하는 것이다. 부트스트랩 display 요소를 사용하면 <h1>보다 더 큰 제목을 표시할 수 있다. 거기 설명으로 눈에 띄는 제목이 필요한 경우에는 더 크고 약간 더 독선적인 제목 스타일인 표시 제목을 사용하는 것이 좋다고 한다.

 

<diplay-1>~<display-6>

 

위에 대한 소스는 아래로 사용로 h1 보다 더 크게 사용하는 방법은 클래스에 .display-1, .display-2, .display-3, .display-4,.display-5, .display-6 를 추가하는 방식이다. 4에 없던 display-5, .display-6이 추가됐고 h1 크기인 40px(2.5rem)에 display를 추가한 것이다. 참고로 전에 h1보다 더 큰 제목을 원할 때 style="font-size: 수치:px"를 사용했다.

 

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

 

인라인 텍스트 요소

 

아래는 HTML5에서 요소에 대한 스타일링이고 부트스트랩5에서도 같다. 

 

인라인 텍스트 요소

 

위는 아래 소스 결과인데 HTML5에서 취소선이 <strike>에서 <s>로 바뀌었다. 그렇다고 브라우저에서 <strike>를 읽지 못하는 것은 아니다. 그래서 티스토리 이전 에디터로 작성한 글을 새 에디터로 변환하면서 이전 에디터로 작성된 취소선이 <s>이 이 아니라 style="text-decoration: line-through;"으로 변경돼 당황했다.

 

아래 소스에서 <del>,<ins> 태그는 처음 봤다. del은 취소선이라는 것은 알겠다. 검색해보니 ins는 insert의 약자인데 무엇을 더 한다는 것인지...

 

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

 

약어

attr를 사용하면 약어의 전체가 나온다. 아래 그림을 보듯이 부트스트랩 약어에 점선 밑줄이 생기고 거기에 마우스 포인터를 가져가면 포인터가 변하고 전체가 나온다. 다른 점은 아래 그림을 보면 알겠지만 부트스트랩에서 마우스 포인터가 화살표와 물음표로 표시된다는 것이다. 반대로 HTML 태그에서는 마우스 포인터가 변하지 않는다. 

 

위에서 적은 ins인 경우 <abbr title="insert">ins</abbr>이라고 사용하면 될 것이다.

 

약어

 

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

 

블록 인용문

 

HTML에서 블록 설명은 들여쓰기인 blockquote라는 것은 알 것이다. 부스트스랩 블록 설명이라고 특별한 차이점을 볼 수 없다. 참고로 style="margin-left:0"을 사용해서 들여 쓰기를 제거할 수 있다.

 

기본적인 인용문

<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

 

부트스트랩 3에서 인용문을 만들면 아래 그림과 같이 인용했다는 느낌이 나게 회색 세로줄이 하나 생겼다. 하지만 5에서는 없다. 

 

 

아래는 티스토리 에디터에서 볼 수 있는 인용문 두 가지다. 나는 인용문 1을 자주 사용한다. 개인적으로 인용문 1의 스타일이 멋있다.

 

인용문 2 : 따뜻한 뛰노는 풀이 작고 것이다. 힘차게 아니한 광야에서 살았으며, 황금시대의 커다란 그림자는 이상이 작고 운다.

 

인용문 1: 스며들어 아름답고 그들에게 생명을 하였으며, 청춘의 황금시대의 뿐이다. 긴지라 석가는 우리는 청춘 청춘의 너의 있을 창공에 이것이다. 관현악이며, 현저하게 인간의 않는 사막이다.

 

블록 인용문에 이름 등 추가


블록 설명에 이름, 출처 등을 설명하는 것이다. 아래 그림처럼 블록 설명에 이름, 출처 등을 표시해주면 좋다.

 

인용문에 이름 등 추가

 

위에 대한 소스가 아래인데 복잡하다. 무슨 설명에 <figure>,<blockquote-footer>,<cite> 등 복잡하다. 그런데 코딩은 어렵지만 만들면 깔끔하다고 멋있다. 에디터에서는 HTML로 복잡하게 작성하지 않을 것이다.

 

<figure>
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

 

블록 인용문 정렬

블록 정렬을 변경하려면 필요에 따라 텍스트 유틸리티를 사용하여야 한다. 나중에 텍스트 유틸리티에 대해서 다룰 예정이다. 

 

인용문 정렬

 

가운데 정렬에 text-center니 CSS 정렬을 생각해 오른쪽 정렬은 text-right라 생각했지만 아니었다. 오른쪽인 끝 정렬은  text-end였다. 위에서 텍스트 유틸리티를 사용해야 된다니 살펴봤더니 왼쪽 정렬인 경우 예상대로 text-start였다. text-right도 아니니 text-left는 아닐 것 같았다.

 

<figure class="text-center">
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

 

목록

 

먼저 아래 그림과 같은 목록을 살펴보자. 

 

목록

 

스타일이 없는 목록인 경우 CSS에서 목록 스타일이 없는 경우 style="list-style-type: none"이고 부트스트랩에서는 class="list-unstyled"이므로 많이 헷갈린다. 이 글 처음에 적었듯 부트스트랩을 자주 사용하면 CSS가 헷갈릴 경우가 많다. 

 

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

 

인라인 스타일 목록

 

인라인 목록

 

위에 대한 결과가 아래 소스인데 3개의 목록을 인라인으로 만드는 과정이다. 부트스트랩3에서는 단지 list-inline만 사용한 것 같다. 부트스트랩 3을 살펴봤더니 ul 클래스에 list-inline만 추가하는 것이었다. 무엇이 좋아졌는지 모르겠다. 

 

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

 

설명 목록 정렬

 

설명 목록

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

'IT.인터넷.생활 관련/부트스트랩' 관련된 글 MORE



Close 방명록
×

카테고리




×
×