부트스트랩 개발 환경 만들기

이 기사에서 Bootstrap 개발 환경을 만드는 것부터 시작하겠습니다. 이전 기사에서 설명했듯이 부트스트랩은 모든 화면 크기에 자동으로 적응하는 사이트를 쉽게 만들 수 있는 프레임워크입니다.

사실 특별한 도구는 필요하지 않습니다. 데스크탑의 텍스트 편집기에서 코드를 쉽게 작성할 수 있습니다. 많은 사람들이 HTML, CSS 및 Javascript를 지원하기도 합니다. 하지만, 통합 개발 환경에는 코드를 쉽게 작성하고 교정할 수 있는 다른 도구가 포함되어 있습니다.

부트스트랩 개발 환경 만들기

내 취향에 가장 적합한 통합 개발 환경은 Visual Studio Code입니다. 그러나 많은 Linux 사용자는 원격 측정을 Microsoft에 전송하기 때문에 이를 좋아하지 않습니다. 그럼에도 불구하고, 누구와도 데이터를 공유하지 않는 VSCodium이라는 VSCode 소스 코드를 사용하는 대안이 있습니다. 그건 버전 이제부터 사용할 것입니다.

VSCodium 설치

다음과 같은 방법으로 VSCodium을 설치할 수 있습니다.

스냅 스토어

sudo snap install codium --classic

플랫 팩

flatpak install flathub com.vscodium.codium

데비안과 파생물

인증 키를 받았습니다

wget -qO - https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/master/pub.gpg \
| gpg --dearmor \
| sudo dd of=/usr/share/keyrings/vscodium-archive-keyring.gpg
저장소를 추가합니다.
echo 'deb [sign-by=/usr/share/keyrings/vscodium-archive-keyring.gpg] https://download.vscodium.com/debs vscodium 메인' \
| sudo 티 /etc/apt/sources.list.d/vscodium.list
업데이트 설치
sudo apt update
sudo apt install codium

페도라 / RHEL / CentOS / RockyLinux / OpenSUSE

인증 키를 받습니다.

sudo rpmkeys --import https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg

우리는 저장소를 추가합니다

페도라/RHEL/CentOS/RockyLinux: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=download.vscodium.com\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/yum.repos.d/vscodium.repo

오픈수세/수세 : printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=gitlab.com_paulcarroty_vscodium_repo\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/zypp/repos.d/vscodium.repo

설치하려면 다음을 수행합니다.

페도라/RHEL/CentOS/RockyLinux: sudo dnf install codium

OpenSUSE / SUSE : sudo zypper in codium

아치 리눅스

이 두 명령 중 하나를 사용할 수 있습니다.

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

앵무새 OS

sudo apt update
sudo apt install codium

닉스(OS)

nix-env -iA nixpkgs.vscodium

VSCodium 구성

설치 모드에 따라 VSCodium은 영어로 표시될 수 있습니다. 우리는 이것을 쉽게 변경할 수 있습니다.

1. 파일 메뉴에서 환경 설정.
2. 클릭 확장.
3. 우리는 쓰기 스페인어 검색 엔진에서.
4. 확장을 클릭하십시오 스페인어.
5. 클릭하여 설치를 시작합니다. 설치합니다.
6. 클릭 언어를 변경하고 다시 시작하십시오.

VSCode에는 다양한 언어로 프로그래밍을 용이하게 하는 방대한 확장 모음이 있으며 VSCodium에서도 사용할 수 있습니다. 필요한 것을 설치해 보겠습니다.

1. 클릭 환경 설정.
2. 클릭 확장.
3. 우리는 쓰기 부트 스트랩 검색 엔진에서.
4. 우리는 다음과 같은 것을 선택합니다. Bootstrap 5 및 Font Awesome Snippets.
5. 설치를 클릭하십시오

사이트 코드 작성을 시작할 때 이 확장의 사용을 보게 될 것입니다. 하지만, 해명을 해야 합니다. 작동하려면 명령을 입력해야 합니다. 이 경우 복사 및 붙여넣기가 작동하지 않습니다.

부트스트랩 얻기

부트스트랩은 기본적으로 구성 요소 모음입니다. Bootstrap 기반으로 웹사이트의 코드를 작성할 때 우리가 해야 할 첫 번째 일은 브라우저에게 그것들을 찾을 수 있는 위치를 알려주는 것입니다.

Bootstrap을 얻으려면 두 가지 대안이 있습니다. 첫 번째는 다음에서 다운로드하는 것입니다. 웹 페이지 프로젝트 파일에 추가하고 두 번째는 프로젝트 자체의 서버에 대한 링크를 넣는 것입니다.. 또한 일부 패키지 관리자를 사용하여 다운로드할 수도 있지만(배포에서 사용되는 것이 아니라 다른 프로그래밍 언어에서 사용하는 것을 의미합니다) 문서에 남겨두겠습니다.

명심하십시오 부트스트랩 파일을 로컬에서 사용하려면 해당 파일을 서버에 업로드해야 합니다. 웹사이트의 나머지 부분과 함께. 프로젝트의 CDN 서버에 연결하면 필요하지 않습니다.

Bootstrap 패키지를 다운로드하면 두 개의 폴더와 일련의 파일이 있는 것을 볼 수 있습니다. 우리는 두 가지에만 관심이 있습니다. JS 폴더에서 부트스트랩.번들.js CSS 폴더에서 부트스트랩.css.

두 옵션의 코드는 거의 동일합니다. 위치 경로를 변경하면 됩니다.

예를 보자
로컬에서 부트스트랩 사용

프로젝트 CDN에서 사용

로컬 파일의 위치는 임의적입니다. bootrap이라는 폴더에 넣고 JS와 CSS라는 두 개의 하위 폴더를 만들었습니다.

나머지 코드를 이해하지 못했다고 걱정하지 마십시오. 우리는 다음 기사에서 그것을 다룰 것입니다.

주의

기사를 게시한 후 콘텐츠 관리자가 HTML 코드를 표시하지 않고 결과를 표시한다는 것을 발견했습니다. 예제를 Github 또는 이와 유사한 사이트에 업로드하고 여기에 스크린샷을 넣을 것입니다.