반응형

웹관련프로그래밍(web programming)/Bootstrap(부트스트랩) 12

Bootstrap(부트스트랩)예제 가져와서 Visual Studio에서 실행하고 웹브라우져에서 확인하기(browser)

사용방법에 대해 간략한 소개 Bootstrap 에서는 많은 무료 예제 Front end (Html + CSS)를 제공한다. 예제를 비쥬얼 스튜디어에서 실행해서 HTML을 즉각적으로 확인하면서 변경할 필요가 있다. 이를 위해 필요한 확장 툴 "Live Server"가 필요 하다. 다음은 설치 부터 사용에 대한 방법을 알려주겠다. 설치 순서 및 확인 1. 그림1과 같이 Visual Studio를 실행하고 왼쪽에 조각난 네모그림(확장)을 클릭하면 필요한 확장 툴을 찾을 수 있는 검색창이 나온다. 검색창에 "live server" 라고 검색한다. 2. 그림1처럼 설치가 완료 되면 오른쪽 하단과 같이 "Go Live"라는 텍스트가 생긴다. 3. 그림2와 같이 Bootstrap 예제 화면에 접속한다. (https:..

부트스트랩 Margin vs Padding 배치 방법, 예제

HTML에서 Bootstrap의 margin, padding 사용방법 Padding 이나 Margin을 넣고 싶은 태그에 Class 를 선언하고 클래스 값을 입력한다. 값의 첫번째 문장은 margin이냐 padding이냐를 결정한다. 아래와 같이 m은 margin을 의미하고 p는 padding을 의미한다. m - for classes that set margin p - for classes that set padding 다음으로 위치를 정하는 letter를 넣는다. 위,아래,왼쪽,오른쪽을 여기서 정할 수 있다. 아래 letter를 보고 결정하면 된다. t - for classes that set margin-top or padding-top b - for classes that set margin-bot..

반응형