Homepage Design with Bootstrap 4 – Consultant Website – Part-1

안녕하세요 여러분, 그곳에 오셔서 매일 수업료를 다시 받으십시오 첫 번째 부분에서는 우리 웹 사이트의 홈페이지를 만들 것입니다

우리는 비주얼 코드 텍스트 편집기를 사용하고 있습니다 우리는 폴더를 만들고 비주얼 코드 편집기에서 열었습니다 그 폴더에서, Stock 폴더를 생성하고 우리가 사용하고있는 몇 개의 이미지를 삽입했다 이 자습서 시리즈에서 비디오 설명에서이 모든 이미지를 다운로드 할 수 있습니다

루트 폴더에 indexhtml과 stylecss 파일을 새로 만듭니다 그런 다음 간단한 html5 스 니펫을 만들고 웹 사이트의 제목을 변경하십시오 이제 우리는 index

html 파일에 부트 스트랩을 추가하려고합니다 부팅 스트랩 문서 탭의 cdn을 사용하여 헤드에 붙여 넣습니다 그 후 js 부트 스트랩 파일을 추가해야합니다 그래서이 세 개의 스크립트 태그를 복사하여 닫는 </ body> 태그 바로 앞에 붙여 넣습니다 그 다음에는 사용자 정의 style

css 파일도 연결합니다 먼저 부트 스트랩 캐 러셀을 만듭니다 따라서 div를 site-header 사용자 정의 클래스로 추가합니다 그 다음에는 캐 러셀 예제 ID로 div를 생성합니다 그런 다음 회전식 슬라이드 및 슬라이드 클래스를 추가 한 다음 데이터 회전식 회전식 슬라이드를 추가합니다

부트 스트랩 캐 러셀이 어떻게 작동하는지 알지 못한다면 부트 스트랩 캐 러셀을 볼 수 있습니다 완전한 가이드 튜토리얼은 여기에서 이 div에서 현재 슬라이드가 있음을 나타내는 클래스 회전식 표시기가있는 ol 태그를 만듭니다 볼 수 있습니다 그런 다음 데이터 타겟 캐 러셀 예제를 사용하여 첫 번째 이미지에 대한 첫 번째 목록 태그를 만듭니다 그리고 데이터 슬라이드를 0으로 지정하고 활성 클래스를 추가하여 첫 번째 셀의 활성 상태를 표시합니다

영상 그런 다음 데이터 타겟 회전식 예와 함께 다른 li을 만듭니다 그리고 데이터 슬라이드를 1에 추가하십시오 그런 다음 동일한 데이터 타겟 회전식 예제 및 데이터 추가 슬라이드가있는 다른 li 태그를 만듭니다 ~ 2

이제 회전식 슬라이드에 슬라이드를 추가하여 회전식 내부 클래스를 추가하고 활성 상태 인 회전 목마 항목 클래스 첫 번째 슬라이드에서는 이미지 슬라이딩 이미지가있는 이미지 태그를 추가합니다 소스에서 첫 번째 배경 슬라이딩 이미지를 지정한 다음 alt 속성을 추가하고 클래스 d- 블록 그런 다음 두 번째 회전식 슬라이드 슬라이딩 이미지가있는 다른 회전식 슬라이드 쇼 이미지를 만들고 alt 및 class 속성 세 번째 회전식 슬라이드 슬라이더로도 똑같이하십시오하지만 배경 이미지를 출처

프로젝트를 실행하십시오 부트 스트랩 캐 러셀이 생성 된 것을 볼 수 있습니다 이제 모든 패딩을 먼저 제거해야합니다 및 모든 html 요소의 여백 따라서 body를 style

css 파일에 삽입하고 여백 0과 여백 0을 지정합니다 그리고 전역 폰트 패밀리를 지정하십시오 이제 모든 슬라이딩 이미지에 너비를 지정하려고합니다 그래서 우리는이 모든 이미지에 너비 100 퍼센트를 더할 것입니다 좋아, 그거야

이제 더 좋아 보인다 그 다음에는 이미지 콘텐츠 레이어를 만들어서 이미지 레이어가있는 div를 만듭니다 수업 그런 다음 stylecss에 이미지 레이어 클래스를 만듭니다

여기에서는 너비 60 퍼센트와 높이 110 퍼센트를 지정합니다 그런 다음 순위 절대 값과 0 %를 지정하고 0 %를 남깁니다 그런 다음 URL에 배경 이미지를 삽입 한 다음 배경 크기를 지정하십시오 및 z- 인덱스 제로 그리고 프로젝트를 실행하십시오 회전 목마 상단에 패널이 표시됩니다

그런 다음 홈 컨텐츠 클래스로 div를 작성하십시오 이 div에서 h2 제목 태그에 텍스트를 추가합니다 그런 다음 단락을 추가하고 텍스트를 삽입하십시오 그런 다음 btn btn-dark 클래스로 버튼을 만들고 다운로드 텍스트를 이 버튼 이제 우리는이 모든 내용을 정렬하려고합니다

그래서 우리는 CSS에 홈 컨텐츠 클래스를 생성 할 것입니다 그리고 마진 – 상단 30 % 너비 60 % 및 마진 – 좌측 20 %를 지정하십시오 그거야 우리는 그것을 정렬하고자하는 가정 컨텐츠를 정렬했습니다 이제 우리는 페이지 상단에 부트 스트랩 탐색을 생성합니다

시간을 절약하기 위해 부트 스트랩 navbar로갑니다 이 navbar를 복사하여 여기에 붙여 넣으십시오 이제이 탐색에서 몇 가지 사항을 변경하려고합니다 그래서 우리는 navbar 브랜드 텍스트를 제거하고 일일 수업 브랜드 아이콘으로 대체합니다 그런 다음 nav 항목 기능을 서비스 및 가격으로 변경하여 블로그에 게시하고 nav 항목을 사용하지 않도록 설정합니다

저희에게 연락하십시오 그걸 제거한 후에, 여기에서 클래스를 사용할 수 없게됩니다 네비게이션 바가 보이지만 바닥에 있습니다 이제 우리는 그것을 맨 위에 놓기를 원합니다 그래서 우리는이 네비게이션을 잘라서 body 태그 바로 뒤에 놓을 것입니다

그런 다음 투명 탐색을 만들려고하기 때문에 navbar light와 bg light 클래스를 제거하십시오 이제는 네비게이션이 위에 있지만 실제로이 패널 뒤에 있습니다 그래서 우리는이 탐색을 앞쪽으로 가져 가고 싶습니다 그래서 우리는 사이트 헤더 클래스를 생성하고 상대적인 위치를 추가 할 것입니다 그런 다음 navbar 클래스를 추가하십시오

위치 절대 값과 0 % 및 z 인덱스 2를 추가하십시오 이제 네비게이션이 앞에 있습니다 이제 탐색 링크를 탐색 할 수 있습니다 그런 다음 탐색 링크 클래스를 추가하고 탐색에 검정색을 지정하려고합니다 그런 다음 약간의 여백을 추가하십시오

따라서 우리는 4 번 마진을 추가하고 4 번 마진을 홈 네비게이션 아이템에 추가 할 것입니다 그런 다음 모든 탐색 항목에 여백을 4만큼 추가하십시오 그거야 홈페이지 디자인이 준비되었습니다 이 튜토리얼 시리즈의 다음 부분에서 더 자세하게 배울 것이다

질문이 있으시면 코멘트 섹션에 나에게 의견을 남기십시오 뭔가 유용한 것을 발견하면 버튼을 누르십시오 이 튜토리얼의 다음 부분에서 보게 될 것이다

2.1 LEARN THE BASICS OF PHP PROGRAMMING

안녕하세요, Alex입니다 설치가 빠른 안내입니다

아파치 MySQL과 PHP는 PC에 있으므로 웹 서버로 사용하고 PHP로 개발을 시작할 수 있습니다 사실, 이것은 다양한 측면을 설명하기에 아주 작을 것입니다 나는 그것이 비교적 간단하기 때문에 확립 된 과정을 거치지 않을 것이다 브라우저에서 볼 수있는 Google 또는 URL 앞쪽으로 이동합니다 XAMPP 이것은 내가 지금까지 약 5 년 동안 사용해 왔던 패키지

이 아주 기본적인 것은 당신이하는 일과별로 상관 없습니다 너의 시스템에 깊숙이있다 근본적으로 이것은 기괴하다 MySQL PHP 우리가 PHP 개발자로서 초점을 맞추고있는 것은 또한 포함되어있는 다른 것들을 포함하고 있습니다 너는 잘 알고있다

php myadmin은 여러분과 여러분의 MySQL 데이터베이스 사이의 인터페이스이므로 채팅 할 때 데이터베이스의 데이터는 필요한 것이지만 PHP myadmin을 사용하면 매우 유용합니다 테이블에 대한 더미 데이터를 만들고 데이터를 검토하려면 이것이 PHP 애플리케이션이 배포 된 이유입니다 이 GD 이 것들이 이미지와 같지 않았습니까? PHP 조작 라이브러리 및 다른 것들의 호스트 이 튜토리얼에서 초점을 맞추고 있습니까? 실제로 Apache MySQL과 PHP에 대한 가이드는 이 스크립트를 설치하거나 다운로드하면 PHP myadmin에 대한 간략한 내용을 볼 수 있습니다 나는 Windows에서 사용하는 데 사용 되겠지만 Linux 및 Mac에서도 사용 가능합니다 그럼 앞으로 나아가 자

일단 설치했다면, 내가 여기로 가면 어떻게 될지 한번보십시오 나는 기본적으로 내 브라우저에서 127 도트에 도달하고있다 0 도트 도트 1 당신은 또한 로컬 호스트를 사용할 수 있습니다이 페이지는 기본적으로 당신에게 넘겨 줄 것이라고 말하는 메모를 말했습니다 설치 완료 일단 아파치를 보시면 아파치가 여러분을 이곳으로 데려 갈 수 있습니다

나는 아마 추천한다 당신이 몇 가지 것을 클릭하는 것을 알고, 당신은 무슨 일이 일어나고 있는지 알고 있습니다 시스템에서이 작업을 실행하기 때문에 여기에서 여러 가지 사항을 살펴 보는 것이 좋습니다 좋아, 다음에 우리가 살펴볼 것은 시작 메뉴 또는 제어판 또는 사용중인 모든 것입니다 이 컨트롤 룸에있을 것이고, 현재 실행중인 서비스를 알려줍니다

PHP는 실제로 실행되지 않는 서비스이기 때문에 PHP를 볼 수 없습니다 그것은 아파치의 일부이다 그래서 아파치는 우리의 웹 서버이고 MySQL은 우리의 데이터베이스 솔루션입니다 그리고이 둘 모두가 현재 실행 중임을 볼 수 있습니다 이제 SVC를 확인했습니다

즉,이 시스템 프로세스를 실행하고 있음을 의미합니다 그리고 당신이 볼 수있는이 비트 세부 사항은 여기서 얘기 할 패치가 있습니다 그리고 내가 입력하면 MySQL이 있다는 것을 알 수 있습니다 그래서 나는 물건을 시작하고 다시 시작하고 다시 시작하지 않을 것이다 여기에서 개발중인 서비스 지점으로 가면 아파치 나 비슷한 것을 얻을 수 있습니다

당신이 모를 경우 MySQL을 사용하여 더 나아가서 다시 시작하거나 제어판에서이 작업을 수행 할 수 있다면 조금 숙련 된 것으로 나타났습니다 아마 잘 작동하지 않을 것이다 원할 경우 서비스를 실행하여 재시작 만하면되므로 특정 서비스가 다시 시작됩니다 좋아, 그럼 우리가 다음을 찾고 있습니까, 어떻게하면 첫 페이지를 만들 수 있습니까? 서버를 통해 실행할 수있는 첫 페이지를 만들려면 어디로 가야합니까? 그리고 또한 PHP myadmin에 대한 간단한 설명과 데이터베이스 인터페이스 이제 XAMPP의 메인 폴더를 살펴보고 그 내용을 살펴 보겠습니다

그래서 나는 분명히 계속되고있는 C 언어의 백 슬래시 XAMPP에서 더 많은 것을하고있다 이것은 운영체제에 따라 다르다 그러나 이것은 Windows 용 가이드입니다 우리는이 모든 파일을 가지고 있습니다 아마도 어느 정도 쓸모가 없을 것입니다

대부분은 나를위한 것이지만, 앞으로 나아가 가장 중요한 것을 살펴볼 것입니다 PHP 어떤 식 으로든 PHP를 구성해야한다면 INI 파일을 얻을 것입니다 여기서 PHP를 스크롤하십시오 그리고 이것은 기본적으로 무언가입니다 변경할 수있는 PHP와 관련된 모든 설정 우리는 계속해서 아파치를 다시 시작하고 모든 변경 사항을 가져올 수 있습니다 따라서 인스턴스 파일 크기를 약간의 파일 크기로 변경해야 할 수도 있습니다

당신이 만났을 때 느끼는 몇 가지 것들이 있습니다 지시 사항을 진행하고이 파일에 편집 내용을 줄 것입니다 그리고 이것이 바로 이것이 당신이 당신이 그것을 기억한다는 것을 더욱 쉽게 알 수있는 곳이라는 것입니다 Apache를 시작하거나 다시 시작하면 PHP 도트 도트 파일을 변경할 때마다 다시 시작됩니다 좋아, 그래서 나는 'Htdocs'및 나는 이것이 아주 잘된다는 것을 분명히 알지 못했기 때문에 XAMPP로 돌아가 보자

Htdocs는 표시 할 파일 이것은 웹 서버 내에서 변경하거나 웹 서버에서 액세스 할 수 있기를 원합니다 conf와 Httpdconf 우리가 가지고있는 것을 보게 될 것이라고 편집 해보자 로터스 여기 설정을 알고, 내가 생각한다면 내가 루트를 입력하면 서버 경로가 있습니다 여기에있는 문서는 루트 루트 목록입니다

기본적으로 Tecna 스틱 디렉토리가 문서에서 작동합니다 그가 앞으로 나아가 야하고 이것을 바꾸어야한다면 콜론 백 슬래시 나 크래커 포워드 슬래시 웹이나 그와 비슷한 것이 될 수 있습니다 좋아, 그럼 이제 우리를 어떻게 보게 될거야? 이 디렉토리에 파일을 만듭니다 그래서 우리는 우리가하고 싶은 일을하기 전에 여기에서 원하는 설정을하고 있습니다 내가 이전에 설명한 것처럼 Htdocs는 당신을 포함 할이 파일의로드를 가지고 있습니까? 기본적으로 현재 브라우저에서 볼 수 있습니다

시험 디렉토리가 있다면, 우리는 실제로 텍스트 편집기를로드 할 것입니다 나는 앞으로 나아갈 것입니다, 그리고 저는 PHP의 한 종류 일 뿐이며, 여기에 태그를 달았습니다 필요하지 않습니다 방금 PHP를 설치했습니다 음, 파일이 있지만, 나중에 갈 무언가 있다는 것을 압니다

그리고 저는 앞으로 나아갈 것입니다 그리고 PHP라고하는 도트 인덱스 인덱스를 만들겠습니다 이제 색인 점 도트 점 도트 PHP 또는 색인 파일이 기본적으로 될 것입니다 PHP 도트 인덱스가 있다면 웹 서버는 점 점 점 점 점 점 점 COM 및 다운로드 공유 PHP Indexphp 히트 곡이되었으므로 디렉토리에만 액세스 했으므로 루트 파일입니다 그는 기본적으로 그래서 나는 앞으로 나아가서이 테스트를 echo하고 우리는이 파일을 시도하고 실행시킬 것이다

그래서 나는 브라우저를 열어 갈 것이고, 나는 갈 것이다 로컬 호스트는 앞으로 슬래시를하고 거기에 우리가 간다 우리는 여기에서 테스트 제작물을 가지고 있습니다 그래서 우리는 PHP를 사용하고 있습니다 그래서 여기에서 모든 파일을 보관하고 싶습니다

실제로 우리는 식당이 제대로 따라 다니고 있다는 것을 알고 있습니까? 포트 80을 사용하는 응용 프로그램이 실행 중이 아니며이 로컬 호스트 페이지를 볼 수 있습니다 그리고 htdocs 디렉토리에 파일을 만들면 다음과 같은 출력을 얻을 수 있습니다 그럼 준비가 끝났습니다 PHP 작성을 시작할 수 있습니다