2. 문자열

문자열 클래스

<h1 class="display-1">
	display1
</h1>

<button class="display-1">
	button
</button>

display

태그에 설정돼있는 기본 크기를 무시하고 새로운 크기로 설정 -> 문자열 표시할 수 있는 태그에 적용 가능 

 

<p class="font-italic">
	폰트 기울기
</p>

<p class="font-weight-light">
	폰트 굵기 얇음
</p>

<p class="font-weight-normal">
	폰트 굵기 보통
</p>

font style (BS4) : css로 설정 가능하나 간편하게 class로 생성 가능

 

<p class="text-left">
	텍스트 왼쪽 정렬
</p>

<p class="text-right">
	텍스트 오른쪽 정렬
</p>

<p class="text-center">
	텍스트 중앙 정렬
</p>

text-left, text-right, text-center : text 정렬

 

<p class="text-sm-left">
	sm 왼쪽 정렬 <!-- 576px -->
</p>
<p class="text-md-right">
	md 오른쪽 정렬 <!-- 768px -->
</p>
<p class="text-lg-center">
	lg 중앙 정렬 <!-- 992px -->
</p>
<p class="text-xl-center">
	xl 중앙 정렬 <!-- 1200px -->
</p>

text-scale-left, text-scale-center, text-scale-right

기본은 class 방향으로 정렬되지만 브라우저 가로 길이가 짧아지면 왼쪽으로 정렬됨.

 

<p class="text-justify" style="width: 200px; border: 1px solid black">
	a bb ccc ddd eeeee fffff ggggggg hhhhhhhh iiiiiiiiii jjjjjjjjjjjj
</p>

text-justify : 영역 안 글자의 자간을 맞춰 줌.

text-justify로 자간이 맞춰진 상태(아래).

 

<p class="text-nowrap" style="width: 200px; border: 1px solid black">
	a bb ccc ddd eeeee fffff ggggggg hhhhhhhh iiiiiiiiii jjjjjjjjjjjj
</p>

text-nowrap : 문자열이 영역을 벗어나도 개행이 적용 되지 않고 끝까지 써짐.

text-nowrap으로 개행 적용 X -> 영역을 벗어남

 

<p class="text-monospace">
	hhh iii jjj
</p>

text-monospace (BS4) : 글자의 가로 길이가 똑같아짐.

 

text-monospace로 글자의 가로 길이가 통일

 

<p class="lowercase">
	ABdvsHAL
</p>

<p class="uppercase">
	fsdnjdfsSFSF
</p>

<p class="capitalize">
	ABdvsHFDL
</p>

text-lowercase, text-updercase, text-capitalize : 대소문자 변경

 

<ul class="list-unstyled">
	<li>항목1</li>
	<li>항목2</li>
	<li>항목3</li>
</ul>

list-unstyled : 리스트 스타일 제거

list-unstyled로 리스트 스타일이 제거 됨

 

<ul class="list-inline">
	<li class="list-inline-item">항목1</li>
	<li class="list-inline-item">항목2</li>
	<li>항목3</li>
</ul>

list-inline : ul or ol 태그를 가로로 배치 (주로 탭에 쓰임)

부트 스트랩 4에서는 가로 방향 안에 배치하고픈 요소에 list-inline-item를 추가해줘야 함 (자유도 ↑)

 

<dl class="dl-horizontal">
	<dt>중국 요리</dt>
	<dd>- 짜장면</dd>
	<dd>- 탕수육</dd>
</dl> 

dl-horizontal (BS3) : dl 태그에서 상위, 하위 목록을 tab

 

pre-scrollable : pre 태그에서 스크롤이 되지 않는 상황에서도 스크롤바 영역을 표시

 

---

문자열 관련 태그

<small>문자열 <mark>작은 거</mark></small>

small (문자열 작게), mark : 배경색 다르게해서 강조

 

<p>
	웹 문서는
	<abbr title="hypertext markup language">HTML</abbr>
	로 구성 됩니다.
</p>

 

abbr : 약어, 마우스 올리면 title 내용이 표시됨

HTML에 마우스 올리면 title 내용 표시

 

<blockquote>
	<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
	<footer class="blockquote-footer">애국가</footer>
</blockquote>

blockquote

인용구. BS3는 인용구 왼쪽에 | 생기고 BS4는 생기지 않음. 또한 BS3에서 footer에 class는 없음.

BS4의 blockquote

 

<dl>
	<dt>중국 요리</dt>
		<dd>- 짜장면</dd>
		<dd>- 탕수육</dd>
	<dt>한식 요리</dt>
		<dd>- 밥</dd>
		<dd>- 국</dd>
</dl>

<!--
중국요리
　- 짜장면
　- 탕수육
한식요리
　- 밥
　- 국
-->

dl, dt, dd : 목록 별로 설명 추가해줌

 

<p>
	HTML 코드 : <code>span</code>, <code>section</code>,
	<code>div</code> 태그는 문서의 영역을 나타냅니다.
</p>

code : 프로그램 코드 강조 -> BS3는 바탕색이 있음.

 

 

<p>복사는 <kbd>ctrl + c</kbd>입니다.</p>

kbd : 키보드 단축키 강조

 

 

pre

태그내의 문자열을 작성한 모양 그대로 출력함. (개행도 적용) 그렇기 때문에 들여쓰기 안 하고 딱 붙어 쓰는 게 일

(BS3에서는 배경이 생김)