아름다운 웹 사이트를 만들기 위해 Twitter에서 개발 한 프레임 워크 인 Bootstrap에 대해 들어 본 적이 없다면 놓칠 것입니다! 부트 스트랩을 사용하면 CSS (Cascading Style Sheets)에 대한 지식이 없어도 웹 사이트를 빠르고 쉽게 디자인 할 수 있습니다. 웹 프로그래밍에 익숙하지 않다면, Bootstrap의 작동 방식을 배우기 위해 CSS에 대해 알 필요가 없습니다. HTML 문서 하나만 있으면됩니다. 우리는 Bootstrap을 살펴보고 그것이 무엇인지, 작동 방식 및 모든 웹 사이트에 적합한 옵션인지 보여줍니다.
HTML 파일에 부트 스트랩 API 삽입
메인 프로젝트 파일에 부트 스트랩을 삽입하기위한 몇 가지 옵션이 있습니다. 첫 번째 옵션은 필요한 모든 부트 스트랩 파일을 프로젝트에 삽입하는 것입니다. 패키지를 다운로드하여 프로젝트 폴더에 업로드하면됩니다. 물론 기본 Bootstrap CSS 파일을 문서에 연결해야합니다. Bootstrap의 공식 웹 사이트에는이를 수행하는 방법에 대한 단계별 안내서가 있습니다.
다른 옵션은 패키지 다운로드를 건너 뛰고 CDN (Content Delivery Network)을 사용하는 것입니다. CDN을 사용하면 기본 부트 스트랩 파일을 다운로드하지 않고 HTML 문서에 연결할 수 있습니다. 물론 서버가 다운 되어도 비즈니스 나 포트폴리오 페이지를 빨리 떠날 수는 없기 때문에 전문 웹 사이트에는 항상 좋은 것은 아닙니다. 프로젝트에 파일을 보관하는 것이 가장 좋지만 학습 목적으로 CDN은 잘 작동합니다.
HTML 문서에 Bootstrap을 삽입하려면 다음 코드를
HTML 문서의 태그 :해당 링크가 해당 헤드 태그에 삽입되면 Bootstrap 클래스 사용을 시작하도록 설정해야합니다. 문서는 다음과 같아야합니다.
부트 스트랩과 클래스
부트 스트랩 요소는 마크 업에 삽입 할 수있는 미리 작성된 CSS 모음 인 클래스로 분류됩니다. 마크 업에 클래스를 삽입하는 것은 쉽습니다. 이전 기사에서 설명한대로 사용하려는 클래스의 이름을 알고 class =”classname” 값을 사용하여 HTML 요소 중 하나에 적용하면됩니다.
어려운 부분은 그 모든 것이 어떻게 작동하여 아름다운 무언가를 만드는지 알아내는 것입니다. 공식 문서에서 바로 부트 스트랩에서 사용할 수있는 모든 클래스를 확인할 수 있습니다. 이제 부트 스트랩 마스터 링은 또 다른 이야기입니다. 그것은 우리 나 다른 사람이 당신에게 가르 칠 수있는 것이 아닙니다. 자습서 후에 자습서를 볼 수 있지만 프레임 워크를 잘 사용하려면 많은 시행 착오가 따릅니다. 그리고, 그것은 당신이 당신의 자신의 프로젝트에서 실습해야합니다.
이를 염두에두고 Atom 또는 다른 텍스트 편집기를 사용하여 컴퓨터에서 HTML 프로젝트를 시작하고 HTML 및 CSS 클래스가 무엇인지 검토 한 다음 Bootstrap을 사용하여 게임을 시작하십시오. 충분한 마크 업을 알고 있다면 테스트 연습으로 자신의 포트폴리오 웹 사이트를 만들 수도 있습니다.
부트 스트랩은 모든 웹 사이트에 적합한 옵션입니까?
부트 스트랩은 훌륭한 프레임 워크이지만 모든 웹 사이트에서 실행 가능한 옵션입니까? 그것은 프로젝트의 요구 사항뿐만 아니라 개발자에 달려 있습니다. 많은 전문적인 환경에서, 당신은 실제로 어떤 기술을 사용하고 있는지 선택하지 않을 것입니다. 왜냐하면 그것은 대부분 프로젝트 관리자에게 달려 있기 때문입니다. 해당 프로젝트 관리자가 Bootstrap을 사용하기로 결정했다면, 수많은 커스텀 CSS와 결합 할 것입니다. 이것은 일반적으로 Bootstrap을 사용하는 웹 사이트를 다른 웹 사이트와 독특하고 다르게 만드는 것입니다.
개인적으로 Bootstrap이 모든 웹 사이트에 훌륭한 옵션이라고 생각하지는 않습니다. 물론, 그것은 약간의 지름길을 제공하고 도움을 줄 수 있지만, 궁극적으로 CSS를 기본으로 설계하는 것이 제어를 통해 가장 좋은 경로라는 것을 알았습니다. 그러나 다시 한 번 웹 프로그래밍을 시작하는 경우 부트 스트랩을 전혀 사용하는 것은 좋지 않지만 경력에 의존하지 마십시오.
초보자 개발자 인 경우 포트폴리오의 모든 프로젝트에 Bootstrap을 사용해서는 안됩니다. API에 능숙 할 수도 있지만 CSS에 대한 방법을 완전히 알지는 못합니다. 즉, 포트폴리오 (또는 부트 스트랩을 쉽게 가져올 수 있기 때문에 독점적으로 CSS)에 두 가지를 적절히 혼합하는 것이 좋습니다.
폐쇄
이것이 바로 부트 스트랩의 핵심입니다. 앞서 언급했듯이 프레임 워크를 사용하기 위해 HTML 프로젝트를 시작하고 요소에 다른 클래스를 추가하는 것이 좋습니다. Bootstrap이 제공하는 다양한 구성 요소는 여기에서 설명 및 코드 예제와 함께 찾을 수 있습니다.
부트 스트랩은 정말 깔끔한 도구이지만 그 도구에만 의존해서는 안됩니다! 익숙해 져서 프레임 워크를 둘러 보는 것도 좋은 방법이지만 CSS로 뛰어 들어 비하인드 스토리를 실제로 이해해야합니다. 뿐만 아니라 CSS에 대한 확고한 지식은 부트 스트랩을 크게 보완하여 사용자 정의를 통해 독특하고 아름다운 웹 사이트를 만들 수 있습니다.
