Html_CSS_JScript 썸네일형 리스트형 부트스트랩 - Cards 부트스트랩으로 카드를 만들어보자. card 클래스를 이용해서 만들어지는 카드섹션입니다. 소스코드 댓거리닷넷 웹 프로그램, 홈페이지 개발, 지역정보 제공 사이트입니다. http://datguri.net Go somewhere 이미지는 placeholder.js 를 이용해서 만들었습니다. 부트스트랩 - Button Groups 부트스트랩 - Button Groups 관련 속성을 알아보자. btn-group btn-group-lg btn-group-sm btn-group-vertical btn-group (nested) btn-toolbar btn-group 소스코드 Left Middle Right btn-group-lg 소스코드 Left Middle Right btn-group-sm 소스코드 Left Middle Right btn-group-vertical 소스코드 Left Middle Right btn-group (nested) 소스코드 1 2 Dropdown Dropdown link Dropdown link btn-toolbar 소스코드 1 2 3 5 6 8 소스 적용 페이지 http://datguri.net/12_stud.. 부트스트랩_Buttons 오늘 이시간에는 부트스트랩에서 사용하는 버튼의 모양 및 기능에 대해 알아보고자 한다. 오늘 알아볼 내용은 아래와 같다. 기본 button style a, input 태그 적용 outline button button size button state 기본 Buttons Style 적용모습 PrimarySecondarySuccessDangerWarningInfoLightDarkLink 소스코드 Primary Secondary Success Danger Warning Info Light Dark Link btn 클래스는 button을 위해 만들어진 클래스이지만 그외 다른 방식으로 표현할 수 도 있다. 예를 들면 a, button, input 태그등에도 사용가능! 적용모습 Link Button 소스코드 Link .. 부트스트랩 - Breadcrumb 이번 시간에는 부트스트랩 Breadcrumb에 대해서 알아보자. 사이트 이동 경로(Breadcrumb trail)는 사용자 인터페이스에서 현재 사용자가 어떤 위치에 있는지를 시각적으로 나타내는 기법 중 하나이다. 이 기법의 영어 이름은 《헨젤과 그레텔》에서 집을 찾기 위해 남매가 뿌리는 빵 부스러기에서 유래했다. 출처 : https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EC%9D%B4%EB%8F%99_%EA%B2%BD%EB%A1%9C 위에서 설명한 것과 같이 사용자가 사이트내에서 현재 어느 위치에 있는지를 알려주는 네비게이션이라고 생각하면 쉽게 이해가 갈것이다. 예제에서 사용된 클래스는 breadcrumb / breadcrumb-item / act.. 부트스트랩 - Badges 오늘은 부트스트랩에서 사용하는 Badges 대해 알아보고자 한다. 본 글은 부트스트랩 4.3.1 을 기준으로 작성되었다. 적용모습 Example heading New 소스코드 Example heading New 이와 같이 badge class를 사용하게 되면 글옆에 배지를 표시 할 수 있다. 본 예제에서는 Example heading 옆에 new 라는 배지가 출력됨을 볼 수 있다. badge class 종류를 보면 다음과 같다. badge-pill badge-primary badge-secondary badge-success badge-info badge-warning badge-danger badge-light badge-dark alert-link alert-dismissible alert-headi.. 부트스트랩-Alerts 부트스트랩에서 Alerts 대해 알아보고자 한다. 본 글은 부트스트랩 4.3.1 을 기준으로 작성되었다. 부트스트랩은 style의 class개념만 잘 이해하면 보고 따라할 수 있게 되어 있으니 하나 하나 따라 해 보시죠... 원하는 메시지 클래스의 alert 와 그하위 alert-primary 를 사용하면 아래와 같이 alert 를 보여줄수 있습니다. 적용모습 Well done! You successfully read this important alert message. 소스코드 Well done! You successfully read this important alert message. 이와 같이 원하는 alert를 만들어 줄수 있다. alert 하위에 있는 class종류를 보면 다음과 같다. ale.. 부트스트랩 Borders 부트스트랩에서 border 는 쉽게 박스모양의 스타일을 지정할 수 있게 해준다. 위 코드를 부트스트랩으로 지정하게 되면 다음과 같은 모양을 볼 수 있다. border옵션이 지정된 곳에 라인이 생긴다. ^^ 직각 사각형 모양뿐만 아니라 둥근 모양도 만들수 있다. 실행 결과는 다음과 같다. 부트스트랩 사용 팁 부트스트랩으로 작업할 일이 있어서 이래저래 보다 두손 다 들고, 좀 쉽게 설명해 놓은 글이없나 찾아보다가 발견한 글이있습니다. 부트스트랩에 대해 쉽고 이해하기 좋게 설명해주었네요. 이 글은 국내 개발자분께서 번역해 주신 글입니다. https://brunch.co.kr/@clay1987/131 부트스트랩, 어떻게 사용해야할까? -파트 1 (번역본) 세계에서 가장 인기있는 프론트엔드 라이브러리, 부트스트랩 사용법! | 이 게시물은 Medium, wd stack 채널의 How to bootstrap 이라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확하지 못한 표현이 있을 수 있습니다. 원본글 링크 https://medium.com/wdstack/how-to-bootstrap.. 이전 1 2 3 다음
