부트스트랩 Typography(타이포그래피) 이해하기....1 정보
부트스트랩 Typography(타이포그래피) 이해하기....1
본문
Typography(타이포그래피)는 영어사전에 인쇄 또는 인쇄술, 활판인쇄술 로 정의 되어 있습니다.
웹에서는 제목,본문,문단,인라인 테스트 요소,등의 개념으로 스타일 형태로 사용되어 지기도 합니다.
부트 스트랩에서 사용되는 글로벌 font-size 기본값은 14px 이고, line-height 는 1.428 입니다
1. 모든 HTML 제목인, <h1> 부터 <h6> 까지 사용가능합니다. 텍스트를 인라인으로 표시하면서 스타일만 제목 형태로 맞추기 위해 .h1 부터 .h6 클래스 또한 사용 가능합니다.
예제 : http://boot.apachezone.com/boot_heading.php
<h1>h1. Bootstrap heading</h1> Semibold 36px
<h2>h2. Bootstrap heading</h2> Semibold 30px
<h3>h3. Bootstrap heading</h3> Semibold 24px
<h4>h4. Bootstrap heading</h4> Semibold 18px
<h5>h5. Bootstrap heading</h5> Semibold 14px
<h6>h6. Bootstrap heading</h6> Semibold 12px
2. 더불어 일반적인 <small> 태그나 .small 클래스를 사용하여 제목 안에 가벼운 부제 텍스트를 만들어 사용 할 수 있습니다.
예제 : http://boot.apachezone.com/boot_heading_Secondary.php
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
3. <body> 와 모든 단락에 적용됩니다.
추가로, <p> 단락은 행높이의 절반의 하단 마진을 가지며, 마진 기본값을 10px 로 정의 됩니다.
예제 : http://boot.apachezone.com/boot_heading_p.php
<p>우리는 민족 중흥의 역사적 사명을 띠고 이 땅에 태어났다. 조상의 빛난 얼을 오늘에 되살려, 안으로 자주독립의 자세를 확립하고, 밖으로 인류 공영에 이바지할 때다. 이에, 우리의 나아갈 바를 밝혀 교육의 지표로 삼는다.
성실한 마음과 튼튼한 몸으로, 학문과 기술을 배우고 익히며, 타고난 저마다의 소질을 계발하고, 우리의 처지를 약진의 발판으로 삼아, 창조의 힘과 개척의 정신을 기른다. 공익과 질서를 앞세우며 능률과 실질을 숭상하고, 경애와 신의에 뿌리박은 상부상조의 전통을 이어받아, 명랑하고 따뜻한 협동 정신을 북돋운다. 우리의 창의와 협력을 바탕으로 나라가 발전하며, 나라의 융성이 나의 발전의 근본임을 깨달아, 자유와 권리에 따르는 책임과 의무를 다하며, 스스로 국가 건설에 참여하고 봉사하는 국민 정신을 드높인다.
반공 민주 정신에 투철한 애국 애족이 우리의 삶의 길이며, 자유 세계의 이상을 실현하는 기반이다. 길이 후손에 물려줄 영광된 통일 조국의 앞날을 내다보며, 신념과 긍지를 지닌 근면한 국민으로서, 민족의 슬기를 모아 줄기찬 노력으로, 새 역사를 창조하자.
</p>
4. .lead 를 사용하여 문단의 문장을 눈에 띄도록 만들수도 있습니다.
예제 : http://boot.apachezone.com/boot_heading_plead.php
<p class="lead">우리는 민족 중흥의 역사적 사명을 띠고 이 땅에 태어났다. 조상의 빛난 얼을 오늘에 되살려, 안으로 자주독립의 자세를 확립하고, 밖으로 인류 공영에 이바지할 때다. 이에, 우리의 나아갈 바를 밝혀 교육의 지표로 삼는다.
성실한 마음과 튼튼한 몸으로, 학문과 기술을 배우고 익히며, 타고난 저마다의 소질을 계발하고, 우리의 처지를 약진의 발판으로 삼아, 창조의 힘과 개척의 정신을 기른다. 공익과 질서를 앞세우며 능률과 실질을 숭상하고, 경애와 신의에 뿌리박은 상부상조의 전통을 이어받아, 명랑하고 따뜻한 협동 정신을 북돋운다. 우리의 창의와 협력을 바탕으로 나라가 발전하며, 나라의 융성이 나의 발전의 근본임을 깨달아, 자유와 권리에 따르는 책임과 의무를 다하며, 스스로 국가 건설에 참여하고 봉사하는 국민 정신을 드높인다.
반공 민주 정신에 투철한 애국 애족이 우리의 삶의 길이며, 자유 세계의 이상을 실현하는 기반이다. 길이 후손에 물려줄 영광된 통일 조국의 앞날을 내다보며, 신념과 긍지를 지닌 근면한 국민으로서, 민족의 슬기를 모아 줄기찬 노력으로, 새 역사를 창조하자.
</p>
5. Less 로 만들어진 문자크기는 variables.less 에서의 두 LESS 변수(@font-size-base 와 @line-height-base) 에 기반됩니다.
첫번째 변수는 기본 폰트 크기이고 두번째 변수는 기본 행 높이입니다. 타이포그래피에서 마진, 패딩, 행 높이를 구하기 위해 두 변수와 몇 개의 간단한 수학을 사용하여 만들수 있습니다.
다음시간에는 부트스트랩 타이포그래피에서 사용되는 인라인 텍스트, 정렬클래스, 변형클래스, 인용구 등에 대해 알아 보도록 하겠습니다.
참고 사이트 : http://www.w3schools.com/bootstrap
3
댓글 7개
잘 읽었습니다.
