프로그래밍/웹과 부트스트랩
안녕하세요 HiCreate입니다. 오늘은 VSCODE에 웹 개발 환경, 그 중에서도 Vue.js 사용을 위한 개발 환경을 구축해 보겠습니다. 우선 JAVA와 npm 이용을 위해서 openjdk와 npm을 설치하겠습니다. 1. openjdk설치하기 https://github.com/ojdkbuild/ojdkbuild 이 링크로 들어가 저는 저 빨간색 원 안의 1.8.0버전을 선택했습니다. 여러분은 원하는 버전으로 해주세요. 다운로드를 받고 설치를 누르면 체크박스에 동의 부분을 하고 '계속' 버튼을 눌러서 설치를 완료하시면 됩니다. 2. NPM 설치 https://www.npmjs.com/get-npm 이번엔 여기로 들어가서 조금만 밑으로 내리면 'Download Node.js and npm'이라는 버튼이 ..
안녕하세요 HiCreate입니다!! 이번 포스팅에서는 저번 포스팅에 이어 그리드 시스템에 대해 알려드리겠습니다. 글을 시작하기전... 이 글에 사용된 참고자료는 부트스트랩 공식홈페이지에 있습니다.www.getbootstrap.com 1. row와 col2. 개수에 따른 크기 변경3. 직접 크기 바꾸기4. auto 클래스 이용5. 멀티 로우 - w클래스 1. row와 col 우선 그리드 시스템의 중요한 것 중 하나는 row이고 이 안에서 col 이 작동합니다.col은 최대 12까지 적용할 수 있는데 이는 row의 크기를 12개로 잘라 적용한다고 합니다.하지만 더 쉽게 사용하려면 이런 방법을 씁니다. 가장 작음 작음 중간 큼 가장 큼 width(크기) auto(자동 맞춤) 540px 720px 960px 1..
안녕하세요 HiCreate입니다!!! 이번 포스팅에서는 컨테이너와 그리드에 대해 알려드리려 합니다. 시작하기 전에... 여기에 공개되는 소스들에는 백엔드 즉, 기능은 구현되지 않습니다.오직 디자인 구현만 공개되며 소스들을 엮어서 부트스트랩 데모로 공개할 예정입니다. 이 데모에서는 node.js로 서버를 사용하고 있습니다. 1. 부트스트랩 시작하기2. 컨테이너와 그리드 시스템 [1. 부트스트랩 시작하기] 우선 node.js 프로젝트에서node module을 설치(npm install)해주고다음과 같은 코드를 넣습니다. 1234567891011app.get('/',function(req,res){ fs.readFile('components/login.html',function(error,data){ if(e..
안녕하세요 HiCreate입니다!!! 이번 포스팅은 부트스트랩에 대한 첫 글인 만큼 부트스트랩이 뭔지, 어떤 장단점이 있는지 알려드리도록 하겠습니다. 우선! 부트스트랩이 무엇이냐? 하면... 웹 프로그래밍을 할 때 홈페이지를 예쁘게 꾸미거나 반응형을 만들 때 CSS 라는 걸 많이 이용합니다. 그런데 HTML에 JavaScript나 PHP 같은 언어에다가 디자인 용 언어까지 배우려면 너무 벅차죠? 이럴 때 부트스트랩을 쓰는 겁니다. 부트스트랩은 어찌보면 하나의 라이브러리인데요. 부트스트랩 사이트 getbootstrap.com 에 들어가보면 '전세계에서 가장 널리 쓰이는 프레임워크' 라고 나와있습니다. 그래서 부트스트랩은 무엇이냐하면 반응형 웹을 쉽게 만들 수 있도록 되어있는 프레임워크 혹은 라이브러리인겁니..
