VSCode_부트스트랩. 타이포그래피 2

주소

		<h4 class="text-info">7. 주소는 address 태그를 사용합니다.</h4>
		<address>
			<strong>이름: 홍길동</strong> <br> 주소:서울시 종로구 <br> 전화번호
			:010-1234-5678 <br>
		</address>

인용구

		<h4 class="text-info">8. 인용구는 blockquote 태그를 이용하며 오른쪽 정렬도 가능합니다.
		</h4>
		<blockquote>
			현재까지 쓰인 CSS 속성은 부트 스트랩 웹 사이트에서도 동일하게 설명이 되어 있습니다. <small>CSS
				속성 <cite>http://bootstrapk.com/BS3/css</cite>
			</small>
		</blockquote>
		<blockquote class="pull-right">
			인용구에 class="pull-right"를 적용해 주면 오른쪽으로 정렬됩니다. <small>CSS 속성 <cite>http://bootstrapk.com/BS3/css</cite></small>
		</blockquote>

		<div class="clearfix"></div>

목록

		<h4 class="text-info">9. 목록(list)를 표시할때는 ul , ol, dt 태그를 사용합니다.</h4>
		<ul>
			<li>일반적인 목록인 경우 ul과 li를 이용합니다.</li>
			<li>이 경우 기본적으로 왼쪽에 20px 하단으로 10px의 여백이 생깁니다.</li>
		</ul>

		<ol>
			<li>리스트의 숫자를 표시 할 때는 l, li 태그틑 사용합니다</li>
			<li>이 경우에도 왼쪽에 20px 하단으로 10px의 여백이 생깁니다.</li>
		</ol>

리스트-언스타일드

		<ul class="list-unstyled">
			<li>여기는 ul 또는 ol 태그에 class="list-unstyled"를 적용한
				부분입니다.list-unstyled 클래스 선택자를 사용하면 왼쪽 20px 여백이 0으로 바뀝니다.</li>
			<li>상단에 있는 ul과 ol 태그가 적용된 부분을 확인해 보세요.
				<ul>
					<li>목록 내부에 다시 ul 태그를 사용하면 원래의 ul 또는 ol 값과 동일한 결과를 얻을 수 있습니다.</li>
					<li>상단의 ul 과 비교해 보시기 바랍니다.</li>
				</ul>
			</li>
			<li>반드시 소스 파일을 확인해 보시기 바랍니다.</li>
		</ul>

리스트-인라인

		<ul class="list-inline">
			<li>ul에 class="list-inline" 을 적용하면</li>
			<li>목록이 세로에서 가로로 펼쳐집니다.</li>
			<li>각 li 사이는 오른쪽과 왼쪽으로 5픽셀의 패딩값이 적용됩니다.</li>
		</ul>
		<dl>
			<dt>HTML</dt>
			<dd>Hyper Text Markup Language</dd>
			<dt>CSS</dt>
			<dd>Cascading Style Sheet</dd>
			<dt>bootstrap</dt>
			<dd>Twitter에서 만든 웹 사이트 제작용 프레임워크</dd>
		</dl>