본문 바로가기

달밤에 코딩하기/bootstrap

 (4)
#4-Bootstrap 활용 웹 에디터 사용하기 Bootstrap에서 사용할 수 있는 웹 에디터가 있다. 사용법은 getting started 메뉴를 클릭하여 확인할 수 있다. https://summernote.org/ Summernote - Super Simple WYSIWYG editor Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. summernote.org Bootstrap 템플릿 사용하기 아래 사이트에 접속하여 유료 bootstrap 템플릿을 사용할 수 있다. https://themeforest.net/?gclid=CjwKCAjwruSHBhAtEiwA_q..
#3-Bootstrap 레이아웃 및 컴포넌트 사용 레이아웃 시작하기 1줄에는 12개의 컬럼이 있다는 것이 부트스트랩의 규칙이다. 기본 구조 container로 가로 한줄을 묶어준다. 하위에 "col-화면사이즈-숫자" 형태의 class를 가진 요소를 넣는다. col은 colmn을 의미한다. sm은 화면 사이즈를 정의한다. xs : 768px보다 작을때 sm : 768px보다 클때 md : 970px보다 클때 lg : 1170px보다 클때 숫자는 몇개의 컬럼을 포함할 것인지를 선언하는 것이다. 1줄에 컬럼이 12개가 들어가기 때문에 숫자의 합이 12가 되어야 한다. 컬럼3개 예시 첫번째 두번째 세번째 컬럼12개 예시 1 2 3 4 5 6 7 8 9 10 11 12 해상도 사이즈 별 컬럼 설정 예시 1 2 3 4 그 외 컴포넌트 사용하기 아래 사이트에서 컴포..
#2-Bootstrap 설치 VS code에서 부트스트랩을 설치하는 방법을 알아보자. 링크로 설치하기 1. Bootstrap 사이트 > 시작하기 화면 접속한다. http://bootstrapk.com/getting-started/ 시작하기 · 부트스트랩 부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치 bootstrapk.com 2. 부트스트랩 CDN 내용을 복사한다. 4. head 영역에 복사한 내용을 붙여넣는다. 의존성 문제로 순서는 아래와 같이 적용한다. 파일로 연결하기 1. 원하는 버전 링크 주소로 이동하여 다른이름으로 저장한다. 2. 다운받은 css파일을 html 파일이 있는 폴..
#1-Bootstrap이란? Bootstrap을 알기 전, 라이브러리와 프레임 워크를 알아보자. 라이브러리란? 위키 백과에서는 라이브러리를 이렇게 정의한다. 라이브러리(영어: library)는 주로 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다. 여기에는 구성 데이터, 문서, 도움말 자료, 메시지 틀, 미리 작성된 코드, 서브루틴(함수), 클래스, 값, 자료형 사양을 포함할 수 있다. OS/360 및 이후 세대에서는 파티션 데이터 세트로 부른다. 소프트웨어를 개발하기 쉽게 기능을 제공하는 도구라고 할 수 있다. 내가 참고한 블로그에서는 이를 톱, 망치, 삽 같은 연장으로 묘사했다. 어떤 도구를 사용하든, 사용자가 원하는 것을 만들어 주는데 집중하는 것이 라이브러리라고 한다. 프레임 워크란? 위키 백과에서..

티스토리툴바