웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
부트스트랩(bootstrap)을 사용하는 방법을 알아봅니다. 아래는 부트스트랩으로 row와 column을 사용하여 레이아웃을 구현하는 방법입니다. 어떻게 사용하는지 주의할 점은 무엇인지 자세히 알아보겠습니다.
# 부트스트랩을 사용한 row 선언하기
컬럼을 나누려먼 반드시 row를 먼저 선언하고 그 안에 column을 사용합니다. 또한 column을 사용하였다면 반드시 랩핑으로 row 클래스를 가진 태그가 필요합니다. 아래 예제를 봐주세요!
! 1x1 레이어 구현
부트스트랩에서 row를 사용시 row 클래스명을 추가하면 됩니다. 매우 간단합니다. 다만 column 추가시 아래처럼 몇 가지로 구분하여 사용됩니다. 구분자로 - 대시기호가 사용됩니다.
이때 반드시 알아둬야할 적용 방법은 아래와 같습니다.
i. xs, md 또는 sm은 사용될 디바이스, 해상도에 따라 구분되어 나누어집니다. 이때 어떤 값을 결정할 것인가에 따라서 반응형웹에 구현할때 큰 도움이 됩니다.
ii. 맨 뒤의 숫자는 1부터 12까지 사용되며 하나의 컬럼 크기를 나타냅니다. 이때 각 단위는 12등분으로 표현하여 12가 전체길이입니다.
위 예제는 하나의 row를 기준으로 사용하였습니다.아래와 같이 row를 추가하고 여기에 column을 추가하는 방식으로 확장해 사용합니다.
! 여러 줄의 행 레이아웃 사용하기
이처럼 row와 column을 사용할 경우 쉽게 레이아웃을 원하는데로 만들 수 있습니다.
# 부트스트랩을 사용한 row 선언하기
컬럼을 나누려먼 반드시 row를 먼저 선언하고 그 안에 column을 사용합니다. 또한 column을 사용하였다면 반드시 랩핑으로 row 클래스를 가진 태그가 필요합니다. 아래 예제를 봐주세요!
! 1x1 레이어 구현
<div class="row">
<div class="col-xs-12">1 x 1</div>
</div>
부트스트랩에서 row를 사용시 row 클래스명을 추가하면 됩니다. 매우 간단합니다. 다만 column 추가시 아래처럼 몇 가지로 구분하여 사용됩니다. 구분자로 - 대시기호가 사용됩니다.
- col-xs-12
- col-md-12
- col-sm-12
이때 반드시 알아둬야할 적용 방법은 아래와 같습니다.
i. xs, md 또는 sm은 사용될 디바이스, 해상도에 따라 구분되어 나누어집니다. 이때 어떤 값을 결정할 것인가에 따라서 반응형웹에 구현할때 큰 도움이 됩니다.
ii. 맨 뒤의 숫자는 1부터 12까지 사용되며 하나의 컬럼 크기를 나타냅니다. 이때 각 단위는 12등분으로 표현하여 12가 전체길이입니다.
위 예제는 하나의 row를 기준으로 사용하였습니다.아래와 같이 row를 추가하고 여기에 column을 추가하는 방식으로 확장해 사용합니다.
! 여러 줄의 행 레이아웃 사용하기
<div class="row">
<div class="col-xs-6">50%</div>
<div class="col-xs-6">50%</div>
</div>
<div class="row">
<div class="col-xs-4">1 / 3</div>
<div class="col-xs-4">1 / 3</div>
<div class="col-xs-4">1 / 3</div>
</div>이처럼 row와 column을 사용할 경우 쉽게 레이아웃을 원하는데로 만들 수 있습니다.
code snippet widget
아래의 글도 찾고 계시지 않나요?