동빈나 부트스트랩 웹 디자인 실전 강좌 1강 - 부트스트랩 소개 및 개발환경 구축하기 (Bootstrap Web Design Tutorial #1) > 부트스트랩

 

 강좌는 기본적으로 웹 개발 초보자를 대상으로 하는데요.
부트스트랩 을 이용해서 당장 웹사이트를 개발하는 것에 초점을 맞추어서
강좌를 진행하려고 합니다.
자 부트스트랩 은 웹 디자인 프레임 워크 라고 할 수 있는데요.
프레임워크 란 자주 사용되는 기능들을 모아놓고 나 자동화할 수 있도록
해서 개발에 편의성을 올려주는 걸 말합니다.
오래전부터 많은 개발자들은 웹 디자인을 함에 있어서 어려움을 겪고 특히
딘 프로젝트에 있어서 회 법이 어려웠습니다.
부트스트랩 은 이러한 측면에서 개발 자체를 일관성 있게 해줍니다.
또한 html css 기반의 디자인 템플릿을 효과적으로 제공하기 때문에
html css 자바스크립트를 같 공부한 학생들이 가장 많이 그 다음으로
공부하는 프레임워크라고 할 수가 있어요. 심지어는 이제 이런 웹 디자인
의 기본적인 프로그래밍 언어로 잘 모르는 학생이라고 하더라도 오케스트라
앱을 이용해서 자기가 원하는 사이트를 쉽게 개발할 수가 있죠.
현재 부트스트랩 은 실무에서 웹 디자인을 할 때 가장 많이 사용하는
디자인 프레임 워크 중 하나입니다.
암튼 이렇게 한번 부트스트랩 을 시작을 해볼게요.
목차는 다음과 같습니다. 먼저 이렇게 부트스트랩 을 소개하는 시간이 첫번째
시간이 될 거고요.
바로 이번 시간입니다. 그 다음부터 이제 이렇게 점보트론 네비게이션 파
부터 5dr 미디어 이런식으로 하나씩 각각의 컴포넌트 나 각각의 기능들을
익혀 보는 시간을 가져보도록 할 겁니다.
그리고 이렇게 기능들을 익히는 과정에서 하나의 프로젝트를 개발할 수
있도록 말 그대로 실전에서 뭘 개발하는 과정에서 어떤 기능들이 칠 수
있도록 한번 강좌를 구상 해보려고 합니다.
바로 이렇게 부터 스트레 소개 부분으로 넘어가려고 하는데요.
사실 이렇게 부트스트랩을 이야기할 때는 레스폴 cb 웹을 빠뜨릴 수가
없죠.
바로 반응형 맵 인데요 반응형 웹 이라고 하는 것은 이렇게 큰 화면에서
볼 때나 작은 화면에서 볼 때나 같은 내용을 이제 보여줄 수 있도록
적절하게 해상도에 맞게 웹 사이트의 디자인을 변경하는 기술을 의미에요.
그걸 바로 반응형 웹 이라고 하는데요.
부트스트랩 같은 경우는 이러한 반응형 웹을 기본적으로 제공해 주고 있기
때문에 따로 개발자가 웹 디자이너가 그런걸 신경 써 가지고 만들 필요가
없도록 합니다.
자 이렇게 한번 보시면 일반적으로 웹젠은 함에 있어서 어려운 점이라고
한다면 바로 반응형 웹사이트에요.
반응형 웹사이트를 만들기 위해서는 웹브라우저 막아 가지는 특성들을
고려해서 현재 화면의 해상도에 따라서 앱 사이트 형태를 바꿔 줘야 해요
이제 일반적으로 1289 파기 720 이상이 일반적인 노트북이나
데스크탑에 해상도 부터 가로폭이 800 픽셀 아래로 떨어지는 그런 태블릿
같은 기기를 거쳐서 이제 가로폭이 뭐 300대 에 해당하는 그런 모바일
기기들 까지 모두다 홈페이지에 접속했을 때 같은 내용을 볼 수 있도록
웹디자인을 해야겠죠.
이제 그런 식으로 옛날엔 타 각각 해상도에 따라서
미디어 쿼리라는 걸 이용해서 반응형 웹사이트를 구축을 했는데요.
모든 반응형 웹 디자인 작업을 해줄 수가 있지만 쉽지 않은 작업이 고
또한 많은 테스트가 필요하죠 뿐만 아니라 팀 프로젝트를 진행함에 있어서
정해진 기자인 교가 없이 해 법학인 굉장히 어려운 일이라고 할 수가
있어요.
따라서 부트스트랩 같은 경우는 신숙한 개발이 필요한 팀 혹은 디젠의
약한 개발자에게는 정말 강력한 무기가 될 수 있습니다.
이제 모자 간단하게 예제를 보여 드리려고 합니다. 이것은 이제 제가 옛날에
만들었던 웹 사이트 인데요.
바로 이렇게 생긴 역사이트에요. 어떠한 제가 만든 강좌들을 올릴 수
있도록 하는 그런 웹 사이트 인데 이런 웹사이트 같은 경우도 제가 반응형
웹 사이트가 될 수 있도록 미디어 쿼리를 이용해서 반응형 웹사이트 기술을
그려면 했는데요. 사실 보시면 이렇게
사이트가 추러 등에 따라서 해상도에 맞게 이렇게 크기가 줄어 들도록
구현을 했습니다.
이제 이렇게 많이 줄어들게 되며 는 이렇게 모바일 버전까지 디자인이
지원이 되도록 만들어 썼는데요.
사실 보시면 이제 이런 작업이 굉장히 쉬워 보일 수 있지만 막상 개발을
하려고 하면 정말 각각의 사이트마다 이렇게 만들어 줘야 되기 때문에
생각보다 되게 손이 많이 가는 작업이고 뿐만 아니라 각각의 웹브라우저
나 웹 팁 is 들을 모두 다 고래를 해줘야 된다는 측면에서 굉장히
개발에 있어 시간이 많이 걸리는 작업이에요.
하지만 부트스트랩 을 이용하게 되면 은 방금 전에 제가 보여드렸던 것과
같이 그렇게 반응형 웹디자인 같은 경우를 굉장히 쉽고 빠르게 할 수 있기
때문에 이런 측면에서 굉장히 큰 장점을 가지고 있다고 할 수 있는 거죠.
물론 정말 전문 높이자 인어 같은 경우는 사실 이렇게 부트스트랩 을
사용하지 않는 경향이 더 크고요.
저같이 이제 디자인이 좀 약한 개발자 나 아니면 이렇게 실질적으로 팀
프로젝트에서 빠르게 개발을 해야 되는 경우에 많이 사용하는 템플릿이 라고
할 수 있습니다.
물론 자가 볼 때 부트스트랩 은 정말 배울 만한 가치가 있는 브래 머크
에요.
그리고 공부해 보시면 아시겠지만 굉장히 쉽고 빠르게 컴퓨터로 전공한
사람이 아니더라도 웹사이트를 개발할 수 있고 바로 볼 수 있게 해준다는
창에서 확실히 정말 재미가 있습니다.
이렇게 넘어가 보시면은 이제 한번 바로 부트스트랩 개발 환경을 구축해
보는 시간을 가져보려고 합니다.
이제 먼저 이렇게 부트스트랩 공식 홈페이지에가 가지고
부트스트랩 팸플릿을 다운로드 받을 수 있도록 하겠습니다 바로 이렇게 이동
해 줄게요.
자 바로 이렇게 공식 사이트에 접속한 이후에 다운로드 부트스트랩 을
눌러서 이렇게 보톡스를 템플릿을 받을 수 있도록 합니다. 여기서 가장
왼쪽에 있는 부트스트랩 을 눌러주시면 되구요.
이렇게 눌러 가지고 다음 노드 진행할 수 있도록 합니다. 다운로드를 받은
이후에 자신이 원하는 폴더 안에 한번 압축을 풀어 주도록 할게요.
압축을 풀고 나면 되라 이런식으로 폴더가 구성되어 있는데요.
이제 이 안에 있는 이렇게 css 홍 치 js 가 부트스트랩 템플릿에
전부라고 할 수 있습니다.
이제 이걸 그대로 복사 해 줄게요.
그 다음에 이제 이렇게 자신이 제 만들고자 하는 홈페이지에
제목으로 한 번 폴더를 지어 주도록 하겠습니다. 부트스트랩 템플릿을
이용해서 간단하게 코딩 부스터 라는 이름의 프로젝트를 만들어 보려고 해요.
코딩 부스터 라는 웹사이트를 이제 코딩을 더욱 잘할 수 있게 코디해
날려주는 그런 웹 사이트 라고 할 수 있는데요.
아무튼 이렇게 폴더를 만들어 준 이후에 그 안에다가 이렇게 부트스트랩
템플릿을 그대로 넣어줄 수 있도록 합니다.
그다음 이제 해볼 것은 에디터 소프트웨어를 다운로드 하는 건데요.
최근에 가장 많이 사용되고 있는 소프트웨어 서브라임 텍스트 를 공식
홈페이지에서 다운로드 받을 수 있도록 합니다.
이렇게 한번 바로 이동을 해 볼게요 그럼 이제 이렇게 서브라임 텍스트
에서 자신의 운영체제에 맞는 설치 프로그램 받으시면 되는데요. 저는
윈도우즈 64비트 이용하고 있기 때문에 이렇게 이걸 클릭해주시면 됩니다.
클릭한 이후에 바로 설치를 해보도록 할게요.
이렇게 설치를 진행해 주시고 m 말한건 다 이렇게 디폴트 3팀으로 패
주시면서 설치 진행해 주시면 됩니다.
굉장히 빠르게 설치가 진행되는 걸 알 수가 있구요.
굉장히 이렇게 설치가 완료되면 바로 서브라임 텍스트 의 실행해서 한번
에디터를 킬 수 있도록 합니다.
이제 이렇게 설치한 서버 렘 텍스트를 실행해주시면 이렇게 창이 나온 걸
알 수가 있는데요.
이제 바로 여기에서 이렇게 커서를 둔 컨트롤 s를 눌러서 한번
저장 해 줄 수 있도록 합니다.
저장해 중에 위치는 자신의 만든 이 프로젝트 폴더 안에 css 프렌즈
체이스가 함께 있는 이 위치에 넣어주시면 됩니다.
이렇게 위치를 그대로 복사 하신 다음에 이렇게 이동을 했어
여기에다가 이제 인덱스 점 html 이라고 이렇게 입력을 해서 보장해줄
수 있도록 합니다.
일반적으로 초기 화면 같은 경우는 다 이렇게 이름을 인덱스라고 가지고
있는데요. 이건 모든 웹사이트의 거의 주된 굉 통 점입니다.
이런식으로 인덱스 점에 시테 파일을 만들어 주시면 되구요.
이제 한번 코드를 작성해 볼게요 이제 이렇게 프로젝트 구성까지 끝났기
때문에 한번 서브라임 텍스트 를 이용해서 이렇게 헬로 월드 를 출력하면
로써 웹 개발을 한번 시작해 보려고 합니다.
자바로 다음과 같이 독 타입 html 이렇게 몇 해 주시구요.
이렇게 html 문서로 작성한 달고 알려주도록 하구요.
이제 이안의 다음과 같이 먼저 헤드 라는게 들어가요.
그다음 이제 헤드 또 와 달아 주시구요 얘들아 는 것은 맨 문서에서 가장
윗부분에 해당하는 것으로서 맨 문서가 가지는 기본적인 특성들을 설정해
주는 곳이라고 할 수 있어요. 바로 다음과 같이 메타 태그를 넣어서
캐릭터 세팅을 유치 fa 소 해줄게요. 이건 바로 이 hfa 시라는 가장
보편적인 인코딩을 사용하겠다는 뜻인데요. 그다음 이제 넘어가서
메타 안감에 내의 맥 뷰 폴트 라고 넣어주시구요.
컨텐츠의 이렇게 와이드 는
디바이스 id 라고 해 줍니다. 그다음 이제
이니셜 스케일은 이를 넣어줍니다.
이게 어떤 의미냐 면은 기본적으로 초기 비율은 1.0 이니까. 그냥
일반적인 비울 해주겠다. 소리고
현재 이 화면을 보고 있는 장치의 너비 10 모니터 등 태블릿 등 모바일
2등 간의 웹사이트에 널이 같은 경우는 장치 너비와 일치한다.

이렇게 해주는 거고요.
리포트 같은 경우는 현재 접수 칸 디바이스 의상도 에 맞게 웹사이트를
보여주겠다는 뜻이에요 가장 기본적인 세팅이 라고 할 수 있습니다.
그다음 이제 이렇게 타이틀을 넣어서 웹사이트에 제목을 만들어 주시면
됩니다.
바로 다음과 같이 코딩 부스타 라고 넣어 줄게요.
그다음 이렇게 링크 한 다음에
스타일시트 안 걸리게 참조해 주시면 됩니다. 이게 가장 중요한 건데요. 이
스타일시트가 뭐냐면은
외부적으로 만들어 집 css 디자인을 가져오게 딴소리에요.
이렇게 그림 큰 css 폴더 안에 있는 부트스트랩 정 css2 파일을
이렇게 이용해서 디자인은 꾸미게 따 이렇게 알려주는 겁니다.
지금 보시면 이 인덱스 점 html 파일과 같은 폴더안에 css 안에
있는 부트스트랩 점 씨스 8 보시죠 바로 이 파일을 가져오게 딴 소리
에요.
바로 이렇게 같은 폴더안에 있는 씨스 폴더 안에 있는 부트스트랩 좀
css 8 이렇게 가져오게 따라 라고 명시를 해 준 거고요.
이제 이렇게 헤드가 끝났기 때문에 바지락을 만들어서 실질적으로 맨 문서가
어떠한 내용을 담고 있는지 알려줄 수 있도록 합니다.
이제 이렇게 이 아래 헬로 월드 라고 넣어주면 됩니다.
이렇게 해주게 되면 바로 이 파일을 실행했을 때 헬로 월드가 실행되면서
간단하게 첫번째 웹 문서를 만들어 준 것이라고 할 수 있습니다.
한번 이제 이것을 실행 해 볼게요. 한번 이제 이걸 이렇게 실행을 해보시면
바로 이렇게 헬로 월드 가 웹사이트에 출력이 되는 것을 알 수 있습니다.
이렇게 한번 간단하게 프로젝트의 시작을 알리는 헬로 원리를 출력해
봄으로써 웹 개발에 입문하게 되었습니다.
아무튼 이렇게 앞으로도 이제 이러한 프로젝트 폴더 구성을 유지하면서
각각의 홈페이지 들을 만들어 보면서
부트스트랩 을 익히고 부트스트랩 을 이용해서 어떻게 떄는 할 수가 있는지
그러한 전반적인 내용을 한번 공부해 보도록 하겠습니다.
아무튼 이렇게 이번 시간에는 부트스트랩 이 뭔지 설명하고 개발 환경을
구축한 다음에 헬로 월드 까지 이렇게 출력을 해 보는 시간을 가졌습니다.