라벨이 레이아웃인 게시물 표시

[부트스트랩] 레이아웃 #2 – Media Object

이미지
미디어 객체 (Media Object) 예제 (exaple)   미디어 객체는  이미지/비디오/오디오 같은 객체가 기존 객체를 둘러싸지 않는 콘텐츠와 나란히 배치되거나  복잡하고 반복적인 구성 요소를 만드는데 도움을 줍니다. 또한 flexbox 덕분에 두 가지 필수 클래스만으로 작업을 수행 할 수 있습니다. 콘텐츠를 둘러싼 .media 및 .media-body라는 두 가지 클래스 만 있으면됩니다.
아래는 단일 미디어 객체의 예입니다. 선택적 패딩 및 마진은 공간 유틸리티를 통해 제어 할 수 있습니다.

<div class="media"><img class="d-flex mr-3" src="..." alt="Generic placeholder image"><div class="media-body"><h5 class="mt-0">Media heading</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div></div> 중첩 (Nesting) 미디어 객체는 무한대로 중첩 될 수 있지만, 어느 시점에서 중단하는 것이 좋습니다. 상위 미디어 객체의.media-body 내에 중첩 된.media를 배치합니다.

<div class="media"><img class="d-flex mr-3" src="..." alt=…

[부트스트랩] 레이아웃 #1 - Grid

이미지
개요
 이번에는 부트스트랩에서 사용하는 CSS에 대해 알아 보겠습니다. 부트스트랩의 가장 큰 장점은 웹 표준 사이트를 만들때 필요한 CSS가 미리 정의되어 있기 때문에 디자이너나 개발자는 정의되어 있는 CSS를 가져와서 사용만하면 된다는 것입니다. 미리 정의된 기본 CSS 스타일을 파악하게 되면, 웹사이트를 보다 편리하고 빠르게 만들 수 있습니다.

HTML5 doctype  부트스트랩은 HTML5 기반의 HTML 엘레먼트와 CSS 속성을 이용합니다. 새로운 HTML 작성시 doctype을 지정해야 합니다.

<!DOCTYPE html><html lang="ko"> ... </html>

모바일 퍼스트 부트스트랩2 에서 모바일 친화적인 스타일을 프레임워크의 중요한 부분으로 추가했으며, 부트스트랩3 에서는 처음 시작부터 모바일 친화적으로 다시 만들어졌습니다.  말하자면, 부트스트랩은 모바일 First입니다. 반응형 웹페이지를 위한 확대/축소를 위해, <head> 에 viewport 메타태그를 추가하면됩니다.

<meta name="viewport" content="width=device-width, initial-scale=1">
viewport 메타태그에 user-scalable=no 속성을 추가하면 모바일 기기에서 확대/축소 기능을 끌 수 있습니다. 확대/축소를 끈다는 것은, 사용자들이 스크롤만 가지고 화면을 탐색할 수 있습니다.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

타이포그래피 및 링크 기본적으로 부트스트랩은 영문 기준으로 제작되며, 기본 전역적인 표시로, 타이포그래피, 폰트 및 링크 스타일등을 정의 할 수 있습니다.
body 에서 background-co…