Responsive Bootstrap 4 Gaming Website Build From Scratch

안녕하세요 일일 수업료로 돌아 오신 것을 환영합니다

이 튜토리얼에서는 간단한 부트 스트랩 게임 웹 사이트를 만들고 있습니다 부트 스트랩을 사용하여이 웹 사이트를 신속하게 만들 것입니다 이 튜토리얼은 초보자가 부트 스트랩 그리드 시스템을 사용하는 방법을 이해하고이를 귀하의 웹 사이트에 이 튜토리얼에서는 부트 스트랩 그리드 시스템으로 간단한 레이아웃을 작성하는 방법을 학습합니다 부트 스트랩 샘플 코드 샘플을 사용하여 실제 웹 사이트를 구축하는 방법에 대해서도 배우게됩니다 또한 모바일 장치에 맞게 웹 사이트를 응답하는 방법을 배우게됩니다

이 튜토리얼에서는 부트 스트랩 샘플 코드를 복사하여 프로젝트에서 사용합니다 그러나이 비디오를 시작하기 전에 매일 학비 채널을 구독하고 내 모든 새로운 비디오를 알리기위한 벨 아이콘 그래서 우리가 늦기 전에 항상 우리가 시작하자 먼저 프로젝트 파일을 만들고 편집기에서 엽니 다 이제 우리는 스톡 폴더를 만들고 튜토리얼에서 사용중인 일부 이미지를 복사합니다

설명에서이 이미지를 다운로드 할 수 있습니다 따라서 이미지를 복사하여 스톡 폴더에 붙여 넣을 것입니다 그런 다음 indexhtml 및 stylecss 파일을 만듭니다

indexhtml 파일에서 우리는 간단한 html5 스 니펫을 만들고 제목을 쓸 것입니다 그런 다음 부트 스트랩 사이트로 가서 css cdn을 복사하여 머리에 붙여 넣습니다 또한 부트 스트랩 웹 사이트에서 script 태그를 복사하여 닫는 직전에 붙여 넣으십시오 body 태그

그 다음에는 stylecss 인 사용자 정의 CSS 파일을 연결합니다 body 태그에서 사이트 래퍼 클래스를 만들고 그 안에 header 태그를 넣습니다 그 후 부트 스트랩 웹 사이트로 이동하여 원하는 네비게이션 바를 찾으십시오 그래서 나는 이것을 선택할 것이다

이 코드를 복사하여 헤더에 붙여 넣으십시오 이제이 navbar에서 몇 가지 사항을 변경합니다 먼저 브랜드 이름을 변경합니다 라이브 결과를보기 위해 라이브 서버에서 먼저 열어 두겠습니다 이제 우리는 글꼴을 Google 글꼴에서 글꼴을 선택할 수 있도록 브랜드 이름에 글꼴 패밀리를 추가합니다

그래서 Google 글꼴 웹 사이트에서 글꼴을 검색하고 추가합니다 링크를 복사하여 머리에 붙여 넣으십시오 이제이 글꼴을 브랜드 이름으로 사용합니다 그런 다음 탐색 링크를 변경합니다 그래서 나는 nav 링크 텍스트를 바꿀 것입니다

마지막 탐색 링크에서 비활성화 클래스를 제거하고 다른 탐색 링크를 만듭니다 이제는 화면의 오른쪽에 이러한 탐색 링크를 정렬하여 div를 만듭니다 navbar nav 클래스를 열고 오른쪽 여백을 지정하십시오 그거야 그런 다음 메인 웹 사이트 콘텐츠 섹션을 만들어 메인 태그를 추가합니다

이 메인 태그에서 우리는 캐 러셀을 추가 할 것이므로 부트 스트랩에서 캐 러셀의 페이드를 발견 할 것입니다 웹 사이트에 복사하여 여기에 복사하여 붙여 넣으십시오 그런 다음 이미지 경로로 Src 특성을 변경합니다 여기서는 이러한 3 개의 회전식 광고 항목에 대한 스톡 이미지 경로를 지정합니다 stylecss에서 우리는 마진과 패딩을 html 요소에서 제거 할 것입니다

배경색을 추가하십시오 그런 다음 navbar 클래스를 만들어 투명하게 만듭니다 그리고이 navbar light와 bg light 클래스를 제거하십시오 그리고 navbar 어두운 클래스를 추가하십시오 이 클래스는 nav 링크 색상을 흰색으로 만듭니다

이제이 네비게이션이 투명 해지고 검은 색 몸체 배경색이 보입니다 그런 다음 위치 및 z 색인 속성을 탐색 바에 추가합니다 그런 다음 탐색 링크 클래스를 만들고 글꼴 크기를 추가합니다 그런 다음 메인 태그를 만들고 절대 위치 0과 z 인덱스 0을 지정하십시오 이제 투명 탐색을 볼 수 있습니다

이 후 우리는 회전 목마 이전 및 다음 표시기를 정렬합니다 따라서 이전 및 다음 클래스를 사용하고이 표시기의 너비를 지정합니다 그런 다음 섹션 태그가있는 섹션 1 클래스를 만듭니다 그리고 그 안에 컨테이너 클래스를 넣으십시오 그런 다음 행 클래스로 div를 만들고 col-md-4 격자의 세 열을 넣습니다

첫 번째 열에 카드를 삽입합니다 따라서이 카드를 복사하여 첫 번째 열에 붙여넣고 이미지 원본 만 변경하면됩니다 속성 우리는이 카드가 왜 맨 위에 정렬되어 있는지를 나타내는 메인 태그에 절대 속성을 지정합니다 이제 우리는 이것을 맞추기 위해 사이트 래퍼 클래스를 생성 할 것입니다

따라서이 사이트 래퍼 클래스의 높이를 지정합니다 그거야 그 후 우리는 lorem 웹 사이트에서 데모 텍스트를 추가 할 것입니다 그래서 우리는 이것을 복사해서 여기에 붙여 넣을 것입니다 텍스트 어두운 부트 스트랩 클래스를 지정하십시오

그 후에 우리는 또 다른 카드를 만들 것입니다 따라서이 카드를 복사하여 두 번째 열에 붙여 넣으십시오 이미지 원본 속성을 변경하십시오 그거야 그런 다음 세 번째 열에도 세 번째 카드를 만듭니다

그런 다음 이전 닫는 행 div 다음에 다른 행을 만듭니다 여백 y 4를 추가하고 두 개의 열을 만듭니다 그래서이 칼럼에서는이 카드를 사용할 것입니다 따라서 이것을 복사하여 첫 번째 열에 붙여 넣으십시오 우리는 카드를 약간 변경합니다

우리는이 두 개의 li 태그를 제거합니다 그리고 이미지를 지정하십시오 그런 다음이 텍스트를 변경하고 여기서 앵커 태그 하나를 제거하십시오 그리고이 앵커 태그를 연극으로 지으십시오 그런 다음 제목 텍스트 이름을 지정하십시오

그런 다음 첫 번째 열에 대해 오프셋 2를 추가합니다 두 번째 열에 다른 카드를 만들어 첫 번째 카드를 복사 한 다음 붙여 넣으십시오 두 번째 열 그런 다음 이미지를 변경하고 일부 텍스트 제목을 변경하십시오 그런 다음 섹션 2를 만듭니다

우리는이 카드를 여기에서 사용할 것입니다 이 카드를 복사하여 2 절에 붙여 넣으십시오 그래서 여기에서 먼저 텍스트를 가운데에 놓고 제목을 변경합니다 그런 다음 이미지 태그를 제거하고 시차 클래스로 span 태그를 만듭니다 이 카드에 시차 효과를 추가합니다

먼저 stylecss에서 모든 카드에 검정색을 지정합니다 text-white bootstrap 클래스를 추가하여 텍스트에 흰색을 추가하십시오 알았어 그런 다음 시차 클래스를 style

css 배경 이미지, 배경 첨부, 배경 위치, 배경 추가 반복하고 높이 500px를 추가하십시오 이제이 아름다운 시차 효과를 만듭니다 그런 다음 섹션 3을 만들고 마진을 추가합니다 그리고 컨테이너 클래스를 만들고 그 안에 행을 넣으십시오

여기 col-12 그리드를 만듭니다 그런 다음 h3 제목에 contact us 텍스트를 추가하십시오 그리고 그것에 색깔을 지정하십시오 그런 다음 다른 행을 만들고 col-md -12 표를 추가하십시오 여백 위쪽 4와 함께 양식 태그를 추가하십시오

그런 다음 폼 컨트롤 클래스를 만들고 그 안에 열을 넣으십시오 여기에 입력 텍스트 상자를 만듭니다 폼 컨트롤 클래스와 이름 자리 표시 자 그 후 또 다른 열을 만들고 성 입력란에 다른 입력 텍스트 상자를 추가하십시오 그 다음 여백 상단에 다른 양식 행을 만듭니다

그리고 첫 번째 열에서 양식 컨트롤 클래스와 이메일을 사용하여 다른 입력 텍스트 상자를 만듭니다 자리 표시 자 그 후에 margin top이있는 다른 양식 행을 만들고 열을 만듭니다 이 열에는 주석 달기가 생성됩니다 그런 다음 id 영역 텍스트 영역 컨트롤을 사용하여 textarea 텍스트 상자를 만들고 5 행을 지정하고 자리 표시 자 메시지

그거야 그런 다음 마지막 섹션 4를 만들고 텍스트 센터와 텍스트가 어두운 단락을 추가합니다 부트 스트랩 클래스 그리고 여기에 저작권 고지문을 작성하십시오 span을 사용하여 웹 사이트 이름의 색상을 변경합니다

마지막으로 우리는 첫 번째 컨베이어에 대한 제목을 추가하려고 했으므로 첫 번째 컨베이어 우리는 회전 목마 캡션 클래스로 div를 생성 할 것이다 그리고 dnone 및 d-block 클래스를 지정하고 assassin creed title을 사용하여 h3을 만듭니다 그리고 세 점으로 단락을 만듭니다 그래서 이것은 이렇게 보일 것입니다 완벽 해

모든 것이 만들어집니다 그래서 우리는이 웹 사이트가 반응 적인지 아닌지 확인합니다 이 웹 사이트는 완전히 반응하지 않습니다 이제 우리는 이것이 완전히 반응하도록 만들 것입니다 따라서 style

css 파일에서 미디어 쿼리를 생성하고 최대 장치 너비와 변경 사항을 생성합니다 사이트 래퍼 클래스 높이 속성 그 후 col-md-4 클래스를 만들고 약간의 여백을 추가하십시오 그 다음에는 회전식 표시기를 표시하지 않으므로 디스플레이를 사용하여 제거합니다 없음 속성 그거야 이제 귀하의 웹 사이트는 모바일 장치에 반응 적입니다

이 튜토리얼의 모든 내용은 유용하다고 생각되면 버튼을 누른 다음 이 비디오를 친구들과 공유하십시오 질문이 있으면 비디오 댓글 섹션에 저에게 의견을 말하십시오 그것은 오늘을위한 전부입니다 우리는 다음 튜토리얼에서 당신을 보게 될 것이며 그때까지 행복하게 지켜 볼 것입니다