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

[부트스트랩] 레이아웃 #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 clas

[부트스트랩] 레이아웃 #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" > 타이포그래피 및 링크 기본적으로 부트스트랩은 영문 기준으로 제작되며, 기본 전역적인