부트스트랩 Typography(타이포그래피) 이해하기….1

Typography(타이포그래피)는 영어사전에 인쇄 또는 인쇄술, 활판인쇄술 로 정의 되어 있습니다.
웹에서는 제목,본문,문단,인라인 테스트 요소,등의 개념으로 스타일 형태로 사용되어 지기도 합니다.
부트 스트랩에서 사용되는 글로벌 font-size 기본값은 14px 이고, line-height 는 1.428 입니다

1. 모든 HTML 제목인, <h1> 부터 <h6> 까지 사용가능합니다. 텍스트를 인라인으로 표시화면서 스타일만 제목 스타일로 맞추기 위해 .h1 부터 .h6 클래스 또한 사용 가능합니다.
예제 :  http://boot.apachezone.com/boot_heading.phpboot_heading

2. 더불어 일반적인 <small> 태그나 .small 클래스를 사용하여 제목 안에 가벼운 부제 텍스트를 만들어 사용 할 수 있습니다.
예제 :  http://boot.apachezone.com/boot_heading_Secondary.phpboot_heading_Secondary

3 .<body> 와 모든 단락에 적용됩니다.
추가로, <p> 단락은 행높이의 절반의 하단 마진을 가지며, 마진 기본값을 10px 로 정의 됩니다.
예제 :  http://boot.apachezone.com/boot_heading_p.phpboot_heading_p

4. .lead 를 사용하여 문단의 문장을 눈에 띄도록 만들수도 있습니다.
예제 :  http://boot.apachezone.com/boot_heading_plead.phpboot_heading_plead
5. Less 로 만들어진문자크기는 variables.less 에서의 두 LESS 변수(@font-size-base 와 @line-height-base) 에 기반됩니다.
첫번째 변수는 기본 폰트 크기이고 두번째 변수는 기본 행 높이입니다. 타이포그래피에서 마진, 패딩, 행 높이를 구하기 위해 두 변수와 몇 개의 간단한 수학을 사용하여 만들수 있습니다.
다음시간에는 부트스트랩 타이포그래피에서 사용되는 인라인 텍스트, 정렬클래스, 변형클래스, 인용구 등에 대해 알아 보도록 하겠습니다.

참고 사이트 : http://www.w3schools.com/bootstrap

nanoomi / 2015년 6월 29일 / 미분류 / 0 Comments

부트스트랩 Grid 이해하기….3

원래 이번엔 Typography(타이포 그라피)에 대해서 살펴 보려고 하였으나

그리드 시스템 이해를 숙지하고 뒤돌아서면 잊어버리니 사용법에 대해서 먼저 알아 보려고 합니다……ㅠㅠ

예제를 보여드리기 위해 급하게 계정을 하나 만들었네요….ㅎㅎ

지난시간 설명으로 인해 클래스 옵션에 대해서 웬만큼 아실테니 바로 사용 예제를 통하여 알아 보도록 하겠습니다.

아래 예제의 경우는 .col-sm-* 를 표현한 것 입니다.

아래의 예를 들어 .col-sm-4은 가로 해상도 768px 이상에서 행의 4/12를 가로 크기로 하겠다는 뜻입니다.

만약 가로 해상도가 768px 미만이라면 행 전체를 가로 크기로 합니다.

예제 링크는 http://boot.apachezone.com/col-sm-4.php

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container-fluid”>
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class=”row”>
<div class=”col-sm-4″ style=”background-color:lavender;”>.col-sm-4</div>
<div class=”col-sm-4″ style=”background-color:lavenderblush;”>.col-sm-4</div>
<div class=”col-sm-4″ style=”background-color:lavender;”>.col-sm-4</div>
</div>
</div>

아래의 예는 col-sm-4와 col-sm-8 를 혼용해서 사용한 예입니다.

col-sm-8는 가로 해상도 768px 이상에서 행의 8/12와 4/12를 각각 가로 크기로 하겠다는 뜻입니다

예제 링크는 http://boot.apachezone.com/col-sm-4_8.php

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container-fluid”>
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class=”row”>
<div class=”col-sm-4″ style=”background-color:lavender;”>.col-sm-4</div>
<div class=”col-sm-8″ style=”background-color:lavenderblush;”>.col-sm-8</div>
</div>
</div>

</body>
</html>

위의 예제를 본것과 같이 .col-md-*, .col-lg-* 또한 해상도에 따라 차등 적용 하시면 됩니다.

.col-md-*은 가로 해상도 992px 이상에서 적용되며, .col-lg-*은 가로 해상도 1200px 이상에서 적용됩니다.

예를 들면 .col-md-6은 가로 해상도 992px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻입니다.

만약 가로 해상도가 992px 미만이라면 행 전체를 가로 크기로 하고,

.col-lg-6은 가로 해상도 1200px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻이고 가로 해상도가 1200px 미만이라면 행 전체를 가로 크기로 합니다.

아래 링크는 그리드 시스템의 클래스 옵션을 한눈에 살펴보기 위하여 만들어 보았습니다. 레이아웃의 해상도를 줄이거나 늘리면 변화를 확인 하실 수 있습니다.

http://boot.apachezone.com/grid-all.php

http://boot.apachezone.com/col-lg-4_col-sm-6.php

이제 그리드 시스템에 대해서 이해가 되셨는지 모르겠습니다….^^

다음 시간에는 정말 Typography(타이포 그라피)에 대해서 알아 보겠습니다.

참고 사이트 : http://www.w3schools.com/bootstrap

nanoomi / 2015년 6월 28일 / 미분류 / 0 Comments

부트스트랩 Grid 이해하기….2

앞서 말씀드린 xs,sm.md,lg 와 같은 클래스 옵션은

적절한 정렬과 패딩을 위해서 fixed-width(.container)와 full-width(.container-fluid) 안에 행이 위치 해야 하며,

.container = 고정 폭 그리드 레이아웃,.container-fluid = 유동 폭 그리드 레이아웃 을 사용 합니다.
.col-xs- 는 주로 너비가 크지 않는 모바일폰에 적용되며,최대너비는 정의되지 않은 auto로 설정되어 있고 최대 컬럼너비 또한 auto 입니다.
.col-sm- 는 테블릿 에 적용되며 최대너비는 750px 이며, 최대 컬럼 너비는 60px 입니다.
.col-md- 는 주로 중간기기(데스크탑)에 사용되며 최대너비는 970px이며, 최대 컬럼 너비는 78px 입니다.
.col-lg- 는 큰 기기 (화면이 큰 데스크탑)에 사용되며 최대너비는 1170px 이며, 최대 컬럼 너비는 95px 입니다.

그리드 클래스는 여러장치에 따라 포괄적으로 제공되며, .col-lg-는 넓은 화면에 사용되는 레이아웃에 적용하고 되도록이면  .col-md-*를 이용해서 평균적인 데스크탑의 레이아웃에 맞추어 사용하는것이 바람직 합니다.

그럼 예제 사이트를 통해서 고정 폭 그리드 레이아웃 과 유동 폭 그리드 레이아웃이 어떻게 틀린지 알아 보도록 하겠습니다.

아래 링크는 고정 폭 그리드를 이용한 레이아웃 예제 입니다.
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_gs_container&stacked=h

container
아래 링크는 유동 폭 그리드를 이용한 레이아웃 예제 입니다.
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_gs_container-fluid&stacked=h

container-fluid
위의 두링크를 비교하시면 클래스에 따라 최대너비 크기에 다르게 반응 하는것을 확인 할 수 있을겁니다.

.container 는 min-width:992px 이하에서 .container-fluid 는 min-width:1200px 이하에서 각기 달리 반응 합니다.

또한, 그리드 시스템에서는 주요 분기점을 만들기 위해 아래와 같은 미디어 쿼리를 사용 하며, max-width 를 포함하여 사용 하기도 합니다.
미디어 쿼리 사용의 예 :

/* 매우 작은 기기들 (모바일폰, 768px 보다 작은) */
/* 부트스트랩에서 이것은 기본이므로 미디어쿼리가 없습니다. */

/* 작은 기기들 (태블릿, 768px 이상) */
@media (min-width: @screen-sm-min) { … }

/* 중간 기기들 (데스크탑, 992px 이상) */
@media (min-width: @screen-md-min) { … }

/* 큰 기기들 (큰 데스크탑, 1200px 이상) */
@media (min-width: @screen-lg-min) { … }

max-width를 포함하여 사용한 예 :

@media (max-width: @screen-xs-max) { … }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { … }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { … }
@media (min-width: @screen-lg-min) { … }

다음 시간에는 Typography(타이포 그라피)에 대해서 살펴 보겠습니다.​

참고 사이트 : http://www.w3schools.com/bootstrap

nanoomi / 2015년 6월 24일 / 미분류 / 0 Comments

부트스트랩 Grid 이해하기….1

부트스트랩 빌더 작업하면서 제일 먼저 알아야 할 것이 Grid 시스템 이라는 넘인데…..

쉽게 이야기하면 레이아웃을 격자 형태로 짤라서 틀을 잡아주는 역활을 하는 시스템입니다.

그래서 반응형을 12컬럼 그리드 기반으로 만들어 졌다고 흔히들 말 합니다.

그리드 시스템만 잘 활용하면 레이아웃이 손폰이던,타블렛이던,PC에서든 알아서 최적 사이즈에 맞추어 반응을 합니다.

그리드 시스템 12컬럼에 대해서는 아래 이미지를 참조 하세요.

Grid

다음으로는 그리드 클래스에 대해 알아보겠습니다.

그리드 클래스에는 아래와 같은 너비사이즈를 결정하는 4가지가 있습니다.

xs (모바일에서 작동)
sm (타블렛에서 작동)
md (일반 모니터의 테스크 탑에서 작동)
lg (모니터가 큰 데스크탑에서 작동)
위에 설명한 너비 그리드 시스템에 각기 다른 컬럼을 포함 시킬수도 있고
.row를 추가하고 현재의 .span* 의 범위에 맞게 새로운 .span* 세트를 추가 할 수 있습니다.

반응형에는 고정비와 유동비 두가지 비율을 사용하는데
그중 유동비(Fluid)에서는 픽셀값 대신 퍼센트를 사용하고 고정비(Fixed)에서는 그리드 시스템과 같은 타입을 사용 합니다.
다음에는 그리드 시스템 사용법에 대해서 알아 보겠습니다…..^^

참고 사이트 : http://www.w3schools.com/bootstrap

nanoomi / 2015년 6월 24일 / 미분류 / 0 Comments