목록Web/Bootstrap (3)

記錄

Bootstrap) Background image (contain vs cover)

참고 : http://tcpschool.com/css/css3_module_backgroundshttp://tcpschool.com/examples/tryit/tryhtml.php?filename=css3_module_backgrounds_02https://developer.mozilla.org/ko/docs/Web/CSS/Scaling_background_images 샘플코드) #fabio {background:url("fabio.jpg");background-repeat: no-repeat;background-size: cover;background-position: center center;width: 100%;height: 1000px;} background-size: cover vs contai..
Web/Bootstrap 2018. 5. 27. 18:51
Bootstrap) 그리드 시스템(grid system)

참고 : https://getbootstrap.com/docs/3.3/css/#grid 그리드 시스템은 부트스트랩을 사용하는 큰 이유 중의 하나이다. 전체 레이아웃을 그리드 시스템을 통해 잡아줄 수 있기 때문에 페이지의 전체 레이아웃을 컨트롤 할 수 있다. 말 그대로 그리드(격자) 형식으로 페이지 레이아웃을 나누는 것이고 전체를 12로 잡고 원하는 그리드를 1/12 * n 단위로 형성한다.(최소단위는 1) 샘플코드 1) 전체 12에서의 공간 할당 col lg 2 col lg 8 col lg 2 위 코드는 하나의 row를 2/ 8/ 2 로 나눈 것이다. 핵심은 col-lg-n 클래스이다. col은 column을 의미하고 lg는 크게 봤을 때를 의미하며(sm은 줄였을 때를 나타낸다) 맨 뒤 숫자는 전체를 1..
Web/Bootstrap 2018. 5. 27. 15:48
Bootstrap) 자주 쓰는 컴포넌트(button, jumbotron, form, container, nav)

* * * * *전체 참고 사이트 : https://getbootstrap.com/docs/3.3/css/위 사이트를 참고하면 템플릿 사용 여부를 떠나 수정도 용이하고백지에서 시작할 때에도 필요한 부분만 차용하는 것이 쉽다* * * * * Button>CSS 중심으로 커스터마이징 할 것이 있으면 보고 찾아서 변경한다https://getbootstrap.com/docs/3.3/css/#buttonshttp://getbootstrap.com/docs/4.1/components/buttons/ Jumbotron>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your..
Web/Bootstrap 2018. 5. 22. 18:07
Prev 1 Next