Bootstrap 4 Scratch Build A Coming Soon Page In Less Than An Hour with Bootstrap 4 and Brackets

안녕 얘들 아,이 비디오에 오신 것을 환영합니다 이것은 시스템 22에서 제이미와 웹 디자인 그리고이 비디오에서 우리는 앞으로 곧이 페이지를 만들 것입니다 당신이 뭔가를 넣으려고하는 고객을위한 사이트를 만들고 있다면 멋지다

그러는 동안 제품이 나왔다면 제품이 출시 될 때까지 광고하기를 원한다면 도메인에 사이트를 추가하여 인식의 조금 그들은 다만 가지고있는 중대한 공구이고 그들은 아주 대중적이다 요즘은 지금이 작업을 수행하기 위해 약간의 소프트웨어를 텍스트 편집기 다운로드는 무료이며 대괄호라고하며 다운로드 할 수 있습니다 괄호 dot io 아래 동영상 링크는이 동영상 아래에 표시되며 우리는 또한 이미 약간의 자바 스크립트로 작성된 코드를 사용하려고합니다 우리의 실제 카운트 다운 타이머 자체는 우리 사이트에 포함시킬 것입니다 왜냐하면 나는 가능한 한 빨리이 일을 시도하고 시작하려고합니다 그래서 시작하겠습니다

일단 당신이 당신의 괄호를 다운로드하면, 당신이 한 번 그것을 설치하십시오 그것이 앞으로 나아가고 그것을 열 수있는 그것을 설치하면 다음과 같이 보일 것입니다 그것이 보이지 않으면 그냥 보러 갈 수 있습니다 그러나 원하는대로 가질 수는 있습니다 나는 당신이 밝은 테마를 원할지도 모르는 어두운 테마를 가지고있다 나는 어둠을 선호한다 동영상을 만들 때 읽고 쓰기가 쉽기 때문에 개인적으로 테마를 사용합니다

믿어 그래서 나는 단지 거기서 보았고 주제에 가서 지금 바꿨다 이 법안에 대해서는 여기에 확장 기능을 사용하여 확장 관리자를 파일로 보내면이 파일을로드하는 것이 정말 쉽습니다 여기에 작은 창이 있고 이것은 모든 사용 가능한 플러그인 또는 추가 상자입니다 확장 프로그램에는 4 개의 대괄호가 있고 그 중 수백 개와 모든 것이 있습니다 내가 찾은 것은 오늘 내가 사용하게 될 무료입니다

설치된 탭 그것은 하나의 템플릿으로 시작하는 템플릿을 시작하기위한 부트 스트랩입니다 약간의 시동기 부트 스트랩 템플릿을 얻으려면 클릭하십시오 사용 가능한 탭과 부트 부트 스트랩에서 템플릿을 시작하십시오 설치 버튼을 눌렀을 때 설치하거나, ​​설치 버튼을 누르면 사이트에서 zip 파일을 다운로드하고 여기에 zip 파일을 드래그하면됩니다 당신을 위해 그것을 설치하십시오 그래서 일단 설치하면 이것을 찾을 것입니다

귀하의 파일 메뉴에서 여기에 새로운 부트 스트랩 템플릿 그래서 전진하고 공격 할거야 그것과 거기 우리는 빙고이다 다만 우리들을 위해 해골을 만들었다이다 또는 부트 스트랩 템플릿을 사용하여 우리가하고 싶은 것이 무엇인지 보여 드리겠습니다 그것을 저장하고 지금은 지수로 저장할 것입니다 HTML로 저장하고 싶습니다 indexhtml 원하는대로 호출 할 수 있지만 index

html로 저장하는 것이 좋습니다 폴더에 Google이 서버에 업로드하기 때문에 브라우저가 항상 색인 된 또는 HTML 또는 색인 점을 찾는 서버를 찾습니다 PHP는 저장하므로 여기에 폴더를 가져 오면 그냥 그것을 더블 클릭하면 구글 크롬으로 선택하신 브라우저에서 열 수 있습니다 여기서는 아무것도 보지 않습니다 실제로는 탐색 막대가 있습니다

어쨌든 거기에 텍스트를 사용하지 않을 것입니다 우리의 브래킷에 지금 다운로드 탭을 닫고 스타일링을 잘 시작합시다 그들은 여기에 약간의 인라인 스타일을 가지고있어 그래서 나는 한 페이지 야 일반적으로 이것을 사용하십시오

외부 스타일 시트를 사용 하겠지만, 이 순간을 사용하면 맨 위와 그 클래스에서 약간의 패딩을 제공합니다 이 텍스트는 여기에있는 템플릿의 스타일이므로 내가하고 싶은 것은 넣습니다 그 카운트 다운 타이머는 그 텍스트가 기본적으로 여기에 있고 아마도 배경 이미지 및 내 제품에 대한 내 자신의 텍스트를 넣고 방법 아마도 우리의 로고는 여기에 있습니다 그래서 우리가 먼저 할 일을 해봅시다 이 사이트로 이동하려면 여기를 클릭하고 아래 링크를 클릭하십시오

www 세 학교 ​​cokr 사이트는 두 배로 많이 사용하고 있습니다 우리를 위해 작성된이 자바 스크립트 비트는 카운트 다운을 표시하도록 말하고 있습니다 타이머를 사용하는 것이 아니라 여기 JavaScript로 깊이 들어가기는 어렵지만 기본적으로 이것은 여러분에게 수학을하는 것과 그것이주는 것입니다 당신은 여기에 결과를 출력하고 그것은 ID가 데모를 사용하면 여기에 넣어 둔 데모 ID로 요소를 만들 수 있습니다

또는 당신은 그것을 다른 것으로 부르고 그것을 당신 자신의 것으로 만들 수 있습니다 시작 스크립트 태그에서이 스크립트 비트 복사하기 닫기 스크립트 태그 당신이 지금 우리 괄호로 돌아가는 사람들을 털썩 내버려 두지 말아야합니다 스타일은 맨 위의 스크립트에 들어가고 맨 아래에 가서 자바 스크립트로 그려 넣습니다 CD에서 끝내기 여기 콘텐츠 콘텐츠 전달 네트워크 그래서 우리는 그것을 아래에 넣을거야 거기에 마지막으로 컨트롤 V를 붙여 넣으십시오 거기에 그냥 깔끔하게 갈 것입니다

그것을 가로 질러 그것을 가로 지르는 것에 의해 조금 위로 가게해라 그러면 그것은 선에있다 우리가 그 사이트로 돌아 가면 여기에 그 컨트롤을 저장할 것입니다 표시하려면 선택을 취소하면 요소에 결과가 표시되지 않습니다 데모의 ID로 다양한 document

getelementbyid mo 그래서 우리가해야합니다 데모의 ID가있는 문서를 가지고 있습니다 내가 말할 수있는 것처럼 당신은 바꿀 수 있습니다 데모에서부터 원하는 것을 선택하되 div 또는 그걸로 무언가를 표시 할 수있는 곳이있어 우리 대괄호로 돌아가서 div를 만들고 그걸 넣자 우리가 여기에있는 것의 바로 위에 우리는 수업을 할 수 있습니다

너는 네가 원하는대로 부른다 내 타이머를 부를거야 그것을 닫고 그 단락 텍스트를 데모의 ID 그래서 만약 우리가 텍스트 위의 우리 사이트로 돌아 간다면 그 작은 카운트 다운이 시작됩니다 이제 Ctrl 키를 누른 상태로 돌아가 봅시다 그곳에 사이트가있는 것은 매우 흥미롭지 않습니다

아니 스타일과 그것은 왼쪽 정렬 그래서 내가 뭘하고 싶은지 그것을주고 여기 중간에 좀 더 크게 만들어서 스타일을 다시 알려 드리겠습니다 브래킷 소프트웨어는 여기에 우리의 스타일로 올라갑니다 데모가 너무 커서 대상을 찾았으므로 다시 스크롤해야합니다 ID는 데모에서 해시 태그 여야하며 중괄호를 열고 닫을 수 있습니다 우리가 스타일을 넣으려고하는 내부는 이제 64 크기의 폰트 크기라고합시다

꽤 큰 픽셀이어야합니다 저것을 저장하고 다만 우리가 거기에 가고있는 무슨을보십시오 나는 지금두고 싶을 것이다 중앙에 있으므로 아래로 스크롤 해 봅시다 부트 스트랩 클래스를 사용하여 여기에 수업을해라 나는 단지 거기에있는 문장을 추가 할 것이다 그 안에있는 어떤 것이라도 그 ctrl을 우리 사이트로 다시 저장하지 않을 것입니다

이 부분이 중간에 있어야하며 지금은 훨씬 커야합니다 이 모든 일의 배경에 이미지를 넣고 싶습니다 이 텍스트는 백인이므로 눈에 잘 띄고 나는 정말로 당신이 좋아한다는 것을 알지 못합니다 124 일 3 시간 51 분 43 초 나는 너무 예민하지 않다 그곳에있는 M과 s는 그걸 꺼내어 우리가 편집 할 수있게 해줍니다

자바 스크립트와 우리가 거기에있는 동안 우리는 우리가 좋아하는 날짜를 넣을 것입니다 우리는 여기서 무작위로 말하기 위해 카운트 다운 할 날짜를 설정합니다 12 월 18 일 특별한 이유없이 2018 2시에 만들어 봅시다 1400 24 시간 시계는 여기에 2시에 강타한다 나는 그 8 년과 수필을 제거하고 나중에 목표로하고 싶다

우리가 여기를 보시면 ID 데모가있는 요소에 결과가 표시됩니다 여기 아래에 일 더하기 D가 표시 될 것입니다 그래서 나는 그것을 삭제하려고합니다하지만 저는 쉼표 사이의 간격을 남겨두면 좋은 차이가 여전히 생길 것입니다 저기 그 삭제 삭제하고 지금 내가 우리가 리프레시 할 때 그것을 삭제합니다

다른 날짜는 숫자 뒤에 플러스로 그 편지를 두세 거기에있어 내가 뭘 할거라고 생각하는거야 우리는 ctrl이 사이트 새로 고침으로 되돌아 간다고 말할 것이고 그것은 우리가 바꿀 것입니다 228 일 3 시간있어 36 초 조금 더 좋아 아직도 더 크고 조금 더 멀리 떨어져있는 것을보고 싶다 보울의 폰트 무게를 더 늘리거나 더 크게 만들자

글자를 써서 무게를 줄 수 있고 글꼴이 지원하는 경우 200 ~ 700 그것과 함께 일반 글꼴을 사용하고 있습니다 매트를 만들고 싶다면 여기에 우리의 CSS에 백업 여기에 데모 말 font-weight : 굵은 글자를 조금 넣어 보겠습니다 그 사이에 더 많은 공간이 있고 개별적으로 할 수는 없지만 우리가 할 수있는 것은 우리 사이에 약간의 공간을 두는 단어 간격을 말하자 일어나야 할 60 픽셀은 그들에게 숨을 쉬는 방을줍니다 조금 더 무거워서 ctrl을 사이트 영역으로 되돌려 놓습니다

좋아, 이제는 거기에 형성되고있어 여기에 배경 이미지를 넣자 이 전체적인 음 그래서 나는 이것을 잠시 멈추게 할 것이다 나는 간단히 이미지를 붙잡거나 우리가 간다 PEC 판매원에게 또는 어딘가에서 무료 재고 사진을 얻었고 나는 작은 로고도 붙잡을거야 그래, 나 자신에게 작은 이미지와 모든 것을 가지고있어 내가 한 일은 여기에 이미지를 넣는 것입니다 그리고 당신이 볼 수있는 것처럼 그것은 JPEG입니다

크기는 124 x 680입니다 합리적인 크기의 원한다면 우리는 전체 배경을 커버하고 나는 다른 하나의 로고를 도난당했습니다 데모 용으로 여기에 사용되는 사이트는 Ping 및 PNG입니다 투명하고 치수가있는 휴대용 네트워크 그래픽 244 by 80 안녕하세요, 여기이 사진을 배경에 넣어 봅시다 CSS로 이것을 할 것이고 그 그림은 BK dot JPEG라고 불렀다

그래서 나는 그렇지 않다 전신 뒤에 붙여 놓을거야 여기 배경과 이미지이기 때문에 URL을 지정해야 URL이되고 일부는 열어야합니다 일반 괄호 안의 이미지는 이미 루트 폴더 안에 인덱스와 동일한 폴더가 있으므로 이미 있음을 알 수 있습니다 그래서 나는 그것을 단지 클릭 할 수있다

그리고 그것은 우리를 위해 그것을 거기에서 이제는 훌륭하게 할 것이다 배경 이미지 나는 모든 것을 커버하고 싶다 한숨을 쉬게하는 한숨을 구해서 지금 당장 무엇을 할 수 있는지 보자 나는 그 이미지가이 모든 것 뒤에 있어야한다는 것을 새롭게한다 거기서 우리는 간다 나는 그렇지 않다

우리 카운트 다운이 실제로 거기에 있음을 당신이 볼 수 있는지 안다면 분명히 우리는 색깔을 바꾸고 이것을 사람들에게 가져다 줄 무언가를하고 싶다 그것을 볼 수 있습니다 그래서 우리가 할 수있는 것을 보도록하겠습니다 지금 내가 할 수있는 일은 지금 여기서 타이머를 꺼내서이 바닥에서 벗어 버려라 여기에서 div를 최상위로두면 텍스트와 카운트 다운 데모가 모두 내부에 있습니다

타이머 테크 센터라고 불리는이 일은 텍스트 라이트 클래스를 제공 할 것입니다 다른 부트 스트랩 클래스가 작동하지 않을 수도 있습니다 이 흰색은 모두 함께하고 그게 무슨 일을하는지 보자 그러면 아마 나는 그것을 목표로하고 싶습니다 거기에 어떤 종류의 패딩을 넣어서 페이지는 우리가 잘 간 사이트에 다시 ctrl을 저장하자

흰색이므로 좋은 출발점입니다 여기를 보면 약간의 부분이 있습니다 메인이라고 불렀어이 아를 감쌀거야 나는 이것을 실제 섹션 태그에 넣을거야

그래서 이것을 내려 놓고 섹션과 내가 갈 섹션을 당겨 봅시다 신분증을주세요 또는 신분증에 신분증을 줘야합니다 그런 식으로 우리가가는 모든 일은 다른 작은 컨테이너 및 일종의 전체 너비 div 및 나 왜 그런지 모르겠다 그들은 메인을 사용했는데 괜찮습니다

조금만 더 가면됩니다 공간이 너무 깔끔 해져서 이제는 우리 내부에 타이머가 모두 들어 있습니다 콘테이너 인 메인이라고하는 것, 그리고 그것은 또한 섹션이라고 불린다 꼭대기에서 나는 그 부분을 채우고 아래로 밀어 넣을거야 페이지의 중앙에 더 많이 넣고 왼쪽에 약간의 여백을 주면됩니다

바로 여기에서 우리는 그것을 목표로 삼을 수 있습니다 어쩌면 더 어두운 배경을 주면 조금 더 두드러지게 보일 것입니다 그 ctrl을 저장했는지 확인하십시오 변경 사항이 보이지 않는 사이트에 다시 저장하십시오 지금은하지만 만약 내가 여기에 구글 크롬을 사용하고 있으므로 f12를 치면 가져올 수 있습니다

여기에 inspector 개발자 도구 검사원을 추가하십시오 section ID top 여기를 보자 약간의 패딩을 사용하자 백분율로 다양한 크기의 동일한 패딩을 제공합니다 스크린은 첫 번째 패딩을 시도해 봅니다

숫자가 맨 위와 맨 아래에있는 것처럼 번호가 너무 많으므로 15 % 정도 시도해보십시오 우리는 분명히 그것에 대해 서서 약간의 배경을 제공해야합니다 그곳에 불꽃이 생기면 잠시 그만두면 모양이 어떨까요? 전체 화면 및 왼쪽 및 오른쪽으로 조금씩 왼쪽 및 오른쪽으로 줄 것입니다 10 % 남았습니다 15시에 남겨두면 바로 15 %가됩니다

이 모든 것을 개별적으로 타겟팅하고 싶으므로 10 %를 주자 화면이 작아서 조금 아래로 내려 가면 실제로 중앙 집중식입니다 현명한 결정이 나올 겁니다 그래서 이걸 복사 해 봅시다 top의 ID 인 섹션은 이제 우리의 CSS로 되돌아갑니다

데모와 같은 ID이기 때문에 플래시 태그를 ID로 사용해야합니다 그 중 일부를 열어서 중괄호를 닫고 우리가 Chrome 브라우저에서 복사 한 것입니다 줄을 서서 그 사이트로 돌아가서 우리가 지금 무엇을 가지고 있는지 보자 괜찮아하지만 불꽃 놀이 때문에 아무 것도 읽을 수 없어

너무 많은 경례는 그것을 뒤로 조금 검은 색으로 볼 수 없다 작은 검은 색 다시 오른쪽 그렇게 목표로하자 다시 우리의 검사기를 사용하자 실제로 CSS를 작성하기 전에 여기서 실제로하고 싶은 것을보기 위해 여기에 크롬 관리자에 대한 좋은 점입니다 그래서 그냥 마우스 오른쪽 버튼으로 클릭하자 우리가 원하는 섹션을 여기에서 얻으려면 우리가 원하는 섹션이 여기의 타이머라고 생각합니다 이봐, 그게 타이머 수업 이니깐 배경 나는 당신이 생각하는 것을 보자

물론 검은 색이어서 너무 검은 색이어서 좋아하지 않을 것입니다 걱정하지 마시고 좌우로 패딩을 해봅시다 이미 벌어지고있는 너비가있어 위쪽과 아래쪽에 100 개의 픽을 놓자 옆면은 우리가 이것을 나중에 크기를 재조정 할 경우에 대비하여 C 패딩 첫 번째 맨위 그리고 바닥 그래서 그것은 100 픽이라고 아마 그걸 할거야

그리고 나는 왼쪽과 오른쪽을 넣을거야 아마 너는하지 않을거야 그것이 H를 찍는 것 그래서 분명히 계속되고있는 범위를 가지고 있기 때문에 여기에서 무엇이라도 본다 부츠 첫 번째 것들 맨 위와 두 번째 것들 왼쪽과 오른쪽 당신은 그들 모두를 할 수 있습니다 당신이 원한다면 개별적으로 오른쪽 상단 왼쪽 하단에 나는 그 순간에이 두 가지를 사용할 것입니다

그래서 저는 그것에 상당히 만족합니다 분명히 나는 ​​그것을 흑인처럼 원하지 않는다 내가 할 일은 내가 할 일이다 거기에있는 그 작은 검은 색 사각형을 클릭하고 그것을 불투명하게하십시오 두 번째 작은 슬라이더는 여기에 너무 많아지기를 원하기 때문에 furless로 읽을 수 있습니다

나는 그 중 일부를 복사하거나 그것을 할 필요가 없습니다 거기에 그것을해야합니다 이제 우리는 이걸 복사하고 추가하겠습니다 우리 타이머 클래스에 트롤 어서 가자 타이머가있어

우리는 없어 타이머 그래서 그것은 클래스 그래서 그것은 해시 태그 될 unalloyed 전자의 점이야 그것은 수업이고 그것은 타이머입니다 그래서 우리가 여기서 내려다 보면 우리는 거기에 깊이가 열려있는 타이머의 클래스와 중괄호 조금 닫습니다 공간 및 붙여 넣기 우리가 방금 거기에서 우리의 브라우저에서 복사 한 그냥 다시 깔끔하게 다시 사이트로 안전하게 보내면 아무 것도 바뀌지 않아요 괜찮습니까? 어쩌면 너무 어둡기 때문에 모든 것이 잘 보이므로 상단에 조금 더 적은 패딩뿐만 아니라 우리가 여기에 무슨 일이 일어나는지 보자

그리고 시도에 대한 15 %를 클릭하십시오 Tim이 충분하지 않다고 말한 것에 대해 아마 나는 그것을 좋아하지 않습니다 스타일 시트를 다시 괄호로 가져 가면 15 % 였으므로 10과 10을 사용할 수 있습니다 나는 지금하고 싶은 일을 잘하고있다 여기에 넣으려는 텍스트를 넣으려고합니다

제품 출시 또는 페이지 출시 또는 내가 쓴 글에 대해 뭔가를 가지고있다 약간의 텍스트 여기에 넣으십시오 대괄호로 돌아가십시오 아래로 스크롤하십시오 여기에 우리를 위해 넣은 텍스트가 있습니다

그래서 우리는 다음과 같은 제목을 넣을 것입니다 정말 오리지날 무언가 얼마나 독창적 인 지 그리고 내가 무엇이든간에 날짜를 넣어 보자 환상적인 무언가가 나오고 있습니다 물론 그들은 작은 BR을 보았습니다 그냥 그 후에 아무것도 의미하는 휴식 시간이 이것 아래 줄에 그래서 나는 그것을 움켜 잡았다

저기서 그 태그를 잘라내지 않도록해라 다른 줄 바꿈 이제 연락 번호에 이메일을 넣을거야 알았어 우리가 그 작은 영역을 확장했을 법한 것을 보아라 여기에 어두운 영역은 텍스트가 많아서 좋습니다

좋아요 좋지 않습니다 지금까지 지나치다는 사실은 아마도 더 많은 패딩을주고 싶을 것입니다 여기서 조금만 해보 죠 다시 우리의 괄호로 돌아가서 우리 타이머 안에 다시있다

그래서 우리가 조금이라도 그 패닝을 바꿀 수 있는지 보자 크롬은 우리가 그 돼지를 20 마리의 돼지로 바꿀 수 있는지 보자 그래서 나는 그것이 단지 20 마리라고 생각한다 사진은 거기에서 우리는 그 100의 사진을 만들 수 있었고, 무엇이 일어나는 지 알 수있다 오른쪽 클릭 검사가이 검사기를 당겨서 너무 많이 할지라도 우리는 지금 내가 볼 수있는 P 클래스에 실제 싶지 않아요 나는 몇시에 거기에 있고 싶다 거기 그것은 아마 그것 같이 조금 더 인 50의 예에 저것을 바꾸게한다 그러나 너무 많이 생각하지 않아요

만약 우리가 그것을 100에 넣으면 우리는 아마 너무 많이있을 것입니다 나는 50 세가 더 좋다 네가 분명히 너를 가질 수 있다고 생각해 그것을 원해 그래서 나는 우리가 그곳에 갔을 때마다 그걸 50으로 바꾼다 왼쪽과 오른쪽 패닝 그 선을 저장 나는 검사관이 빠르게 새로 고침 환상적이 지금 우리가 필요로하지 않는이 끔찍한 술집을 없애자

이 물건 들아 보자 우리가 낮잠을 자려고 아무 것도 없어서 내가해야할 일이있다 브랜드 거기에 내가 가지고있는 것들에 대한 링크이기 때문에 여기에 어떤 것도 원하지 않는다 아무데도 내가 연결하고 기억하기를 원한다 너는 그걸 취소하고 너가 어디 있지 않으면 그 끝을 알아 내도록 시켰어? 상단의 하나를 클릭하면 하단의 하나가 강조 표시되고 저기서 모든 것을 지우고 그걸 지우 겠어

그녀가 옳은 햄버거 메뉴 버튼이기 때문에 1 분 안에 거기서 우리는 그 중 어떤 것도 필요로하지 않습니다 그 검시 관을 다시 당기면 이걸 다시 사이트에 저장하십시오 여기에 반응 형 토글러가 있으면 메뉴 링크가 사라집니다 나는 구원을 얻지도 못했고, 그들이 사라질 때 당신은이 작은 것을 얻습니다 거기에 햄버거 메뉴가 있습니다

우리가 링크하지 않기 때문에 다시 필요하지 않습니다 어디서나 잘 지내면 어디든 가질 수 있지만 필요가 없습니다 여기서 벗어나서 그 작은 단추를 없애 버리면 그냥 깔끔하게 지울 수 있습니다 거기에 공간을 ctrl 다시 사이트에 저장 괜찮아 그 모든 검색 바가 사라졌습니다 지금 내가하고 싶은 것은 투명하고 이걸 꼭대기까지 올리고 거기에 내 로고가있어

그래서 봐봐 내가 배경의 강아지라고 생각해 지금 상자는 n / bar 어두운 배경으로 바로 거기에서 우리는 배경색으로 가고 그래서 투명하게 바꿔서 이제 사라졌어 굉장한 것은 내가 원했던 것입니다 그래서 CSS를 복사해서 CSS를 복사 해 봅시다

마지막 항목은 당신을위한 외부 스타일 시트는 괜찮습니다 저는 이것을 이것을 위해 사용하게되어 기쁩니다 우리가 Wharton 수업에서 사용하지 않아도 놀랍지는 않다 그것에 관해서는 괜찮아요 다시 가져 가겠습니다

괜찮아요 그래, 그렇게 생각 했어 돌아와서 중요한 일을 강요하자 수업은 꼭 그렇게 할 필요는 없지만 이것을 사용하고 싶지는 않습니다 우리가 그걸 알아서 기쁘게 생각한 적은 있지만 다시 환상적으로 사라졌습니다

조금 더 페이지가 곧 좋아 보인다 좋아요 그냥 로고를 조금 넣어주세요 이제 로고가 조금 나옵니다 그냥 로고라고 불리는데 PNG PNG 파일이고 루트 폴더에 있습니다

내 색인과 함께 거기에저기서 한 권을 없애자 그것은 당신이 당신이 할 수있는 텍스트를 바꾸고 싶다면 분명히 거기에 약간의 텍스트입니다 그것을 사용하지만 거기에 이미지를 넣으려는 건 괜찮아요 그래서 저는 그냥 열어 볼게요 tag right image IMG 나는 그것에게 SRC가 어디에 있는지를 알려주는 소스를 주어야한다

그리고 여기에 몇 가지 거꾸로 표시된 쉼표 안에는 다시 위안이됩니다 이미 들어있는 것을 나에게 보여 줬다 그렇지 않다면 로고 판을 선택하겠다 당신을 위해 그것을 수동으로 입력하고 모든 이미지를 입력하십시오 정말로 alt 태그를 가지고 있습니다

이 태그는 단지 그것을 읽을 것입니다 SEO 목적뿐만 아니라 거기에 로고를 넣는 것만으로도 사용할 수 있습니다 위치 또는 키워드 또는 거기에있는 것이 있다면 저장하십시오 그리고 그 위에 마우스를 가져 가면 부팅 스트랩에서 저장됩니다 사이트가 방금 만들었던 로고가 꽤 자리를 잡았습니다

우리의 카운트 다운은 일부 제목이나 밑줄 제목을 넣을 것입니다 그들이 Dave의 클래스 나 클래스를 제공하도록하자 그리고 그것은 우리가 그것이 일 etc이기 때문에 우리가 일 YA를 가지고 있기 때문에 우리가 그것을 얻는 곳이다 및 시간 분 및 초 알았어 그게 어떻게 보이는지 보자 나는 그들이 너무 가깝다고 생각해

다른 사람들이 그들을 구해 보자 네, 괜찮아요 그래서 그 사람들이 끔찍한 모습으로 퍼져 나가길 바래요 더 많이 나는 그들이 거기에 중앙 집중 될 필요가 없다는 것을 의미하지만 나는주고 싶다 아이디어는 일 시간 등등이다

그래서 우리가 이것으로했던 것과 똑같은 일을하고 단어 간격을주고 보자 내가 수업을하는 날이 며칠이 지나면 P에 그냥주고 싶지 않아 왜냐하면 내가 P에게 줄 경우, 이것과 다른 어떤 단락에도 적용될 것이기 때문이다 우리가 진행하고있는 텍스트 그래서 클래스는 일 클래스입니다 중괄호와 나는 그것에게 약간의 단어 간격을주고 싶다

그러나 아마 나는 사용할 것이다 내가 사용하는 것과 정확히 똑같습니다 그래서 이것을 복사해서 거기에 넣으십시오 제어가 발생하고 사이트 새로 고침으로 돌아갑니다 거기에 우리가 그 스트레치 나가 조금 더 나는 그것이 조금 생각합니다

좀더 명백한 것이 더 좋을지라도 그래서 그것은 우리가 60 대면에 직면 해가는 것을 보았습니다 그것을 클릭하십시오 마우스 휠을 굴려서 늘릴 수 있습니다 내 말은 우리가 개별적으로 할 수 있고 이메일을 통해 패딩을 할 수 있다는 것입니다 토성과 전에는 백 개라고 부르 자

우리는 그것을 바꿀 수도 있습니다 그래서 우리 일로 돌아가서 변화 시키십시오 천이 아니라 천 정도가 될 것입니다 너무 귀여울 것입니다 그만큼 저것을 제외하고 위치에 돌아가십시오 저 경비원을 우리 거기 거기 얻으 십시요 가서 페이지가 곧 다가올 것 같아

여기 어떻게 반응하는 지 보자 내 검사원을 다시 데려 오자 긍정적 인 생각을 해봅시다 안녕하세요 여기에 몇 가지 문제가 있습니다

볼 수 있습니다 안녕하세요 괜찮아요 괜찮아요 괜찮아요 괜찮아요 괜찮아요 괜찮아요 괜찮아요 오케이 좋아요 그래서 우리는 그것이 몇시와 몇 분이라고 말하는지 보게됩니다 우리가 793의 drona에 도착할 때 부서지기 시작한다 긍정 7 개의 9 개의 4 그래서 여기 모두 보자

나는 8시 22 분에 그와 비슷한 것을 넣을 것이다 미디어 쿼리 쿼리에서 우리가 취할 수있는 방향이 어디인지를 알려줍니다 당신의 말은 양쪽을 향하고 있으므로 미디어 질의에 25를 당신이 넣은 바로 그 쿼리 브라우저에 특정 픽셀 너비를 알려줍니다 그건 그리고 우리가 말하는 어떤 것을하기 위해 원하는 특정 화면 크기 8시 25 분 나는 바로 8시 25 분에 다음 주에 8시 25 분 오 825 픽셀 우리는 우리가 원하는 것을 어떤 일이 일어나길 원한다 – 옷을 잘 열어 라

그리고 여기에 중괄호가 생기고 여기에 우리는 정규 CSS를 넣을 수 있습니다 거기서 일어날 때 그 일에 영향을 미치므로 나는 그 날을 원하고 싶다 단어가 매트에 직면하면 작아집니다 우리의 데모에서는 모든 단어가 그 글꼴 크기보다 작아 보였다 지금 나는 그 순간을 그대로 유지할 수 있다고 생각한다

30 소변을 보자 구해줘 나는 그걸 없앨거야 나는 생각하지 않아 그 순간에 원하는 것을 넣을 필요가있는 것들을 바꾸고 싶습니다 컨트롤을 변경하여 사이트 새로 고침을하면 지금 아무것도 보이지 않지만 그것들 사이의 간격이 아래로 내려갈 때 아래로 내려 가야한다

우리가 825에 도달 할 때 거기로 간다 이 숫자들과 또한 여기에있는이 텍스트들 사이에 우리는 그것이 모두 좋음을 간다 저기서 너무 많이 다시 부서 졌어 또한 내가 여기에서 왼쪽과 오른쪽을 채울 수있는 것은 무엇입니까? 그것도 내려 받아서 글꼴 크기를 내려 받아서 데모를 할 수도 있습니다 글꼴 크기를 그 글꼴 크기로 조금 줄이거 나 작게 만들자

64 55 내가 왜 해야할지 모르겠다 그리고 또한 여기에 약간의 패딩이있다 패딩을 완전히 왼쪽에서 오른쪽으로 가져 가도록하자 아래 왼쪽 및 오른쪽 걸릴 그 제로 일을 지금 우리가 뭘 찾았는지 보자 우리는 아무것도 새로 고치지 않는다

젠장하고 거기에 네가 크롤 링을 시작 예 825 우리는 그들이 아직도 패딩 시작 우리는 여전히 괜찮아요 멀리 보니 다시는 절대로 불이 꺼져서 보지 못했습니다 선택을 취소하십시오 그렇지 않다 있다 권리 그래서 나는 컨테이너의 최대 폭을 st로 지정할 수 있습니다

540 그 특별한 브레이크 포인트 우리는 사다리 위로 올라갔습니다 오, 그건 분 너비 괜찮아 그래서 그냥 시도 해보자 그 말을 삭제하자 90 % 95 % 여보 8 % 그게 많아, 조금이라도 그래, 그래, 98 %로 말할거야 825 미만으로하십시오 그러면 다른 미디어 쿼리를 넣지 않아도됩니다 이것들을 줄을 서서 계속 지켜라

실제 사이트를 신선하게 말하면 안된다 바뀌었고, 잘 보았습니다 우리는 825 개의 구역을 포함하고 있습니다 우리는 거기서 더 적게 우리가 더 많이 줄일 수 있음을 의미한다 그것들을 너무 멋지게 다시 쪼다

– 왜 30 분이가 될 때까지 기다려야 할까? 두 배 수치는 여전히 괜찮아 그래서 5시 30 분이라고 부르 자 5시 30 분에 미디어 질의와 그게 지금해야 할 일이야 그리고 우리는 그것이 분명히 당신이 어떤 매체에 넣을 수 있겠습니까? 네가 원하는 질의 나는 이걸하고있어 난 그저 약간 간격을두고 주스 먹을거야

거기에 비트가 지금은 같은 것을 떠날 것이지만 나는 글꼴을 가져갈 것입니다 크기가 35 픽셀 36이라고 말하는 것은 왜 더 좋은 숫자인지 알 수없는 이유는 무엇입니까 나는 그에게 똑같은 것을 맡길 것이다 용기의 전체 너비에 영향을 미치지 않는 것 같다 괜찮아요 그래서 저는 그 두 가지가 필요하지 않습니다

항상 두 개의 Curly 's가 있는지 확인하려는 미디어 쿼리 하나는 반경이 포함 된 화면이고 하나는 반경 스크린이므로 전에는 CSS가 무엇이든지 넣으려고합니다 괜찮아 아래로 수축 계속 잘 지내다 잘 바뀌 었습니다 그것은 우리가 경고 한 좋은 사촌입니다 아마 그 사이에 그 희망이 담긴 단어들 사이에 그것들은 그 15 명을 다른 10 명과 너무 가까워서 시도해 봅시다

이것들은 또한 10 번째가 너무 가깝게 될 수도 있습니다 글꼴 크기를 32 줄이면 지금 무슨 일이 일어나는지 보자 346 년과 전쟁이 끝날 때까지 깨지 말라 젠체하는 사람이 아마 우리가 여기에 무슨 패딩을 가지고 있는지를 완화할까요? 우리가 그것을 훨씬 더 호흡하게하는 10 마리의 돼지에게 가져 가면 네 공간도 그렇기 때문에 나는 그것을 완전히 줄여야 할 것이다

나는 그렇지 않다 더 이상 작아지지 않는 전화를 만드는 지 알아라 그래서 우리가 iPhone에서 시도해 보도록한다면 우리 아이폰 6 7 8 또는 아이폰 5를 보자 좋아, 아이폰 6 7 8보다 작아지지는 않을거야 iPad는 그것을 잘 만들 수있게 만들었습니다

그래도 그 패딩을 가져 가야했습니다 아래로 네, 네가 바꿀지도 모른다 네, 괜찮아요 그래서 괜찮아요 더 작은 미디어 침대에서 타이머의 패딩을 변경하는 방법 우린 끝났어 그 색깔을 필요로하지 않는 사본은 같은 것을 지탱하는 원인을 넣을거야

여기서는 작은 미디어 쿼리를 적용하여 나처럼 색상이 필요하지 않습니다 우리가 10 가지로 바꾸겠다 그런 종류의 60 가지를 바꾸자 뭔가 신선한 것을 다시 사이트에 저장하고 우리의 반응을 높이자 다시 f12 이제 우리는 그 백퍼센트 아래로 우리가 보자

그것은 300 번 반복해서 반응합니다 괜찮습니다 약 254 아이폰에서 그걸보고있다 크기가 맞다 거기에 우리가 작동하는 것 같습니다 좋아, 그래서이 일을 온라인에서하기 때문에 우리가 온라인으로 업로드 할거야

나는 내 서버로 가서 디렉토리를 만들고 업로드 할 것이다 그걸 디렉토리에 넣어두면 좋을거야 여기에 우리 사이트가 있으며, 여기에 우리의 폴더가 있습니다 우리가 가지고있는 유일한 파일입니다 우리는 index

html 로고를 가지고 있으며 사진의 이미지를 가지고 있습니다 거기서 나는 이걸 내 온라인 서버에 올리면된다 부트 스트랩으로 워드 프레스처럼 아무것도 설치하지 않아도됩니다 하위 도메인에 설치하겠습니다 Free F Deep 인 FileZilla를 사용하고 있습니다

FTP 클라이언트 당신은 그것을 다운로드 할 수 있습니다 당신이 원한다면 내가 여기 아래에 링크를 넣어주지 이 파일을 왼쪽에 사용하면 내 컴퓨터와 내 컴퓨터에서 내 카운트 다운 폴더로 이동했습니다 이 세 파일을 여기에 파일로 만들고 내 서버에 디렉토리를 만들었습니다 여기에 수백 개의 사이트가 있으므로 방금 서브 도메인을 만들었습니다 하나의 통신이나 도메인 당신은 아마 당신의 아마 공공 HTML 루트에 갈거야 당신의 공급자와 확인해보십시오

그러나 그것은 정말로 쉽습니다 이 3 개의 파일을 선택하십시오 사이트는 온라인에서 라이브 상태 여야합니다 우리가 살지 않는 사이트가 있습니다 여기에있는 웹 사이트로 가보겠습니다

하위 도메인입니다 그래서 나는 단지 앞으로 슬래시 가서 그것은 카운트 다운이라고 불렀다 그것은 안타 입력 아니에요 거기에 그것은 우리 사이트가 인터넷에 살고있다 그래서 부트 스트랩과 히트로 곧 나오는 페이지를 만드는 것이 얼마나 쉬운 지 알 수 있습니다 절대적으로 굉장합니다 당신이 구독 해 주시기 바랍니다

채널에 관심을 갖고 비디오를 공유하고 관심있는 비디오를 공유하십시오 웹 개발에서 아래의 과정 중 하나를 선택하십시오 우리의 YouTube 가입자를위한 할인 또한 훌륭한 무료 코스가 있습니다 이제 다시 한 번보세요 이것은 시스템 22와 웹 디자인의 제이미였습니다

기술 팁에서 시청을위한 감사의 좋은 하루 되세요

Bootstrap 4 Auto Layout Columns with Bootstrap 4 and Brackets Text Editor

안녕 얘들 아,이 부트 스트랩에 오신 것을 환영합니다 4 열 자습서 이것은 제이미에서입니다 시스템 22와 웹 디자이너의 기술 팁이 우리가 열 간격 클래스 및 배열을위한 훌륭한 새로운 부트 스트랩 탐색 새로운 부트 스트랩을 가진 클래스들 4 우리는 새로운 자동 레이아웃 열은 기본적으로 사용자가 호출하고 일반적으로 호출합니다 왼쪽으로 정렬하지만 처음부터 정렬 할 수 있습니다

어떤 정렬 작업을하지 않고도 가운데 정렬 할 수 있습니다 정렬 할 수 있습니다 마지막에 여러 열이있는 경우에도 동일한 공간을 넣을 수 있습니다 그 (것)들의 사이에서 당신은 그 (것)들의 주위에 동등한 공간을 둘 수있다 여러 열을 중간 또는 끝으로 정렬 할 수 있습니다

시작과 그것이 정말로 물론 당신을 위해 쉽게 만들었습니다 한 열이 있고 오프셋을 원한다면 오프셋 클래스는 여전히 작동합니다 세 분은 여전히 ​​그것을 사용할 수 있지만 할 필요없이 그렇게 많이 할 수 있습니다 오프셋 클래스 중 하나를 탐색하여 코드를 조금만 들여 보자 여기에 무료 브래킷 코드를 사용하고 있습니다

누군가가 필요하면 아래 링크를 클릭하겠습니다 그것을 사용하는 것이 좋습니다 것이 좋습니다 정말 지금은 플러스 물론 무료입니다 좋습니다 그래서 부트 스트랩 열 (bootstrap columns) 때문에 한 섹션에 작은 열이 있습니다 우리가 설명하기 전에 12 개를 작성했습니다 그 중 12 개가 전체 스팬을 구성합니다

당신은 그것의 칼럼을했습니다 B 6 etc 4 3 될 것입니다 3 4 것입니다 나는 혼란스러워지기 시작하는 사촌을 닫을 것이다 그러나 나는 너를 확신한다 우리가가는이 작은 단일 칼럼을 작업 할거야 이해해

여기에 여기에 있습니다 그래서 나는 단지 몇 번 이상을 복사 할 것입니다 내가 생각하는 시간과 내가 할 일을 아래에 약간의 공간을 두겠습니다 little spacer classer 나는 여기에 CSS로 만들었다 우리가 할 수 있도록 아래에 그것을 조금 더 돋보이게 만들고 그 것을 사이트로 되돌려 놓을 것입니다

이제 내가 새로 고침 할 때 거기에 세 개의 작은 기둥이 있어야한다 그 사이에 약간의 공간이있어서 우리가하는 일을 볼 수 있습니다 여기 오른쪽에 세 개의 단일 열이 있습니다 이제 우리는 초기에 그것들을 정당화 할 수 있습니다 그래서 우리는 디폴트가 아닙니다

실제로 우리가 중간에 넣을 수있는 모든 것을해야한다 너는 내가 실제로 그것들을 정당화했다는 것을 알았다 콘텐츠 시작은 기본입니다 나는 그걸 멀리 가져 가야만 여전히 거기에있을 것입니다 우리가 간다면 이제 요점을 증명하기 위해 그냥 해보 죠

사이트로 돌아가서 새로 고침하면 사이트가 그대로 유지됩니다 이것이 왼쪽에 맞추는 기본값입니다 중간에 나는 그걸 다시 거기에 붙여 넣을거야 센터에 지금 시작하자 내가 다시 불러올 때, 이제 다시 구할 것이다

여기 중간에 나타나 우리가 간다 오프셋을 수행하거나 일종의 자동 여백을 만들기 전에 우리가 우리가 그것을 할 수 있다면 우리가 그것을 원한다면 그렇게 쉽게 그리고 물론 만들 수 있습니다 콘텐츠를 다시 정당화하고 저장을 클릭하여 사이트로 돌아갑니다 바로 거기에서 꽤 멋지다 그러나 그것은 한단계 올라간다

그리고 당신은 가지지 않고있다 이와 비슷한 크기의 열을 사용하려면 열은 그 중간을 특별한 이유없이 a3라고 말하게합니다 당신 우리는 바로 여기에서 일하고 있습니다 그래서 중간의 것들이 3 개라고 생각합니다 더 나은 것을 3 2 3으로 바꾼다

매우 혼란 스럽지만 여기서 우리는 너는 가운데에 3 개, 왼쪽에 1 개씩 열이있다 지금 당장 우리는 더 많은 단계의 가중치를 취할 수 있습니다 여기 사이의 내용으로 모든 열 사이에 균등 한 공간이 생깁니다 해당 컨트롤을 저장하고 내가 사이트를 새로 고칠 때 사이트로 돌아갑니다 이 모든 열 사이의 공백은 더 이상 정당화되지 않습니다

그들은 잘 할거야 그들은 거기에 걸쳐 전체적으로 똑같이 퍼질거야 그래서 우리는 거기에 새로 고침하자 그래서 평등 한 공간을 두자 이 3 개의 기둥 사이에서 나는 당신이 가지고있는 경우에 그것이 중요하지 않다는 것을 밝힌다 어디서든 다른 크기의 기둥을 사용하면 별 차이가 없습니다 시원한하지만 당신은 또한 그것을 할 수 있도록 각 주위에 동일한 간격을 가지고있어 당신이 정당화 할 때 Photoshop에있는 것처럼 정당화 될 것입니다

센터들 나는 그걸 할거야 그래서 우리가 그 둘을 바꾸면 그 사이트가 바로 내가 지금 새로 고침 할 때 끝 부분에 있지 않을 것이라고 말합니다 그곳에는 평범한 사람들이있을 것입니다하지만 주변에 평등 한 공간이 있습니다 그건 나에게 아주 멋지다

너와 그것은 얼마나 많은 칼럼이든 상관 없다 너는 계속하고있어 그것은 똑같은 일을 할 것입니다 그래서 그것을 바꾸어 보겠습니다 다른 크기의 열이 있고 거기에서 무슨 일이 일어나는 지 봅시다

네가 칼럼 옵셋으로이 일을해야한다고 말했듯이 마진 또는 패닝이 이제는 클래스를위한 새로운 부트 스트랩으로 인해 우리는 똑같은 일을했습니다 같은 양의 공간을 두었습니다 각 콘텐츠 간 시작 사이에 콘텐츠가 정당화됩니다 내가 그 사이에 그걸 바꾸면 그 페이지가 또 다시 내가 그걸 ctrl로 저장하고 싶어 그 사이트에 다시 지금이 두 사람은이 끝에있을 것입니다 그렇게 차가운 방법은 중간입니다

감사합니다 위대한 일을 내가 bootstrap 앞으로 그냥 계속 또는 말을처럼 부트 스트랩 자체가 점점 더 좋아지고 있습니다 항상 사용하고 있습니다 전자 상거래 상점이나 블로그를 구축하지 않으면 부트 스트랩으로 실행됩니다 매 순간마다 너무 쉽고 빠른 로딩이기 때문에 매번 그것으로 일하는 것을 즐긴다

그래서 우리는 당신이 할 수있는 것에 대한 간략한 요약을하고있다 부트 스트랩과 함께 새로운 자동 레이아웃 단점과 함께 당신이 그것을 발견했기를 바란다 유용하다면 공유하고 채널에 가입하십시오 웹 개발에 관심이 있으시면 아래의 과정 중 하나를 선택하십시오 우리의 YouTube 가입자를위한 할인 또한 훌륭한 무료 코스가 있습니다

거기서 다시 한번 확인해보십시오 시스템 22의 Janie와 웹 디자이너 테크 팁 통신 감사는 좋은 하루 되세요

Bootstrap 4 Add a Portfolio Filter

안녕 얘들 아,이 부트 스트랩 4 비디오에 오신 것을 환영합니다 시스템 22의 Jamie입니다

웹 디자이너 기술 팁 잘 누군가가 나에게 물었다 부트 스트랩 4 사이트에 필터링 가능한 포트폴리오를 추가하는 방법을 보여줍니다 꽤 쉽게 우리는 JavaScript 또는 나는 쉬운 방법을 사용할거야 내가 미리 쓰는 몇 가지 방법을 사용할거야 이렇게 괄호 텍스트 편집기를 열어 보겠습니다

자유 텍스트 편집기입니다 아래에 다운로드 링크를 넣으면됩니다 새 부트 스트랩 템플릿을 열면 새로운 부트 스트랩 템플릿이 만들어집니다 나를 위해 템플릿에 대한 일반적인 부트 스트랩 지금은 이런 일이있어 확장 기능을 사용했기 때문에 정말 쉽습니다 그리고 다시 괄호로 둘러싼 이러한 모든 확장은 절대적으로 무료입니다

그것은 템플릿을 시작하는 부트 스트랩이므로 파일 확장 관리자를 사용하는 경우 이걸 가지고 있지 않으면 부트 스트랩을 시작하십시오 거기 템플릿 거기 내 바로 이미 설치되어 있지만 당신은 할 수 있습니다 그냥 그 설치 버튼을 누르면 그것은 당신을 위해 그것을 설치하고 다시 모든 내가 사용하는 플러그인은 절대적으로 무료이며 거기에 알림이 있습니다 업데이트 또는 광산이있는 것처럼 보입니다 그래서 계속 진행할 것입니다

그 좋아요, 어쨌든 지금은 필요 없지만 다음에 다시로드하면됩니다 나를 위해 좋아, 내가 말하는 것처럼 대괄호는 무료이며 여기에서 사용하는 모든 확장 기능은 무료입니다 우리의 템플릿을 저장하여 저장하겠습니다 내 프로젝트에 필터라는 작은 폴더를 만들었습니다 당신은 그것을 점 HTML로 저장해야합니다

저는 광산 필터 점 HTML을 호출 할 것입니다 어떤 파일 유형인지 알고 있으며 저장하려고합니다 우리가 그 폴더에 가면 거기로 간다 우리가 방금 만든 파일은 두 번 클릭하면 열어 보겠습니다 이제 기본 브라우저에서 Chrome을 사용하고 있는데 내 다른 모니터에서 엽니 다

이 데모를 위해 Chrome을 사용하고 있습니다 f12 키를 누르면 개발자 도구로 주로 사용됩니다 개발자 도구와 나는 여기서 HTML과 나의 CSS를 편집한다 나는 오늘 그것을 사용할 것입니다 그러나 그것이 제가 크롬을 사용하는 이유입니다

기본 템플릿이별로 많지 않습니다 상단에 약간의 탐색 바가 있습니다 텍스트를 지금 우리가 할 일을 만들기 위해 이 비디오에서 정말 쉽습니다 boot snip이라는 사이트에 다시 갈 것입니다 이 링크를 사용하고자하는 사람들을 위해 비디오 아래에이 링크를 놓습니다

이 작은 foo 필터링 가능한 포트폴리오 갤러리를 만들었으니 여기 사실 우리가하지 않을 각 스크립트에서 바로 뛰어 와야하지 않을거야 HTML이나 CSS를 작성해야한다 물론 CSS를 사용자 정의하고 HTML의 일부 비트를 사용자 정의하려고합니다 자신의 사이트에 대한 귀하의 이미지를 위해 우리는 지금 미리보기 모드에 있습니다 여기에 HTML로 간다면 오류가 무엇인지보고 싶지만이 문제의 꼭대기에서 취하도록하겠습니다

컨테이너는 그 섹션보다 아래까지 너 거기있어 그래서 우리가 대괄호로 돌아 가면 상단에 오프닝 섹션 태그가 보이지 않았습니다 우리가 어디 있었는지 아래에서 아래로 내려가 봅시다 여기에 붙여 넣기 만하면됩니다 우리는 이것을 편집하고 싶을 것입니다

사이트로 돌아가서 이제는 CSS로 가자 이것은 아마도 우리가 원하는 스타일링이다 우리는 아마도 우리가 원하는 것을 여기에 맞추고 싶을 것이지만 그것을 가져 가자 갤러리 꼭대기에서 맨 아래까지 내가 너를 아마 생각해 ctrl + a를 눌러 똑같은 결과를 얻은 다음 ctrl + C를 모두 선택하여 복사하십시오

우리가 가지고있는 우리의 부츠 부트 스트랩 템플리트 여기에 우리는 인라인 CSS 유지가 있어요 이것이 하나의 페이지 인 외부 스타일 시트가 있습니다 페이지에 그대로 두겠습니다 지금이 스타일을 CSS에 붙여 넣었습니다 스타일 태그 안에 있습니다

페이지의 상단에 나는 이걸 좀 깔끔하게 정리할거야 그것을 선택하고 내 탭 키를 치면 CSS의 나머지 부분과 일치하게됩니다 예, Ctrl 키를 치면 작은 녀석을 알 수 있습니다 의지 저기서 사라져서 우리가 가버 리면 언제든지 저것을 볼거야 거기에 점으로 표시되면 저장되지 않은 변경 사항이 있음을 의미합니다

좋아요, 그래서 우리는 가짜 이미지 사이트에서 그려 넣은 이미지를 얻었습니다 여기에 몇 가지 사용자 지정 항목을 넣을 것입니다 작은 피커가 있습니다 자바 스크립트를 추가해야하므로 jst로 돌아갑니다 이 상자를 클릭하면 다시 제어 할 수 있습니다

컨트롤 C를 복사하여 현재 외부 파일에 복사하거나 그것을 안으로 당기거나 우리의 위치의 기초에 몇몇 원본 꼬리표에서 여기에서 둬 나는 이 스크립트 태그 옵션을 사용하여 그 역할을 아래쪽으로 복사했습니다 마지막 스크립트가 끝나면 스크립트 태그를 열고 닫을 것입니다 그건 뾰족한 검은 뾰족한 괄호입니다 그리고 나서 그것을 닫으십시오 태그를 닫으면 약간의 공간이 생기고 코드를 붙여 넣기 만하면됩니다

사이에 그리고 다시 나는 이것을 조금씩 정리할 것이다 그것을 선택하고 탭하기 만하면 모든 것을 탭으로 만들고 싶습니다 거기에 약간의 비트가있어서 우리는 거기에 JavaScript를 가지고 있습니다 어떤 데이터 필터에 대한 함수를 호출하는 지금은 그냥 우리의 시력 컨트롤을 저장하자 네

내가 여기 새로 고침을하면 여기에 작은 이미지가 있고 여기에 필터하다 좋아, 거기에 우리가 간다 나는 이미지를 가지고있다 거기에 표시하지만 실제로 작동하고있는 것 같습니다 그냥 디스플레이 문제를 여기에서 정리해라 나는 이것을 별도의 행에 넣을 것이라고 생각한다

여기에 우리 HTML을 연속적으로 보도록하겠습니다 알았어 저기에 행이있다 그 행의 닫는 깊이는 어디 있니? 만나다 그럼 여기에 거래를 끝내자 당신 그러나 집은 정말로 조금 움직여도 괜찮지 않을 것입니다

그래서 우리는 한 줄을 가지고 있습니다 이걸 다른 행에 넣어 보겠습니다 이 드롭 다운 하나의 붙여 넣기를 복사 할 것입니다 한 번 더 탭을 선택하고 거기에 줄 바꿈 만있는 것은 아닙니다 내가 행 결말을 여기에 놓을 필요가있어

여기 집에서 일하는 비트 모든 권리 이미지가 다른 행에 이것을 감싸고있다 나는 꽤 확신한다 이 행에 대한 div는 어쨌든 그들이 가지고 있던 원래 행에 대해 하단에 있습니다 꼭대기에 꼭대기에있는 것을 선택하면 가장 아래쪽에있는 것을 보여 주어야합니다 좋아요 빨간색 플래그가 없으므로 HTML이 잘 보입니다

그저 컨트롤을 우리 사이트로 돌아가서 다시 말해 보도록하겠습니다 그것의 자신의 행은 이제 어쨌든 그것을 가질 것이고이 이미지들은 그들의 아래에 자신의 작은 행이 있습니다 이걸 중심에두고 행을 정당화 할 수 있습니다 어떤 종류의 플렉스 박스 클래스는 저장을 위해 부트 스트랩에 추가했습니다 다시 사이트로 돌아가서 그 모든 것들을 새로 고침하자

이것은 절대적으로 작동하는 것 같습니다 괜찮아 그래서 그것의 벌거 벗은 뼈가있어 매우 흥미 롭기 때문에 당연히 나만의 이미지를 추가하고 싶습니다 들어가서 이미지 몇 개를 추가하면됩니다

일시 중지 만하면됩니다 일부 이미지를 잡다 좋아요 나는 12 개의 이미지를 만들었고 365로 365를 만들었습니다별로 중요하지 않습니다

당신은 그들이 원하는 어떤 크기로 만들 수 있습니다 그러나 나는 그것을했습니다 그리고 제가 한 것은 우리의 HTML 문서가있는 우리 폴더 안에 폴더를 만들었습니다 여기에 우리 이미지와 내부가 있습니다 12 이미지가 있습니다

바꾸기 나는 12 개 중 1 개를 호출했고 그것들은 JPEG이다 나는 그것을 대체 할 것이다 여기에서 HTML로 다시 한 번 첫 번째 작업을 수행 한 다음 잠깐 멈추게 할 것입니다 여기에 그의 이미지가 있습니다 여기에서 볼 수 있습니다

내 폴더의 이름이 이미 클릭했음을 발견했습니다 번호 하나와 거기에 내 첫 번째 이미지를 넣어 난 똑같이 할거야 이 IMG 이미지 전체에 걸쳐서 나는 잠시 멈추고 나머지를 얻는다 이것들은 당신이 거기에 앉아있는 것을 가리킨다 좋아, 이제는 모든 이미지로 변경 했어

그 컨트롤을 사이트에 다시 저장하십시오 이제 이미지가 새로 고쳐지면 여기에 있어야하므로 그 자리 표시 자들이 있습니다 오, 우리가 가서 좋아, 그래서 우리는이 색상 선택기를 가지고있다 그러나 그것은 말하고있다 파이프와 스프링클러에 관한 것이고, 내가 의미하는 바를 의미하지는 않습니다

여기에있어 그래서 내가 여기에 어떤 범주를 보자 우리는 전화 할 것 같아요 우리에게는 기술이 있거나 먹는 음식이있는 곳이 있습니다 지옥의 장소 그것들과 다른 것들은 우리 자신의 카테고리를 주자 그리고 다른 것들도 우리의 HTML로 돌아가서 우리가 원하는대로 그것을 구성하자 그래서 우리는 여기서 우리 선택기로갑니다 당신 우리가 여기 이걸보고있어

우리 모두를 떠나고 싶은 모든 것을 말하지 않고 이걸 똑딱 거리게 만들자 물론 이것은 버튼 자체 내에 나타나는 텍스트입니다 이 모든 기술을 내가 자본화되지 않게하자 그것은별로 중요하지 않지만 이것은 우리가 필터 섹션에 넣은 것입니다 그것이 우리가 음식을 다시 가지고있는 기술을 얻었을 정도로 그것을 좋아하는 것을 선택하게한다 이것은 것이다 무엇 버튼에 나타 났으므로 나는 이것을 위해 자본 F를 원한다 뭐라 구요? 당신 우리가 원하는 관개가 아니에요 만약 그들이 단지 내가 거기에서 모은 무작위 이미지들

그래서 우리는 지금 여기서 무엇을 할 것인가? 이 물건들을 잡을 실제 손잡이는 여기 그래서 그냥 기술을 복사 해 보도록하겠습니다 그리고이 숫자가 모두 무엇인지보십시오 이 이미지 1 2 3 4 5 6 그래서 우리는 하나의 이미지를 말할 것이다 너와 10 11 12 왜냐하면 12 살 정도 야 이미지 1 10 및 11은 모두 기술이므로 여기를 보시고 모든 이미지를 보겠습니다

1 2 3 4에서 완료하고 필요한 경우 마우스를 올려 놓아서 확인할 수 있습니다 거기에 하나가 내 기술로 이전 특성을 대체하고 우리가 10 뭐라고 할까? 11 명은 10 명이라고 말하면 11 명은 2 명 뿐이니까 우리가 방금 한 기술을 보자 우리가 가진 모든 음식 다섯 명 7:45 70 년대 음식 에 대한 5 명이 다시 그 값을 바꿔 놓을거야 6 7 그게 음식인지 확인해 보자 네 좋아 다음 장소는 장소 장소가 될 것입니다 그 장소가 아닌 것 같아요 그것이 어디에 있느냐를 안다 그러나 그것은 2 3 우리는 그 장소를 2 3과 12라고 부릅니다

2는 2입니다 3 및 12 나머지 카테고리가 하나만 남았습니다 낡은 가치는 내가 살 필요가있는 곳이어야한다 그리고 그것들은 그들의 오래된 것이 다른 것과 그것을 대체하게 할 기회입니다 다른 다른 괜찮아요 빨리 그것을해야합니다 Ctrl 키를 저장 우리의 사이트로 다시 가자 새로 고침 이봐 요, 내가 기술을 선택하면이 모든 컴퓨터 아이템이 있어야합니다

그건 훌륭한 음식이야 아직 모든 음식 품목을 잘 다뤄야한다 장소들과 다른 것들은 다른 것들이어야한다 그래서 거기에 그것이 당신의 부트 스트랩에 필터링 가능한 포트폴리오를 추가하는 방법입니다 물론 선견지명을 가질 수있는 여러 범주를 가질 수 있습니다

다른 카테고리에서 다시 돌아가서 다른 것을 다시 사용하겠습니다이 두 가지에 다른 것을 무작위로 추가하겠습니다 뿐만 아니라 우리는 다른 곳에서도 자리를 잡았습니다 식품 괜찮아 그래서이 모든 것들이 테크놀러지에 등장 할 것이고 지금도 그렇게 될 것입니다 그것을 저장하면 원하는대로 작업 할 수 있습니다

그래서 지금 내가 새로 고침하고 다른 곳으로 가면 거기에 세 개 이상 있어야합니다 그래, 우리가 그 두번째 팁을 추가 한 6 개의 모든 것들을 가지고있다 음식 하나와 장소 하나가 이제는 다른 사람에게도 추가되었습니다 추가로 장소 추가하기 몇 군데 우리 집에 있어요 그건 중요하지 않아서 거기에 3 개의 엑스트라를 추가했습니다

지금 사이트로 돌아 가면 내가 새로 고침을하기 전에 지금 바로이 세 곳을 방문하십시오 내가 구원을 얻은만큼 새로 고친 후에 지금은 아무런 도트가 없다고 말했어 내가 새로 고칠 때 거기에 또 다른 세 개가 추가되어야한다 당신 원래의 장소 장소가 있으므로 여기에 3 개를 추가했습니다 그래서 그들은이 방법으로 당신의 부트 스트랩 4에 필터링 가능한 포트폴리오를 추가합니다

사이트 및 모든 항목을 가질 수 있으며 레이블을 업데이트했습니다 우리 자신의 이미지를 업데이트하면 모두로 돌아가서 계속 추가 할 수 있습니다 당신이 원하는만큼 많은 것을 위해 똑같은 일을 해줍니다 그래서 거기에 당신이 있기를 바랍니다 공유하고 채널에 가입하고 싶다면 유용하다고 생각했습니다

웹 개발에 관심이 있다면 웹 개발 과정 중 하나를 선택하십시오 아래에 우리가 가지고있는 우리의 YouTube 가입자를위한 거대한 할인이 있습니다 그 아래의 위대한 약간의 자유로운 코스는 다시 한번 이것이 보였다 시스템 22의 jamie와 웹 팁의 기술 팁에 감사드립니다 좋은 하루 되세요

Bootstrap 4 Transparent Navbar Creation

안녕 얘들 아 또 다른 부트 스트랩 4 웹 디자인 자습서에 오신 것을 환영합니다 이것은 제이미입니다 시스템 22 및 웹 디자이너 기술 팁에서 진정 잘이 비디오에서 나는 질문을했다 누군가 나에게 잘 물었다

그들은 부트 스트랩 웹 사이트의 색상을 변경하는 데 문제가 있습니다 그들의 bootstrap 4 웹 사이트에있는 navbar와 그들이하고 싶었던 것은 투명한 배경 및 왜 당신은 그게 잘 원하는지 스스로에게 물어볼 수 있습니다 꽤 자주 당신은 여기에 일종의 이미지 인 영웅 섹션을 가지고 있습니다 당신은 배경 이미지를 가질 수 있습니다 특히 슬라이더 또는 슬라이드 쇼가 진행중인 경우에는 빨리 만들지 않으면 오래 걸리지 않을 것이다 이 페이지를 내 브래킷 소프트웨어로 열면 지난 번 우리가 그 바보 같은 버튼을 넣은 그 미친 사이트입니다

내가하는 일은 내가 할거야 아이디로 새 섹션을 추가하십시오 무엇이 영웅이라고해야할까요? 그걸로 끝내라 당신 그리고 안에 거기서 나는 죽음을 원해 이걸 복사하고 이것을 사용하자

우리가 여기에있는 것을 정확히 사용하고 분명히 그 태그를 놓쳤습니다 그냥 정리해 나는이 실제 섹션을 다른 사슴 안에 넣을 것이라고 생각한다 그가 집을위한 XH 텍스트를 썼다 고 말하는 클래스 너 너 당신 그걸 자르고 저기에 저기 놓아

그걸 두드려서 그것을 단단히 조이고 지금 우리가 원한다면 이걸 부르 자고 여기에 배경 이미지를 넣으면 내가 그 말을하고 그녀가있을거야 마지막으로 우리가했던 어리석은 버튼에 관한 텍스트와 같은 약간의 텍스트 그 위에 호버 효과를 넣으려고 우리가 원하는 것은 내가 넣기 만하면됩니다 뒤에있는 배경 이미지 좋아, 이제 약간의 배경 이미지를 얻었으니 CSS로 가보자 우리가 한 페이지 만 가지고 있기 때문에 여기에 페이지를 사용하기 전에 사용하고있었습니다

우리는 영웅 섹션을 목표로하고 싶습니다 여기를 보면 ID입니다 ID 영웅 ID는 항상 해시 태그를 사용합니다 해시 태그 영웅과 닫고 모두 배경 이미지를 curlies 그리고 우리는 URL이 어디에 있는지 또는 아래쪽에 있는지 아니면 그냥 사용자인지를 말해야합니다 그리고 그것은 이미 여기에 배경으로 잘 발견되었습니다

위치 현명한 배경 한숨 우리는 모든 것을 커버하고 싶었던 배경 크기는 커버입니다 그래서 CSS의 약간의 비트로 저의 세미 컬을 잊어 버렸습니다 그걸 잊어 버리면 읽을 수 없으니 아래로 이동해 보자 우리가 아무 것도주지 않았기 때문에 그렇게 많이 보이지는 않습니다 치수 또는 어떤 패딩이라도 더 크게 만들 수 있습니다

그래서 지금 새로 고침하면 그 영웅 섹션을 거기에서 얻었습니다 분명히 더 큰 비트와 우리는 거기에 갭을 가지고 있습니다 그래서 영웅 섹션에서 수업을 해봅시다 영웅 텍스트 클래스 또는 부트 스트랩 클래스 인 텍스트 라이트가 즉시 적용됩니다 흰색이나 빛을 착색 한 것으로 바꾸면 더 좋게됩니다

배경 및이 텍스트 섹션을 만들거나 그 전체를 만들기 위해 약간의 패딩을 제공하십시오 섹션이 조금 더 크고 클래스이기 때문에 클래스를위한 점이므로 잊어 버렸습니다 이제 각 텍스트가 멋지다 H 텍스트는 H 텍스트이므로 H 텍스트 우리가하고 싶은 것은 그냥 패딩을 주면됩니다 왼쪽 하단과 오른쪽 하단에있는 비율을 사용한다고 가정 해 보겠습니다

픽셀 값 20 % 위쪽 및 아래쪽 2 % 왼쪽 및 오른쪽이라고합시다 이 시위는 중요하지 않습니다 사이트 덕분에 그리고 거기에서 새로 고침해라 그것은 더 많이 본다 거기의 영웅 섹션 그러나 우리는이 작은 틈을 정상에서 여기에서 원하지 않는다

우리는 당신이 여기 CSS를 알고 있다는 것을 알아 냈습니다 와서 그 의견을 내라 네 개의 별표를 넣고 다시 읽는 것을 원한다 스타 포워드는 괜찮아요 우리는 그 고양이를 없애 버렸습니다

이제 우리는 작은 영웅 섹션을 가지고 있습니다 여기에가는 것은 괜찮습니다 그리고이 갈라진 틈이 원하는 것은 달성하기 위해서였습니다 이 투명 그래서 당신은 그것을 통해 이미지를 볼 수 있습니다 꽤 쉽다는 생각은 꽤 간단하지만, 네 계급이 있었으니 실제로 해봐야 할 것 같아 여기보세요

저 바가 어둡고 우리 색이 없네 그리고 당신은 당신이 단지 투명해질 수 있다고 생각할 것입니다 그리고 모든 것이 잘 될 것입니다 우리가 일반적으로하는 일을 수행하십시오 바로이 CSS를 CSS로 복사하는 것입니다

사이트에 붙여 넣기 만하면됩니다 그냥 정리해라 이제는 너를 구하려고 Ctrl을 누른다고 생각해 우리가 지금 사이트로 돌아 가면 그것은 생각할 것입니다 직업은 끝났어

하지만 지금 새로 고침하면 어떻게되었는지 다시 돌아가고, 우리가 본다면 여기서 코드를 작성하면 잘됩니다 아마 여기 아래로 투명해질거야 그리고 바로 거기에 이식이있어 물론 우리가해야 할 일이 있습니다 이 기본 부트 스트랩 코드를 덮어 쓰려면 어떻게해야합니까? 그들의 중요한 감탄 부호와 포트를 사용하여 강제로 그렇게했습니다 우리는 여기 코드를 사용하여 그것을 할 필요가있다

그리고 당신이 볼 수 있듯이 그것이 효과가있어 복사 된 것이 이미 복사되어 있습니다 소프트웨어를 괄호에 넣고 나중에 중요하게 추가하십시오 느낌표 중요한 통제 s 우리가 새로 고침 할 때 지금 나는 말할 것이다 길에서 크롬 검사관은 그 것처럼 간단합니다 그리고 그것은 당신이 당신이 어떻게 그것을 강제해야하는지입니다

이걸 가지고 도망 갈 수있는 문제는 당신이 그것을 너무 잘 볼 수 없다는 것입니다 이 메뉴를 잠시 수정하십시오 이 모든 것 우리는 이것을 바로 수행하여 빠른 데모를 통해 문제를 보여줍니다 너는 그녀를 우연히 만나거나 보지 않을 수도있다 지저분한 접촉 그 수색 상자를 없애고 그 수색을 돌리고 내가 놓을거야

이 컨테이너 내부에 있기 때문에 순간적으로 모든 것이 행복하게 컨테이너 안으로 들어갑니다 우리는 조금 넘기 만하면됩니다 그래서 그냥 클래스 엔터테인먼트를 제공하자 차를 세워야하고 모든 멋진 흰색이어야한다 그래서 우리는 그것을 가지고 있고 이것이 모두 늠름한 것입니다 – 도리 나는 조금 더해야 할 것입니다

아래쪽 아래쪽은 투명 함으로 인해 발생할 수있는 문제를 보여줍니다 우리가 더 높은 새로 고침을 얻었을 정도로 배경 단지이 깊은 소파 이제 우리가 감아 서 당신은 당신이 당신의 링크를 잃어버린 것을 볼 수 있습니다 실제로 거기 있지만 당신이 그 백인을 지나갈 때 당신은 그들을 볼 수 없습니다 더 이상 쓰지도 못하고 글쓰기가 그 사이에 끼어 들기 때문에 귀하의 운송 바를 만드는 방법에 대한 귀하의 질문에 대한 답변이 되길 바랍니다

귀하의 navbar 투명 투명 나는 다른 비디오를 할거야 말해야한다 잠시 후 그라디언트를 추가하는 방법을 보여 드리겠습니다 아래쪽으로 스크롤하여 흰색 나비 모양의 막대가 여전히 눈에 띄지 만 이미지는 너의 이미지 여전히 좋아 보이기 때문에 다음 동영상에서 그렇게 할 것입니다 이 동영상을 즐겼다면 질문에 답변 해주세요 웹 디자인에 관심이 있으시면 채널 구독을 신청하십시오

아래의 웹 디자인 과정은 YouTube에 대한 할인 혜택을 받았습니다 구독자들도 있으며 거기에 멋진 무료 코스가있어서 모양이 있습니다 이 비디오에서 사용한 대괄호 텍스트 편집기는 무료로 다운로드 할 수 있습니다 아래 링크에서 다시 다운로드 할 수 있습니다 시스템 22 및 웹 디자인 및 기술 팁을 보내 주셔서 감사합니다

Bootstrap 4 Working contact form with php Bootstrap 4 and Brackets Text Editor

안녕 얘들 아,이 부트 스트랩 4 대괄호 텍스트 편집기 비디오에 오신 것을 환영합니다 시스템 22의 jamie와 웹 디자이너의 기술 팁 PHP를 추가하거나 PHP 문의 양식을 작성하여 문의 양식을 얻을 수 있습니다

실제로 메일을 보내는 작업으로 사이트를 만들었거나 템플릿이 있고 구독 양식과 문의 양식이 있으며 모두 멋지게 보이면 그들을 채울 수 있습니다 연락처 버튼을 누르면됩니다 가장 쉬우세요 당신이 그들을 채울 수 있고 일들이 일어날 수 있습니다 물론 당신이 공격 할 때 아무것도 제출하지 않는 것이 좋다

왜냐하면 나는 라이브에 있지 않기 때문이다 서버와 B가 라이브 서버에 있더라도이 양식 제출을 명중 할 때해야 할 일을이 양식에 알려주지는 않습니다 버튼을 클릭하면이 작업을 수정하기 위해 약간의 PHP를 사용하게 될 것입니다 이제는 PHP에 관해 알아야 할 것을 시작하기 전에 그것이 생방송이라는 것입니다 스크립팅 언어이므로 라이브 서버에서만 작동합니다

그렇다면 로컬 컴퓨터에이 사이트를 구축하면 라이브로 업로드해야합니다 서버가 PHP 작업을 수행하거나 PHP를 실행하는 로컬 호스팅 환경을 갖습니다 그래서 나는 그것을 업로드의 모든 것을 통해 당신을 데려 갈 것이라고 말했고 우리는 모든 것은 우리 괄호를 열어 보겠습니다 소프트웨어 괄호는 자유 텍스트 편집기입니다 그리고 그것은 절대적으로 굉장합니다

이 비디오 아래의 링크에서 다운로드 할 수 있습니다 새 문서를 만들어 파일을 만들고 새 문서를 작성해 보겠습니다 여기에 몇 가지 물건을 입력 시작 그것이 PHP를 당신에게 익숙하지 않을 수 있습니다 괜찮아 따라 와서 브래킷을 열어 보통 PHP 용 태그를 여는 물음표를 넣고 난 다음에는 PHP를 닫고이 형식을 더 읽기 쉽게 만들어 보겠습니다

저장하고 PHP로 저장해야하므로 같은 위치에 저장합시다 부트 스트랩 파일을 저장하여 다른 이름으로 저장한다고 말하면서 여기에 부트 스트랩이 있습니다 우리의 모든 파일이 들어있는 폴더 CSS 이미지 비디오 자바 스크립트 인덱스 도트 HTML 그냥 차가운대로 저장하자 전화해서 원하는대로 부를 수있다 그러나 당신이 그것을 부른 것을 기억하고, PHP를 그 뒤에 놓는 지 확인하십시오

어떤 형태의 양식이 괜찮 았는지 알고 있으므로 약간의 글을 쓰기 시작합니다 PHP는 우리 사이트를 가져 와서 우리가 어떤 형식을 가지고 있는지 보도록하겠습니다 우리가 이름을 얻은 방식대로 그 쓰레기를 얻는 것은 상쾌합니다 우리는 전자 메일을 받았으므로 메시지 필드가 있으므로 전자 메일에 이름을 지정하지 않습니다 우리는 실제로 구독자에게 동일한 PHP 형식을 사용할 수 있습니다

이름 입력란과 이메일 입력란은 나중에 별도의 입력란을 지정하기로 결정할 수 있지만 우리는 당분간 양쪽 모두에 대해 동일한 것을 사용할 수 있습니다 그래서 우리는 이메일과 메시지 필드에 이름을 붙였습니다 우리 대괄호로 돌아 가기 좋아, 지금은 달러 기호로 시작해서 시간이 갈거야 하나는 이메일이었고 다음은 메시지가 아니 었습니다 좋아, 지금 우리가 뭘 잘하길 원하니?이 모든 것들이 똑같이되기를 바란다

포스트 인 것들이 Dolph Sonic의 핵심 인 P OST를 강조하고 있습니다 중요한 모든 일을 똑같이 수행한다면 문제도 발생할 것입니다 과 우리는 이것을 복사 할 수 있습니다 그 컨트롤을 저장하십시오 이제 우리가해야 할 일이 있습니다

우리는 이름 필드를 가져야합니다 전자 메일 필드 및 메시지 필드에 실제 이름이 있으므로 인덱스 도트 HTML 우리가 만든 사이트는 내려갑니다 여기에 우리 양식에 당신 우리가 가지고있는 첫 번째 버전은 두 가지 버전이 있습니다 모바일 용, 데스크톱 용으로 모두 4 가지가 있습니다 실제로 볼 때 거기에 일반적인 page

php가 있습니다 아무 것도하지 않아서 아무 것도하지 않으므로 이름을 지정하고 싶습니다 거기에 우리의 PHP 양식의 PHP 연락이 모든 것입니다 나중에 더 명확 해지고 나는 그것을 우리의 복제 된 형태로 복사 할 것이다 아래에 있어요 우리가 그것을 클릭했을 때 우리는 그것이 PHP를 날려 버리거나 PHP 문의 이제 우리의 각 분야는 이것이 우리가 잘하고 싶은 것입니다

여기에 첫 번째 텍스트 필드가 있고 이름을위한 것입니다 이름을 간단하게해라 나는 그걸 복사 할거야 이것이 전자 메일 또는 전자 메일이므로 전자 메일의 이름을 지정합니다 이메일 나는 가능한 한 간단하게 유지하려고 노력하고있다

우리는 필요 없다 그걸로 무엇이든 할 수는 있지만 아래에있는 우리의 복제 양식은해야합니다 똑같은 이름과 이메일 필드 필드 이름을 제공합니다 이메일을 보내면 괜찮습니다 메시지 필드가 없습니다

구독자 발은 여기에서 보여 드리지만, 우리가 여기서 작업하고있는 것을 보여줍니다 이 인라인 가입자 형태 그래서 우리는 그곳에 이름과 이메일 필드를 가지고 있습니다 이제 우리 연락처 양식으로 이동하여 여기에 우리는 여기에 연락 양식을 가지고 다시 행동을 형성합니다 우리가 방금 시작한 우리의 접촉 PHP로 가기를 원합니다 건물과 다시 우리는 우리의 필드에 두 개의 이름을주고 싶습니다

이것이 John이라는 이름입니다 Doe 그래서 나는 그 이름의 이름과 다음 이름을 넣을 것입니다 전자 메일 주소가 내려 가고 전자 메일이므로 이름을 입력하고 전화를 걸어 봅시다 당신이 원하는대로 이걸 부를 수 있다고 말한 것처럼 이메일로 보내지만 계속하려고 노력 중입니다 여기에 간단하고 여기에 우리의 메시지가 들어 있습니다

이 메시지를 지금 우리의 모든 밭에 이름이 붙어 있다고 가정 해 봅시다 그것과 관련된 각 필드 그래서 우리는 그 이름을 불렀다 전자 메일이라고 불리는 이름으로 불리는 연락처 양식으로 슬라이드하면 전자 메일이라고하는데 바로 거기에서 메시지라고합니다 우리의 PHP에 우리가 그 이름과 우리는 그 이름을 그 필드라고 불렀던 이름으로 줄 것입니다 그냥 대괄호를 열고 거기에 빗댄 쉼표를 넣고 싶습니다

우리는 지금 쓰고 있습니다 아래에서 똑같은 것을 할 것입니다 세미콜론은 우리의 CSS와 똑같습니다 대괄호 그리고이 하나는 전자 메일이라고 불 렸습니다 나는 그것을 지켜본 것과 같은 이름을 붙였습니다

여기 아주 간단하고 이건 메시지라고 불리는거야 알았어 그 사람들을 채우기 위해 우리는 저 밑에 세미콜론이 있는지 확인해야합니다 우리는 내려 가고 싶습니다 이메일을 받으면 우리는 무엇을 말하고 싶습니까? 이메일을 보내면 이메일을 통해 뭔가를 말하고 싶을 것입니다

그것은 밑줄이었고 우리가 말하고자하는 것은 무엇입니까? 거꾸로 쉼표는 Styles 식당에서 우리가 지금 사용하고있는 사이트 자체는 이제 우리가 말하고자하는 부제목입니다 우리가 다른 말을해야 할 것 같아서 제목 줄에서 다시 우리가 말하고 싶은 이메일 주제가 될 것입니다 우리가하고 싶은 말 여기서 나는 표준이나 새로운 메시지를 의미한다 웹 사이트에서 보거나 한 가지 반전 된 말 새 메시지를 사용합시다 Styles에서 좋아요

이메일 본문에있는 이름에 우리 사용자가 예를 들어 자신의 이름으로 알고있는 정보를 원합니다 그들의 이메일 주소와 그들이 보낸 메시지 그래서 이메일 본문이 몸을 강조하고 그게 평등하게 될 것입니다 실제 이메일 입력란에 나타나기 때문에 이름과 그 이름 옆에 우리는 그들이 여기에 그들의 이름으로 채워지는 것이 무엇이든 가질 것입니다 코트를 입은 다음 그 이름의 달러 기호 이름을 거기에 넣을거야 그들이 그들의 이름 안에 넣은 것을 채워야합니다

나는 시대를 칠 것입니다 및 IMAX 중대한 specs 오른쪽 은총 backspace 및 새로운 선을 위해 N 그 후에는 일정 기간이 지나면 이것을 닫을 것입니다 우리가 추가하고 싶은 다른 것들을 그래서 지금 아래에 기간을 넣을거야 우리는 이메일을 작성하고 싶었 기 때문에 같은 일을하고 메시지 자체가 전자 메일이라고 말하면서 이메일 주소는별로 분명하지 않고 물론 파운드가 아닙니다 이메일에 서명하면이 세부 정보를 채울 것입니다

다시 우리는 백 슬래시를 넣고 새로운 페이지를 넣기를 원합니다 거꾸로 쉼표를 쓴 후에는 다른 기간을 추가합니다 하나 더 여기 물론 메시지이며 이것이 조금 보일 수 있습니다 지금 당장 이상한 일이지만, 우리가 이것을 할 때 분명히 드러날 것입니다 우리가이 메시지를 그들이 무엇을 넣든간에 그들의 메시지는 달러 기호 메시지이므로 거기에 있는지 확인하십시오

똑같은 철자가 붙어 있지 않은 경우에는 대문자를 쓰지 마십시오 고양이는 대소 문자를 구분하지 않으므로 작동하지 않으므로 PHP와 백 슬래시 (backslash)와 개행 문자를 치면 거기없이 빠져 나옵니다 이 하나하지만 나는 어쨌든 그것을 할거야 왜냐하면 우리는 세미콜론을 넣을거야 계속 나아가고 우리의 다음 일은 지금 가고 있습니다

우리는 그들이 당신의 주요 이메일 메시지를 작성하겠다고 말했어 여기에 우리가 스타일 (Style)에서 원하는 이메일을 보낼 때 말했어 레스토랑 사이트와 별에서 오는이 새로운 메시지가 원하는 제목 줄 그 아래에서 우리는 그들이 여기에서 채웠던 것이 무엇이든지 원한다 그러나 우리는 그것을 말하지 않았다 어디로 가야할까요? 우리가 보내고 자하는 곳에 넣으십시오

메시지를 좋아할만한 이메일 주소가 될 수 있습니다 약간의 여유 공간이 있고이 일을 제대로 수행해야합니다 평등하게 가고 나서 우리가 살 때 당신의 이메일 주소를 넣으십시오 내 진짜 이메일 주소를 거기에 넣어 분명히 괜찮아 그래서 세미콜론 사촌 우리는 조금 더 추가 할 것입니다 이제는 어디로 가야할 지 말하십시오

이 내용을 넣고 머리글에 전자 메일의 머리글을 넣으면 헤더가됩니다 우리는 누구로부터 왔는지 말할 수 있기를 바랍니다 쉼표는 바로 그 다음에 우리는 스크롤을 통해 전자 메일을 보냅니다 그리고 다시 우리는 이번에 그것을 돌려받을 것입니다 우리는 달러 백 슬래시 R을 사용할 것입니다

그리고 백 슬래시 N과 거기에 약간의 세미콜론이 있습니다 쉼표 거기에 헤더의 다음 많은 정말 우리가 회신을 원한다면 어디 있습니다 그들에게 우리는 거의 정확한 이메일에 회신하지 않을 것입니다 이번에는 머리글을 다시 붙이십시오 다른 그래서 그것은 혼란스러워하지 않는다 쉼표로 회신 – 그리고 우리는 답장을하기 때문에 이메일을 보냅니다

이 전자 메일 값을 위해 여기에 넣은 것이 든간에 그들의 이메일 주소 우리는 그것이 돌아오고 개행하기를 원한다 그래서 괜찮아 보인다 이제 우리는 남성에게해야 할 일을 실제로 말해야합니다 같은 남성이 둥근 브래킷을 열고 내부에 두 개를 추가하여 이메일 주소로 보내려고합니다 쉼표를 추가하는 전자 메일 제목을 추가 할 전자 메일을 추가하려고합니다

이 공간과 전자 메일 본문 사이에 우리가 이메일을 가지고 있으므로 제목과 모두 포함 된 이메일 본문 이 정보는 여기에있다 더하기 우리는이 두 헤더를 원한다 그리고 우리가 대답 할 때 우리는 그 이메일에 답장을 보내십시오 그래서 헤더를 추가하고 다시 헤더를 추가 할 수 있습니다 일반 Word 문서를 입력 할 때 쉼표 뒤에 공백을 넣지 않습니다

우리가 거의 다 끝내고 나서 한 번 제출하면됩니다 물 우리가 당분간 잘 해내 길 원한다 우리는 그들을 다시 보내야한다 페이지 상단으로 머리말이 둥근 괄호 하나에서 열립니다 더 많은 시간 우리가 가고 싶었던 위치를 말할 거에요

우리 페이지 이름 인 이튼 indexhtml에 가보겠습니다 그냥 페이지의 상단에 갈거야 그래, 거기에 뭔가를 넣어 그 후에 오만처럼 다른 것을 추가하고 싶은 경우에 대비해 거기에 작은 틈새 거기에 우리의 연락 PHP는 지금 어떻게 우리가 할거야 이 모든 작업을 내가 먼저해야 할 일은 Ctrl-s로 저장하는 것입니다 우리의 부트 스트랩 폴더를 보시고 여기에 우리의 부트 스트랩 4 폴더가 있습니다 일반 색인 또는 HTML 페이지가 있고 우리는 단지 우리가 우리의 Contact PHP 파일을 가지고 있습니다 그곳에 지금 창조 된 것은 처음에 내가 너에게 말했다

당신이 라이브 서비스를 제공하고 있지 않다면 라이브 코드는 라이브 호스팅이 필요합니다 서버에서 우리가 우리의 웹 사이트를 온라인 상태로 만들도록하고 싶습니다 그래서 드래그 할 것입니다 이 모든 것들이 내 웹 서버에 이르기까지 FTP 클라이언트의 무료 비트를 사용하려고합니다 FileZilla라는 이름이 있습니다

할머니처럼 우리는 모든 것을 올바르게 꿰뚫어 야합니다 괜찮 으면 괜찮아 괜찮 으면 세미콜론 버퍼가 없어 세미콜론을 놓치면 그 시점에서 멈추고 오, 그래, 괜찮아 내 이메일을 넣어 줘야 돼

거기에 잠시만해도 괜찮아 보여서 안된다 이제는 밑줄을 써야합니다 전에 말했던 것처럼 정말 중요합니다 모든 것이 자리에 있어야합니다 그렇지 않으면 일이 올바르게 작동하지 않습니다

내가 그걸로 행복 할거라 믿어 그래서 내가 구할거야 내가 할일은 내가 할거야 내 이메일 주소를 입력하면 업로드됩니다 당신 좋아, 모든 준비가되어있다 나는 내 이메일 주소를 그 대신 당신과 귀하의 이메일 주소가 이제이 전체 사이트를 라이브 서버 여기에 우리의 모든 웹 사이트 파일이 들어있는 부트 스트랩 폴더가 있습니다

CSS 이미지 우리가 작성한 JavaScript 비디오 접촉 PHP와 우리의 indexhtml 우리 모두 그 (것)들을 움켜 잡고 생활 서버에 올려주기하는 것은 어떻게 당신은 그것을 하는가? 당신은 그것이 정말로 쉽다는 것을 말하고 있습니다 저는 약간의 자유 소프트웨어를 사용할 것입니다 FileZilla라는 이름으로 FTP 클라이언트와 여기에 링크를 넣을 것입니다 여기에 내 컴퓨터 파일의 왼쪽에 여기에 가서 그것은 단지 내 컴퓨터의 디렉토리와 여기에있는 특정 비트는 다음과 같습니다

이 폴더와 나는 그저 오른쪽에있는 우리 웹 사이트 파일들을 보여 줬어 옆에 호스팅 제공 업체에 연결되어 있습니다 이제 우리는 수백 개의 웹 사이트에 있습니다 나는 방금 호출 된 하위 디렉토리를 만들었습니다 당신이 오직 하나만 호스팅한다면, 그 순간을위한 부트 스트랩 웹 사이트에서 방금 업로드 한 내용이 없습니다

공용 HTML이지만 호스팅 제공 업체에 확인하십시오 정말 쉽습니다 왼쪽 클릭을하고 드래그하여 선택해야합니다 왼쪽 클릭을 할 것입니다 내 손가락을 아래로 유지하고 내 호스팅 제공 업체 디렉토리 바로 여기에 복사가 시작되면 교차 할 것입니다

그게 전부입니다 부트 스트랩 (bootstrap)과 관련이있는 이유는 너무 좋아서 너무 가볍기 때문입니다 정말 쉽게 WordPress에 당신이 아무것도 설치하지 않아도됩니다 말 그대로 데스크탑에 설치하고 라이브 서버를 가로 질러 드래그하십시오 그것은 나를 틀리게하지 않는다

나는 단어를 사랑한다 WordPress – 멋진 종소리와 호루라기가 있지만 건물을 만들 때 기업 사이트 또는 한 페이지짜리 사이트 또는 스플래시 페이지와 같은 페이지 방문 너무 가볍기 때문에 매번 부트 스트랩을 사용합니다 신속하고 정말 쉽습니다 이제는 끝났습니다 합리적인 속도로 여기에 업로드가 오래 걸리지 않았습니다

우리 사이트를 온라인에서 실시간으로 보러 우리가 이메일을 보낼 수 없는지 확인하십시오 그래서 나는 그것의 하위 도메인이기 때문에 나는 나의 정규적인 사이트에 갈 것이다 거기에 하위 도메인 ds4가 있다고해서로드가 얼마나 빨리 완료 되었습니까? 우리의 첫 번째 문의 양식을 작성하고 이것이 효과가 있는지 확인하십시오 가입 양식과 난 그냥 거기에 임의의 이메일을 넣어 내 이메일 통신에 나를 내가 사용하는 일반적인 테스터는 페이지의 맨 위로 돌아가는 점을 클릭하자 그 이유는 그것이 우리 PHP 폼의 바닥에 있기 때문에 우리가 가라고 말했기 때문입니다

바로 여기 indexhtml에 있습니다 따라서 기본적으로이 페이지의 맨 위입니다 이번에는 우리의 연락 양식으로 가자 여기에 살고있어

난 그냥 연락해 너 감히 그걸 감히하지 않을거야 이메일 주소와 여기에 좋아요 제출 버튼을 누르면 다시 페이지 상단으로 팝업됩니다 거기서 우리는 간다

그리고 나는 1-2 분을 기다릴 것이고, 나는 나의 아웃룩 전자 메일로 갈 것이다 고객과 내가 그걸 받았는지 확인해 이메일 당신 알았어 약 2 분 후예요 우리는 그 두 가지 메시지를 모두 가지고 있습니다

맨 위 하나를 통해 나는 우리가 보낸 마지막 것이 무엇인지 추측한다 양식이 있고 이메일에 메시지가 있습니다 Styles 레스토랑 사이트에서 가져온 헤더가 있습니다 우리가 주제에 넣으라고 말한 Stiles의 새로운 메시지입니다 필드를 입력하고 지금 답장을 보내면 이메일 주소로 답장해야합니다

그래, 훌륭 했어 좋아, 이제는 그럴 필요 없어 물론 서브 폼 가입에서 나올 것입니다 거기에 메시지 필드가 없으므로 이름과 메시지가 있습니다 이메일이있어서 모든 일이 잘되고 있습니다

한 걸음 더 나아가서 PHP 폼을 만들 수 있다는 것을 의미합니다 이것들 각각은 당신이 원한다면 그들은 다른 주제를 가지고 있습니다 그러나 나는 단지 가려고합니다 그것을 그대로두고 우리가 한 일을 정확하게 수행하십시오 구독자 양식이나 뭐 그런 말을하고 싶다면 여기에 메시지를 올려주세요

그런 다음 이메일 주소를 만들어서 자신의 이메일 주소에 넣을 수 있습니다 MailChimp Constant와 같은 메일 클라이언트가 자신 만의 연락처를 제공합니다 양식을 자동으로 수행하도록 사이트에 넣을 수있는 양식 하지만 우리가이 양식을 보내지 않은 대신에 그 봉투가 맨 위로 올라갔습니다 나는 그것을 원한다 나는 당신이 당신의 메시지를 보내 주신 것을 고백하는 페이지로 간다

그래서 우리의 괄호로 돌아가 봅시다 이것이 조금씩 진행될 것이라는 것을 압니다 이 비디오는 가치가있을 것입니다 여기에 우리의 인덱스가 HTML 페이지에 있습니다 근본적으로 나는 그것으로부터 약간의 재료를 훔칠 것이다

헤더가 있고 그게 네가 좋아, 그럼 우리는 뭔가를 가질 수있다 이 말은 당신의 메시지를 보냈습니다 당신 그게 아마 바닥 글에 그곳에지도를 갖자는 겁니다 우리가 제거 할 수있는 모든 것, 그래서 여기 우리 사이트를 우리의 인덱스 점으로 가져 가자 HTML과 줌 백업 위로 그의 카사 아래로 가자

우리는 이걸 맨 아래로 가져 가고 싶지 않아 그 Jumbotron 아마도 과거의 와인 선택 와인 메뉴를 확대 해 보겠습니다 점보 트론 (Jumbotron)은 그 모든 것을 삭제합니다 이제이 비트를 Google지도로 가져갑니다 당신 그것이 비디오 섹션이나 아직 갈 방법입니다

Google지도와 바닥 글 호스트는 해당 항목을 삭제하므로 우리는 우리의지도 표시 줄에 그 작은 Jumbotron이 있습니다 문의 해 주셔서 감사합니다 당신 나는 너에게 메시지를 박수 치기 시작할거야 당신 집으로 돌아 가기 위해 버튼을 누르십시오 그리고 우리는 그곳에있는 것 같아요

기존의 색인 도트 HTML HTML 페이지를 덮어 쓸 것이기 때문에 그렇게 말하지 마십시오 네가 그렇게 말하면 네가 그걸 백업했으면 좋겠어 indexhtml로 저장하면 여기에는 부트 스트랩 폴더가 있습니다 HTML이 성공했다고 말하고 싶습니다

좋아, 이제 우리는 우리가 여기에 우리 페이지에 가면 우리는 다른 페이지를 가지고 있다고 말할 것이다 그 HTML을 성공이라고 부르며 열어 보겠습니다 거기에 우리가 가서 우리가 홈페이지로 돌아갈 것입니다 나는 그에게 이렇게 말하지 않았기 때문에 나는 그의 팬 페이지를 가져 가지 않을 것이다 여기에 버튼이있다

진실한 마음에 드는 곳은 어디입니까? 그곳에 가기위한 즐겨 찾기가 없기 때문에 거기에 HTML 페이지의 색인을 붙이십시오 괜찮아 그걸 다시 시도하자 그 페이지를 새로 고침해라 그리고 거기에 우리가 우리가 원하는 것을 다시 홈 페이지로 가져갔습니다

연락 양식을 보내면 연락 양식으로 돌아가고 싶습니다 이번에 우리가 성공 페이지를 치라고 말하고 싶은 위치에 성공 HTML 우리가 거기에서 부르는 것이 바로 거기에있다 이제 우리의 새 페이지와 업데이트 된 연락처 PHP 파일을 서버를 새로 고침합니다 마우스 오른쪽 버튼을 클릭하면 새로 고침됩니다 우리의 성공 페이지가 왼쪽 클릭으로 드래그되어 서버로 업로드됩니다

PHP에 연락하면 그것을 드래그해야하며, PHP를 업데이트하라는 메시지가 표시됩니다 그게 바로 이상이야 우리가 원하는대로하는거야 괜찮아 우리의 살아있는 페이지가 아니라는 것을 다시 보내 주시길 바랍니다

라이브 페이지를 확인하십시오 위로 돌아가서 위로 올라가십시오 여기에서 보내자 그 시간에 괜찮 았어 내가 직접 연락해 주셔서 감사합니다

당신이 당신의 하위 구독에 대해 다른 것을 가질 수 있다고 말하는 것 같은 당신의 메시지 거기에 다른 PHP와 당신의 연락처에 대한 다른 하나 무엇을하고 싶은지 바꿨다 다른 것을 쓰다 구독 해 주셔서 감사합니다 당신 또는 귀하의 성공 페이지에 귀하가 말할 수있는 가입 페이지가있을 수 있습니다 가입 또는 우리 모두가 당신을 메일 링리스트에 추가하기 위해 그걸 세이버라고 부르고 싶습니다

다음 번 연락 할 때로드 한 또 다른 페이지입니다 하나는 이걸 복사해라 HTML 또는 그 페이지를 호출 한 내용을 구독하고 메시지를 변경하십시오 새로운 가입자 작업 완료 알았어 연락 양식을 보자 그게 또 다른 일을 할 수 있는지 보자

여기에 하나를 반올림하고 모자를 쓰지 않으면 유효성을 검사합니다 그때 당신은 그것을 시도하고 보내면 약간의 에러가 나옵니다 시도해 보시고 보내주세요 그걸 포함시켜주세요 원하는 경우이 필드를 필수 필드로 만들 수 있습니다

만약 그들이 그것을 채우지 않는다면 그것은 매우 쉽습니다 바로 이것을 보내십시오 다시 성공 페이지로 이동하여 버튼을 눌러 집으로 돌아갑니다 그 방법으로 사람들은 그들의 메시지가 때때로 전달되었다는 것을 알게된다 그들이 생각했던 페이지 상단에있는 위로 올라간다

보냈는지, 아니면 그냥 흐트러 뜨 렸는지 다행스럽게도 우리가 선고 한 첫 번째 문장이 몇 분 남았습니다 저의 이메일 주소는 저기 있습니다 괜찮습니다 메시지와 어쩌구 저쩌구는 많은 Z가 거기에가는 모든 것이 좋기 때문에 가서 PHP를 사이트에 추가하여 문의 양식을 사용하도록 설정하고 가입 양식을 사용하면 도움이된다고 생각하길 바랍니다 YouTube 채널을 좋아하고 공유하고 YouTube 채널을 구독하십시오

웹 개발에 관심이있는 아래의 웹 개발 코스 중 하나를 선택하십시오 YouTube 가입자에게 큰 할인 혜택이 있습니다 위대한 무료 코스가 다시 한번 시스템 22와 웹의 제이미입니다 디자인 및 기술 팁 시청을위한 com 감사는 좋은 하루 보내세요

Bootstrap 4 Transparent Gradient Navbar

안녕 얘들 아, 웹 디자인 비디오를위한 또 다른 부트 스트랩에 오신 것을 환영합니다 제이미입니다

https://wwwsystem22net/ 및 http://web-design-and-tech-tipscom/ 우리가 답변 한 마지막 동영상 당신의 배경을 투명하게 만드는 방법에 관한이 질문 중 일부는 navbar here 그러나 나는 당신이 가지고 있을지도 모르는 문제를 지적하고 싶었다 너는 너를 위로 움직이고있어

내가 뭔가를 넘어 가면 그걸 잃을거야 흰색이나 글쓰기가 뒤쳐지면 읽을 수 있듯이 실제로 읽었지만 실제로는 그렇지 않습니다 사람들은 그것을 볼 수 있지만 볼 수 없다면 할 수 없기 때문에 원하는 것입니다 그들은 그 문제를 해결하기 위해 거기에 있다는 것을 알지 않을 것입니다 생각은 어두운 색으로 시작하는 네비게이션 뒤에 그라디언트를 넣는 것입니다

원한다면 이미지 색상을 얻을 수 있습니다 투명 색상 나는이 시연을 위해 검은 색을 사용할 것입니다 우리가 투명한 배경을 가지고있는 순간입니다 그걸 검은 색으로 바꾸자 중요한 수업을 뒤에 놓아야한다

우리가 마지막 비디오에서 말한 것처럼 실제로 작동하게 해줘 이제이 검은 색을 맡자 불투명도 또는 불투명도를 취하여 이제 우리가 흑인이 된 것을 보여 주겠다 여기까지 불투명도 또는 불투명도를 가져와 봅시다 그 번호를 그냥 복사하면 이제 우리는 우리가 원하는 것을 0으로 만듭니다

우리의 CSS로 돌아가서 우리가 다시 브래킷 소프트웨어는 여기에 배경보다는 우리가 배경을 볼 수 있습니다 배경 색상 및 여기 선형 그라디언트를 작성하고 일부를 열어 보겠습니다 내부의 괄호 안에는 우리가 가지고있는 두 가지 색을 넣고 싶습니다 선형이라면 대각선이 될 수있는 직선으로 이어질 것입니다 원형을 가질 수 있습니다 선형은 단지 직선으로가는 것을 의미합니다

그것은 위에서 아래로 또는 기본적으로 왼쪽에서 오른쪽으로 내려갑니다 저는 믿습니다 나는 이것이 작동하지 않을 것이기 때문에 붙여 넣기를하기 때문에 희망한다 첫 번째 색은 검은 색이었고 0은 0이었고 그 다음에는 쉼표를 넣고 두 번째 색을 넣습니다이 색은 0이었습니다

우리 중에 3 명만 넣으면되는 6 명이라면 3 명뿐입니다 그 후에 중요한 세미콜론을 사용하겠습니다 그것을 작동하게하고 세미콜론이 ctrl을 다시 사이트로 말합니다 그리고 거기에서 새롭게해라 그러면 우리가 지금 알 수있는 것처럼, 우리는 그라데이션을 시작한다

상단은 어둡고 하단은 투명하므로 계속해서 볼 수 있습니다 당신이 내 마음에 원하는 이미지를 통해 이미지가 너무 많아요 저기서 흘러 넘치는 글쓰기 나는 너에게 좋을지도 모르지만 투명도와 검정색의 비율을 조정할 수 있습니다 만약 우리가 당신의 색깔 다음에 우리 CSS로 돌아 가면 당신에게 좋은 공간을 줄 것입니다 30 %가 ctrl을 사이트 새로 고침 스크롤로 다시 저장한다고 추측한다고 가정 해 보겠습니다

우리가 실제로 볼 수있는 곳으로 조금 더 어둡게 만들었고 대부분의 일과 마찬가지로 크롬 감찰관을 사용합시다 Google 크롬을 사용하고 있습니다 난 그냥 마우스 오른쪽 버튼으로 클릭하고 조사를하고 우리는 여기에 우리가 그 코드를 넣은 배경이 어두웠 으면하는 실제 비트가 있습니다 그 30 %를 강조하자 그저 30 % 그 자체가 아니다

위아래로 스크롤 할 때 마우스 휠을 사용하여 위아래로 스크롤하십시오 내가 올라갈 때마다 점점 더 많은 공백이 생기고 내가 내려갈 때 점점 더 적어진다 그래서 당신은 그것을 넣을 수있다 당신이 실제로 원하는 곳으로 스크롤을하고 싶습니다 매우 눈에 잘 띄거나 읽는 것이 매우 쉽다

이제는 꽤 좋다 여전히 그 뒤에있는 이미지를 보지만 아래로 스크롤하면 여전히 조금 보입니다 약간의 글쓰기가 가능하지만 괜찮습니다 정말 분명히 그러한 것들을 얻을 수 있습니다 그래서 저는 그 목적을 달성했습니다

나는 예쁜 비율을 말하고 그것이 당신이 그것을 원하는 방식으로 얻는다 그건 당신의 navbar 뒤에 세미 투명 그라디언트를 넣는 것입니다 bootstrap foresight와 물론 CSS는 모든 HTML 사이트 또는 부팅에서 작동합니다 또는 WordPress 사이트를 사용하는 경우 분명히 어린이 테마를 만들어야 할 수도 있습니다 WordPress를 사용하여 그것이 좋았다면 좋았어

웹 개발에 관심이있는 경우 채널 구독 아래의 웹 개발 코스 중 일부는 우리에게 YouTube 구독자에게는 멋진 무료 강좌도 있으므로 다시 한번 이것이 웹 디자이너 기술 팁 통신에 시스템 22와 제이미되었습니다 보고있는 주셔서 감사합니다 좋은 하루 되세요

Bootstrap 4 Create An Animated SVG Wave Text Section

안녕 얘들 아, 다른 부트 스트랩 4 자습서에 오신 것을 환영합니다 https://www

system22net/의 jamie입니다 및 웹 디자이너 기술 팁을 잘 작성했습니다 여기에 효과가있는 일부 텍스트는이 그림자를 만들었습니다 그리고 우리는이 Viji를 여기에서했고 오늘 우리는 이것을 할 것입니다

내가 여기에있어 물결 모양의 텍스트의 일종과 이것들은 일종의 위대한 있습니다 영웅 섹션 또는 약간의 관심을 끌기 원하는 섹션 물론 당신이 그들을 연결하거나 원하는대로 할 수있는 그들과 함께 우리가 될거야 물론 프레임 워크를위한 부트 스트랩으로 이것을 구축하십시오 HTML과 함께 작동하고 또한 그들을 워드 프레스 사이트에 통합 할 수 있습니다 CSS를 사용자 정의 할 수있는 한 조금 짚어보기 만하면됩니다 오늘 밤 부트 스트랩으로 이걸 만들 겠어 당신이 다운로드 할 수있는 무료 편집기입니다 대괄호 텍스트 편집기를 사용하려고 여기 비디오 아래에서 그래서 우리가 지난번에 그만 뒀던 곳은이 페이지를 가지고있는 마지막 사람과 여기에있었습니다 열리고 우리가 계속하고있는 물결 모양의 텍스트에 루카스 비버를 생각해야합니다

여기에 실제로 재현 될 것이고 우리는 그것을 우리 자신의 것으로 바꿀 것입니다 그래서 우리가 이것을 살펴 본다면 코드 펜에 있습니다이 링크를 넣을 것입니다 아래에서 코드를 가져올 수도 있습니다 여기 HTML이 상당히 간단합니다

실제 SVG입니다 그 뒤에는 운동이있는 텍스트와 그 링크가 있습니다 Google에서 실제로 사용하고있는 실제 글꼴을 실제 바다에서 가져옵니다 여기에 우리는 CSS를 가지고 있습니다 실제로 CSS가없는 스타일러스입니다

대괄호 및 모든 것이 아마도 많이 필요하지는 않지만 우리는 데모 용으로 만 사용하십시오 우리가 할 일을 다시 만들 것입니다 그것들을 우리 자신의 것으로 만들고 우리의 부트 스트랩에 간단한 것들을 유지하기 위해 여기에 페이지 CSS에 똑 바른 CSS를 사용하면 우리가 그 일을 계속할 수 있습니다 이 스타일러스를 개조 할거야 스타일리스트가 다시 말하길

기존의 CSS와 나는이 컴파일러 링크를 넣을 것이다 이것은 단지 온라인이다 코드를 변경하기위한 도구는 여기에 비디오 아래에이 링크를 넣어 당신이 할 일은 모두 코드를 복사하여 스타일리스트 코드에 붙여넣고 컴파일 버튼을 누릅니다 그리고 그것을 다시 우리를 위해 일반 CSS로 되돌립니다 알았어

이제 건물을 만들어서 브래킷 소프트웨어를 열자 우리가 여기에 있었던 부분에서 다른 부분을 만들 때까지 내려 갔다 나는 신분증이 주어진 신분증을 줄 예정입니다 신원을 알기 쉽게 물결 모양의 문구를 위해 바다라고 부를 것입니다 ID는 바다를 닫습니다

그 사이에 그 사이에 div를 넣고 싶습니다 컨테이너 클래스에는 실제로 텍스트 요소가 포함될 것입니다 우리의 SVG 그 사이에는 HTML 코드를 넣을 곳이 있습니다 코드 펜으로 돌아가 봅시다 이제이 코드를 첫 번째 비트가 아닌 코드로 가져와 봅시다

시작 SVG 태그에서 닫는 SVG 태그까지 두 번째로 하단에 ctrl C를 괄호로 다시 복사하십시오 시간이 지나면 거기에 붙여 넣었 어 그냥 정리할거야 히트맨 태그 키를 잡을거야 그것을 가로 질러 가지고 와서 그것이 표시하는 방식에 영향을 미치지 않습니다

코드를 더 잘 볼 수 있도록 사용자에게 더 친숙해졌습니다 이제이 글꼴을 Google에서 가져 오는 글꼴이 무엇인지 잡아 봅시다 우리가 여기서 사용할지도 모르는 당신 control-c를 복사하여 지금 우리 페이지의 머리에 넣을 필요가있다 우리가 여기서 사용하는이 페이지 설정을 위해 우리는 초기 비디오에서 이것을했습니다 다시 그걸 넘어 가지 않을 것이지만 나는 이전의 것에 링크를 걸 것이다

거기에 비디오를 볼 수 있도록이 페이지를 설정하는 것이 얼마나 쉬운 지 알 수 있습니다 부트 스트랩을 붙여서 방금 저 아래에 붙여 넣었습니다 부트 스트랩이있는 곳 CSS 링크는 거기에있는 스타일 시트를위한 것이고 우리는 아래로 스크롤하면 우리는 다른 페이지를 위해 넣은 모든 온 – 페이지 CSS를 전달합니다 텍스트 이제 CSS로 이동하자 실제 CSS로 가고 싶다

이걸 복사 하겠지만 몸을 바꿀거야 그 바다 부분에 왜냐하면 나는 이것이 우리의 모든 것에 영향을 미치기를 원하지 않기 때문이다 단지 페이지 그 부분 만 복사하면됩니다 우리의 부트 스트랩 템플릿 드롭 다운 메뉴로 다시 돌아가서 그 탭을 선택해서 줄을 서있을거야

지역 좋아요 그래서 우리는 그 섹션을 만들었습니다 바다 ID가 아닌 바다 ID는 항상 해시 태그 클래스가 있습니다 점이 해시 태그 루시 세션의 ID 이름이므로 그래서 그 이미지 배경을 부여해야합니다 적어도 다른 속성은 여기에 SVG가 있습니다

그래서 내가 할 일은 다음과 같습니다 앵커는 바다에있는 SVG를 실제로 목표로합니다 SVG를 목표로 삼을만한 공간을 여기에 넣으십시오 바다 섹션 그래서 우리는 위의 섹션에서 SVG있어 여기에 그것들을 나누어서 바다 부분과 SVG가 있습니다 우리는 그지도를 목표로 삼았습니다

그 배경 이미지는 당신이 배경을 커버하기 위해 그것을 말하고있는 색깔을 좋아합니다 이 컨트롤이 여기에있는 온라인 문서로 돌아가서 새로 고침하고 우리가 무엇을 얻었는지 확인하십시오 거기에 우리가 무언가가 제대로 작동하지 않습니다 당신 그게 제대로 작동하고있어 피지가 여기에서 제대로 작동하지 않는 것 같아

그냥이 사촌을 논평하자 이걸로 할 일이있어 그래서 이걸 가져 가서 가져 가야 해 떨어져 잠깐 만요 삭제 버튼을 누르십시오 나는 당신이 내가 알았던 것을 떠났습니다 그걸 처리하고 승리하고 거기에서 새로 고치십시오

우리는 실제로 우리의 텍스트를 가지고 있습니다 그것은 어딘가에 약간 이상한 위치에있는 포지셔닝입니다 저기에 내려 놓자 우리는 우리 섹션에 약간의 패딩 (padding)을 줄 수 있습니다 왼쪽의 여백은 중심에 둔다

그래서 나는 그것을 제공한다 100 명의 사진의 최상부의 약간의 덧대는 것 우리는 왼쪽에 SVG 마진을 주어야합니다 나는 그들의 여백 뒤에 그것을 할 것이다 우리가 가면서 50 %를 시도하자 그 ctrl을 사이트의 뒤로 저장하십시오

그래서 우리가이 섹션을 제공 한 것입니다 여기 100의 상단에 여백이 있으므로 100을 눌러야합니다 또한이 SVG를 제공했습니다 왼쪽 검색의 여백이 그것을 Wrights로 밀어 넣어야합니다 거기에 우리가 간다는 것은 너무 분명합니다

나는 Viji로 움켜 잡았다 우리가 원하는 위치에 놓으십시오 Chrome을 사용하고 있습니다 이제 막 f12 버튼을 누르십시오 여기에서 크롬 검사기가 나타납니다

오른쪽 클릭 한 번만 검사했습니다 요소에 대해 나는 우리 SVG가 무엇인지 여기에서 검사하고 언제 볼 수 있듯이 나는 노란색 섹션처럼 그 위에 마우스를 가져 가면 오른쪽에 그 여백이있다 Styles 탭이 강조 표시되어있는 한 여백이 있습니다 강조 표시하려면 마우스 왼쪽 버튼을 클릭하십시오 마우스 휠을 아래로 굴릴 수 있습니다

증분을 낮추고 우리가 원하는 위치에 놓을 것입니다 위 섹션을 보면 센터에 대한 더 많은 참조 정보를 얻을 수 있습니다 이건 조금만 우리는이 말을 한 순간에 바꾸고 싶습니다

그래서 우리는 이것을 재조정해야 할 것입니다 오른쪽에 보이는 패딩 29라는 숫자가 둥근 숫자로 잡히면 비파괴 적입니다 한번 새로 고침을하면 다시 어떻게 될지 그래서 우리가해야 할 일은 돌아갈 것입니다 거기에서 나는 단지 우리 마진을 30 % 나는 그것이 29 다라는 것을 알고있다 그러나 30까지 그것을 둥글게 할 것이다

그래서 사이트 붐에 되돌아 간다 우리는 그것을 가지고 있으므로 자신의 버전을 이제 자신의 것으로 바꾸고 싶습니다 우리는 무엇을 할 것인가? 그것이 여기에 다시 말하면서 나는 단지 그것을 나에게 안전하게 물결이있게했다 그래서 만일 우리가 우리 부트 스트랩 (bootstrap)을 실행하고 여기에 HTML 코드를 넣은 위치로 되돌아갑니다 괄호를 사용하면 흰색으로 강조 표시됩니다

당신이 원하는 무엇이든지 그리고 나는 그것이 우리가 그 ctrl을 저장하는 방법을 대문자로 만들거야 그 맛을 거기에서 바꿔야하는 것은 기쁜 것입니다 그것은 나에게 또 다른 물결을 말합니다 잘 조정하자 우리가 원하는 곳에서 그것을 얻기 위해 패딩 당신 거기서 우리는 약 15 %의 사람들이 괄호로 돌아가서 마진을 바꿉니다 15 %는 정확히 어디에 머물러야하는지 잘 모름 15 조금을 원할지도 모릅니다 어쨌든 괜 찮 아 요 괜 찮 아 요 그래서 우리가 원하는 다른 무엇이 괜 찮 아 요하지만 무엇 자신의 사진을 아주 멋지게 사용하고 싶다면 자신의 사진을 사용하고 싶지 않을 것입니다

쉬운 그냥 당신의 괄호로 가서 여기에 그림의 예술 URL을 넣어 난 그냥 그걸 그냥 버릴거야 나는 이미지를 사용하고 싶지 않아 나는 그것을 잡아서 삭제할 것이지만 그곳에있는 나의 세미콜론을 원한다 그 컨트롤이 사이트로 돌아가서 우리가 지금 가지고있는 것을 보자 진짜 재미 없다

그들의 색 대신 거기에 우리 자신을 넣자 실제로 거기 뒤에있는 무언가 그러나 당신은 아마 그것을 볼 수 없습니다 그래서 내가 그를 끌어들이 자고 거기에가는 연한 파랑 색이 사이트로 돌아가서 검사 만합니다 그 배경 배경을 마우스 오른쪽 버튼으로 클릭하면 Arkin 섹션 바다가 나타납니다

그 작은 색 탭을 클릭하면 배경색이 생깁니다 가서 자신 만의 색채로 원하는 것을 만들 수 있습니다 당신이 당신의 색깔에 만족할 때 네가 좋아하는 것에 만족할 때까지 그걸 가지고 놀아 라 그건 그냥 16 진수 코드 16 진수 코드 C를 복사하는 것과 같습니다 우리가 여기에있는 것을 대체하고 여기에있는 것을 대체하십시오

우리가 필요로하지 않는 배경 크기로 넣은 벌금 패딩 상판이 있습니다 배경 위치에 이미지가 없으므로 필요하지 않습니다 우리가 필요로하는 것이 아니라 다른 어느 것이 든 삭제할 필요가없는 높이 그 색을 유지해야 할 필요가 없습니다 색상을 사용자 정의 할 수 있습니다 여기에 실제로 일어나고있는 것은 매우 효과적입니다

여기에 있었고 그것을 뒤집어 놓았습니다 맨 아래에 파란색이 있고 맨 위에 검은 색이있었습니다 내가 네가 직접 만들고 싶어한다고 말했듯이 그래서이 색깔을 바꾸려면 검은 색 괄호로 돌아 가자 여기에 SVG가 있습니다

바로 여기에 SVG가 있습니다 우리가 여기서 바꿀 수있는 색 그래서 여기를 보아라 나는 아마 그 것을 단순한 것으로 바꾸고 싶지 않다 흰색 이것은 당신이 보게되는 채우기 코드 중 하나가 밝은 회색의 종류입니다 내가 색을 구해 놨어

여기 내가 많이 사용 했어 0으로 0 인 검은 색으로 바꾼다 잘 그것은 그것이 무엇인지에 관해 안다 다시 사이트로 이제 당신은 밑바닥이 계속되고있는 그 어둠이 만들어 졌음을 볼 수 있습니다 거기에 최고의 배경 때문에 그것을 볼 수 없다

그래서 그것을 바꾸자 경로를 채워진 다른 색상으로 다시 괄호로 당신이 여기 아래를 보시면 거기에 패턴이 있습니다 그녀는 일종의 밝은 파랑 색이야 내가 계속하고 있다고 생각해 여기에 괄호가 있으면 그 위에 마우스를 올리면 색상이 표시됩니다

녹색의 색이 그 것을 사이트에 다시 저장해 둡니다 거기에 당신은 지금 그것이 어두운 탑을주고 있고 그것은 파란색의 일종입니다 밝은 녹색과 어두운 파란색은 녹색을이 색상과 혼합하기 때문에 당신이 거기에 그 색깔을주는 것은 매우 효과적이지만 그 순간에 SVG가 있습니다 꽤 큰 것은 그것을 더 작게 만들어 봅시다 아마 우리가 사용하지 않을 그 코어에서 사용하고있는 SVG CSS 일 것입니다

이 둘은 같은 페이지에 있지만 문제를 해결하기 위해 여기 올라가 자고 아마 100 정도되는 것 같아 그래서 내가 갈거야 그냥 이것들을 삭제하십시오 이것은 우리가 이전에했던 것에서 나온 것입니다 SVG이기 때문에 아래에서 SVG에 영향을줍니다

그래서 당신이 편집을했는지 그리고 당신이하지 않았습니까? 작은 점을 저장하면 점이 없으면 저장됩니다 씽크가 그냥 거기 새로 고침하자 관리 할 수있는 크기 섹션 거기 그래서 당신은 그것을 물결 모양을 추가하는 방법이 텍스트를 영웅 섹션 또는 여기에서 수행 한 부트 스트랩 템플릿으로 이것은 HTML 템플릿에서 작동 할 것입니다 WordPress 사이트는 물론 CSS에 액세스 할 수있는 한 물론 할 수 있습니다 on-page CSS 또한 여러분이 즐겁게 지내기를 바랍니다

흥미가 있다면 YouTube 채널을 구독하고 공유하세요 웹 개발에서 아래를 내려다보세요 우리는 큰 자유를 얻었습니다 아래에 자습서가 있습니다 또한 몇 가지 큰 할인 혜택이있는 프리미엄 코스도 있습니다

YouTube 가입자의 경우 다시 한 번 살펴 보겠습니다 시스템 22 및 웹 디자이너의 기술 팁을 보내 주셔서 감사합니다 일

How To Create Bootstrap Navbar in WordPress Theme | Start to End Tutorial | Subtitles

Github 웹 사이트로 이동하여 zip 파일 다운로드 설명에 링크 다운로드 한 폴더의 압축을 푼 다음 wp-bootstrap-navwalker

php 파일을 복사하여 WordPress 테마 / htdocs / wordpress / wp-content / themes / your-theme-folder에 붙여 넣으십시오 테마 폴더에서 functionsphp 파일을 찾아서 편집기에서 엽니 다 wp-bootstrap-navwalkerphp 파일의 경로를 선언하십시오

새 메뉴 선언 새 메뉴 이름을 입력하십시오 예를 들어 '기본 메뉴' 메뉴 이름 뒤에 테마 이름을 입력하는 것을 잊지 마십시오 Github로 돌아가 Navbar 코드 복사 나중에 메뉴를 수정할 수 있습니다 그런 다음 편집기에서 headerphp 파일을 열고 코드를 붙여 넣습니다

WordPress 제어판 사이트 열기, 모양 탭, 다음 메뉴 선택 새 메뉴 만들기 새 메뉴를 선택하고 페이지를 추가하십시오 저장 메뉴 및 WordPress 사이트로 이동 부트 스트랩 Navbar가 표시됩니다

Bootstrap 4 Change Navbar Background Color On Scroll

안녕 얘들 아, 웹 디자인 비디오를위한 또 다른 부트 스트랩에 오신 것을 환영합니다 제이미입니다

시스템 22 및 웹 디자이너 기술 팁 진정 이 비디오에서 우리는 navbar를 가지고 노는 것을 계속할 것입니다 여기서 마지막으로 여기에 선형 그래디언트를 넣어서 볼 수 있습니다 화면 상단의 사진을 볼 수 있으며 모든 링크를 볼 수 있습니다 여기 아래로 스크롤하면 꽤 좋은 옵션입니다 CSS의 아주 쉬운 간단한 비트입니다

마지막 비디오에서 보셨 듯이이 비디오를 완전히 투명하고 거기에 영웅 단면이 나온 후 여기로 내려 오면 여기 도착하면 멋진 색상이되기를 원해요이 푸른 색을 그렇게 말하죠 맨 위가 투명하고 여기에 내려올 때 우리는 그것을 오염 시키려고합니다 잘하기가 어렵지 않습니다 우리는 JavaScript를 약간 작성해야합니다

하지만 너무 어렵지는 않다고 말했듯이 그렇게하겠습니다 내가 할 일을 한 번 보도록하겠습니다 이걸 투명하게 되돌릴 것입니다 그래서 브래킷 소프트웨어를 열면 거기에 선형 그래디언트가있는 배경이 있습니다 투명하거나 투명하게 돌아 가기 애들은 잘하고 빠른 말을 사이트에 가서 그것이 우리가 원했던 일을하는지 확인하십시오

아직 완전 무결하다 비록 당신이 그것을 볼 수는 없지만 그 링크는 여전히 괜찮습니다 우리가하고 싶었던 것은 지금 투명하고 모든 것을 투명하게하고 싶었습니다 아래쪽으로가는 길에 있지만 여기에 도착하면 모든 것을 볼 수 있기를 원합니다 우리는이 파란색 배경을 선택할 것입니다

나는 빨간색이 너무 많아서 그 파란색을 붙이자 그래서 무엇을 할까? 내가 할 일은 여기에 약간의 자바 스크립트를 써야한다는 것입니다 그래서 우리 괄호로 돌아 가자 나는 또 다른 CSS 클래스를 추가 할 것이고이 클래스 백그라운드 점을 점이라고 부를 것이다 스크롤 한 그래서 그것은 BG dot dot이 스크롤되어 틈이 생기지 않게하고 곱슬을 닫습니다

괄호로 묶고이 배경에서 실제로 배경색을 지정하려고합니다 그냥 복사 해 봅시다 그리고 우리가 사용했던 푸른 색은 10 ca였습니다 나는 모든 사람들이 10시에 캘리포니아에있을 것이라고 믿는다 그래서 우리의 괄호에 그 색을 사용합시다

좋아, 그렇게 보이네 투명하고 우리는 올바른 인형 어두운 BG 덕트 철자거야 우리는 BG가 어둡고 BG를 얻었습니다 이제는 어둠의 두루마리가 재미있게 나옵니다 실제로 자바 스크립트를 작성하고이 자바 스크립트를 아래에 붙여 넣습니다 비디오가 있다면 브라우저가 좀 가끔씩 나에게 알려줘야한다고 생각해

우리가 바닥에 가면 소스 물건을 게시하도록하는 이상한 여기에있는 스크립트 또는 여기에있는 모든 스크립트 나는 여기에 약간의 제목을 줄 것이며, 스크립트로 그것을 할 것이다 그 느낌표 커플라 하이픈과 같은 작은 태그가 거기 내가 말한대로, 아무도 나 한테이 일을해야만한다 스크립트의 비트 또는 스크립트 의이 비트 그래서 몇 가지 스크립트 태그를 열어 보자 어떤 스크립트를 작성하기 시작합니다 우리는 무엇을하고 싶습니까? 창에 집중하고 싶을 때 스크롤 할 때 무언가를하고 싶다 우리는 둥근 괄호에 달러 기호로 시작하고 우리는 창을 원한다

우리가 원하는 것은 무엇입니까? 우리가 실제로 여기에서 사용하기를 원하는 기능을 사용하면 또 하나의 라운드를 열 수 있습니다 브래킷과 바로 거기에 기능이 있지만 우리는 바로 Aronian function이었다 그리고 다시 둥근 괄호를 열고 닫으면 그 다음에 곱슬 괄호를 넣고 우리가이 곱슬 안에서 무엇을하기를 원하는지 말하십시오 괄호 너무 잘 그것은 단지 라인 아래로 이동했습니다 우리가 원하기 때문에 약간의 공간을주고 다른 달러 기호로 시작하십시오 에 우리는 navbar에서 일하고 싶었다

그래서 내가하는 일은 하나의 거꾸로 된 쉼표에 nav를 넣어서 우리가되고 싶었 기 때문입니다 우리 탐색 막대 작업은이 섹션을 탐색하십시오 당신 우리는 배경을 만든 두 클래스 사이를 전환하고 싶었습니다 어두운 배경이 스크롤되고, 우리는 그것을 토글해야한다 그 (것)들 사이에서 전환하는 것을 알고 있다는 것을 당신이 알고있는 방법입니다 토글하다 그리고 우리가 수업을 말할 정도로 우리는 클래스 갭 C를 가지지 않았다 그것이 더 둥근 괄호를 반올림하고 목표로 삼고 싶다

이 스크롤 된 요소는 우리가 거기에있어 다시 한번 우리는 이것을 하나의 거꾸로 된 쉼표에 넣을 것입니다 그 다음 우리는 Kama 손에 있었다 우리는 기본적으로이 일을 지시하면서 달러 기호를 원합니다 이 말은 내가 이것을 아래에 놓을거야 대부분의 내 동영상 및 스크롤 상단의 범위 그것이 단지 추측하는 것 이상의 이상일 때 나는 우리가해야 할 800을 말할 것입니다

그 둥근 괄호를 닫고 그 둥근 브래킷을 닫으십시오 세미콜론 세미콜론 제안을하면 더 추가 할 수 있습니다 그것을 저장하고 실제로 작동하는지 확인하십시오 그래서 그것들 사이를 토글해야합니다 두 클래스는 투명하고 푸른 색이어서 우리 사이트에 저장했습니다

새로 고침 시작 거기 아래로 스크롤 그것은 팝 그것은 팝업 조금 높이 올라간다 나는 아마 300을 처리 할 수있다 300 정도이며 즉시 팝음 한 번만 말해 보도록하겠습니다 750 개의 식사 또는 3/4 초만으로도 쉽게 먹을 수 있습니다 그렇게하지 마라 점프 점프 점프 그래서 우리가 여기로 돌아 가면 여기에 놓기를 시도해보십시오

밀리 세컨드는 초당 3/4이되어야합니다 당신은 라인 컨트롤에서 모두 멋지게 말합니다 우리는 약 3 개를 추가하고 싶다고 말했습니다 백 픽셀 우리가 그렇게하지 않았어 저장하고 사이트로 돌아가서 맨 위로 새로 고침하고 스크롤을 시작하십시오

내려가는 조금 늦은 사람도 있습니다 약 3/4 정도 걸립니다 나타나는 초 당신 조금이라도 당신이 그것을 읽을 수는 없다는 것을 알았습니다 그것을 읽을 수 있기 때문에 조금 전에 일어난 일 그래서 돌아가서 그냥 정리해 그것을 부르 자

우리는 사이트로 돌아가는 1080 개의 20 픽셀을 줄였습니다 다시 위로 돌아 가자 아래로 스크롤 시작 당신 왜 그런 일이 일어나지 않을지 생각해보십시오 조금 더 빨리 타이밍을 바꾸자 대신 반 초를 말하십시오

예, 다시 사이트로 돌아가서 새로 고침합니다 그리고 거기서 자라기 시작합니다 저는이 작은 막대를 옆구리에 사용합니다 당신 완벽한 완벽한 방법을 지금 볼 수 있습니다 거기에 몇 픽셀 더 줄여서 당신 훌륭한 예, 그게 행복합니다

절대적으로 괜찮아요 붐 때 영웅의 끝 부분을 얻으려면 그 푸른 색으로 변하게됩니다 우리가 원하는 바에는 네비게이션을 변경하는 방법이 있습니다 자바 스크립트와 CSS를 사용하는 스크롤의 색상 당신이 좋아하고 구독하고 있다면 유용합니다 웹 개발에 관심이 있다면 아래의 과정 중 하나를 선택하십시오

YouTube 가입자에게 큰 할인 혜택이 있습니다 아래 코스가 다시 한 번 모습을 드러내고 있습니다 제이미에서 왔습니다 시스템 22 및 웹 디자인 및 기술 팁을 보내 주셔서 감사합니다 일