이 강의로 돌아와서 마지막 비디오 마지막 부분에있는 캠프장 쇼 페이지의 스타일을 마무리하겠습니다.
나는 우리가해야 할 변화의 일부를 언급했다.
순수한 부트 스트랩으로 해결할 수 없습니다.
맞춤 스타일을 추가해야합니다.
따라서이 이미지의 너비를 변경하여 미리보기 이미지의 100 %를 차지하도록해야합니다.
여기에 약간의 패딩을 추가하고 싶었습니다.
이것은 패딩이있는 곳에서 보일 것입니다. 이미지가 전체 컨테이너를 차지하는 것을 볼 수 있습니다.
그리고 그것을 성취하기 위해 우리는 각각의 예에서 보여줄 수 있고 여기에 스타일 태그를 추가 할 수 있습니다.
하지만 그건 좋은 생각이 아닙니다.
따라서 우리는 첫 번째 사용자 정의 스타일 시트를 추가하고 이전 작업에서했던 것처럼 공개 디렉토리를 만들 계획입니다.
따라서 디렉토리를 공개로 설정하고 공용 디렉토리에 다른 디렉토리를 만듭니다.
이것은 하나의 스타일 쉬트라고 불릴 것이고 그래서 public slash 스타일 쉬트가 될 것이고 우리는 자바 스크립트를위한 또 하나의 자바 스크립트를 갖게 될 것입니다. 그리고 우리는 엔터를 치고 우리는 스타일 시트 안에 하나의 파일을 만들 것입니다 public sosh style 시트 슬래시와 우리는이 평균 Dotsie SS를 그렇게 부를 것입니다.
승인.
이제 우리는 그것을 열어보고 싶습니다.
그래서 우리는 그 스타일 시트를 주인공이 될 수 있도록 열어 주며, 몸의 배경색을 자주색으로 설정하고 저장하는 것과 같이 여기에 정말 명백한 것을 추가함으로써 시작해 봅시다. 그리고 나서 우리는 계속해서 이것을 연결시켜야합니다.
따라서 앱 케이스에서 우리는 여기에 정적 인 앱 도트 익스프레스를 사용하는 라인을 추가해야합니다.
그리고 나서 우리가 마지막으로 한 일은 단지 대중에게 추가하는 것이 었습니다. 그러나 실제로는 더 좋은 방법으로 그것을하고 싶지 않았습니다.
하지만 우리가해야 할 일은 밑줄을 추가하는 것입니다. 이제는이 스크립트가 실행중인 디렉토리를 참조하는 디렉토리 이름과 슬래시 이름을 강조해야합니다.
그래서 어떻게 생겼는지 보여 드리겠습니다.
콘솔을 사용하지만 로그에 언더 스코어가 있으면 이름에 밑줄을 표시하고 서버를 저장하고 다시 시작하십시오.
내가 여기에서 얻은 것을 주목하십시오.
이것은 캠프 슬래시 v 5의 lushly 전체 경로 작업 공간 디렉토리 이름입니다.
따라서 dir 이름과 슬래시 공개를 추가함으로써 잠재적으로 어떻게 든 현재 디렉토리가 바뀌면 우리가 예상하지 못한 이상한 일이 발생했기 때문에 우리는 더 안전합니다.
어느 쪽이 좋을까 그러나 결코하지 않는다. 그러나 만일 그것이했다면 당신의 이름은 항상 스크립트가 살고있는 디렉토리 일 것이다.
그래서 우리는 단지 더 안전 해지고 슬래시 공개를 추가하는 것입니다. 그리고 더 일반적인 방법 일뿐입니다.
차이점은 전혀 볼 수 없습니다.
그럼 우리가 구할거야.
우리는 이것을 제거 할 수 있고 우리가 한 일은 우리의 단순한 마음 속에 추가됩니다.
SS하지만 아직 연결하지 않았습니다.
그래서 우리는 공용 디렉토리를 제공했습니다.
우리는 현재이 디렉토리에서 모든 것을 제공하고 있습니다.이 디렉토리는 실제로는 하나의 폴더 스타일 시트이고 하나의 파일 만 우리에게 끝날 수 있습니다.
하지만 이제 그 파일에 대한 링크를 만들어서 헤더 파일에서 해 봅시다.
그래서 저는 C9 views에 Parshall의 slash hetter를 슬래시 (slash) 한 다음 부트 스트랩 (bootstrap) 이후에 머리 위로 올릴 것입니다.
나는 또 다른 링크 태그를 추가 할 것이고 이것은 H ref와 같을 것입니다. slash 스타일 시트는 메인 C S를 슬래시 한 다음 여기에 줄을 추가하여 스타일 시트가 될 것입니다.
승인.
그래서 우리는 현재 우리가 공개 디렉토리에서 제공하고있는 스타일 시트에 연결했습니다.
그리고 그것이 효과가 있다면 그것을 시험해 봅시다.
헤더가 부분적으로 포함 된 모든 페이지가 있기 때문에 모든 단일 페이지에있게됩니다.
그걸 시험해 봅시다.
우리는 방문 페이지로 갈뿐입니다.
우리는 거기에 갈.
모든 보라색입니다. 우리 캠프장을 보러 간다면 자주색 배경을 자주색으로 유지하고 싶다면 완전히 보라색 배경도 있습니다.
나는 그것을 다시 바꿀 것이다.
그러나 나는 우리가 얻은 스타일을 추가 할 것이며 그 스타일은 미리보기 이미지에 영향을 미칠 것입니다.
따라서이 미리보기 이미지는 물론 미리보기 이미지입니다.
이미지를 너비의 100 %까지 차지하게하여 쇼 페이지와 인덱스 페이지 모두에서 이미지를 만들려고합니다. 그래서 우리는 돌아가서 변경하고 업서스 평가를 할 수 있습니다.
이제 미리보기 이미지 내부의 모든 이미지를 선택하는 것으로 시작하겠습니다.
따라서 썸네일은 부트 스트랩 클래스이기 때문에 필요합니다.
그리고 그 사이에 공간이있는 이미지 태그는 미리보기 이미지 안에있는 모든 이미지 태그입니다.
그런 다음 너비를 100 %로 설정하기 만하면됩니다.
저장하고 새로 고침하고 쇼 페이지로 이동하면 이미지가이 미리보기 이미지의 100 %를 차지합니다.
그런 다음 우리는 썸네일 자체를 선택해야하는 간격을 없애고 자하는 곳에서 수정하기 쉽도록이 패딩 문제를 해결해야합니다.
미리보기 이미지 div는 패딩을 제거하고 그냥 0으로 설정합니다.
따라서 도트 섬네일 0을 채 웁니다.
저장합시다.
이 패딩에 눈을 떼지 마십시오.
이제 사라 졌어요.
그리고 우리가 우리의 인덱스 페이지로 돌아 가면, 이것들이 이제는 평평하다는 것을 알 수 있습니다.
거기에는 패딩이 없습니다.
나는 개인적으로 여기에 패딩이 없으면 그 사이에 공간이없는 것을 선호한다.
그러나 그것은 개인적인 취향의 문제이며, 만약 당신이 그 공간을 원한다면, 당신이 할 수있는 일은이 스타일을 모든 단일 축소판에 적용하는 것이 아닙니다.
대신 쇼 페이지에서 ID 나 특별한 클래스의 미리보기 이미지를 줄 수 있습니다. 그런 다음이 패딩 0을 해당 클래스에 적용하거나 ID 2 개만 적용 할 수 있습니다.
그러나 나는 그들 모두에게 그것을 할 것이고, 우리가 풀어야 할 다른 문제는 여기에 패딩입니다.
그래서이 캡션의 내부에서 우리가 그것을 검사한다면 우리가 만든 div가 여기에서 볼 수 있습니다. div 클래스 캡션이 가득 찼습니다.
여기에 약간의 패딩을 추가하고 마지막 비디오에서 결정한 숫자는 9 픽셀입니다.
그래서 내가 죄책감을 닫자.
여기로 돌아가서 모든 캡션 새끼를 선택하지 않고 미리보기 이미지 내에서 캡션 폴드 만 선택하려고합니다.
따라서 Dot thumbnail space caption이 가득 차고 9 픽셀의 패딩을 줄 것입니다. 이렇게 저장하면 페이지가 새로 고쳐집니다.
우리는 거기에 갈.
우리는 우리가 찾고있는 간격을 얻습니다.
괜찮아.
그것이 내가 원했던 전부입니다.
우리가 성취 한 것을 빨리 되짚어 봅시다.
우리는 새로운 파일 메인 나치 SS를 만들었고 스타일 시트의 공개 디렉토리 내부에 그 파일을 넣었습니다. 결국 스타일 시트를 더 많이 포함하게 될 것입니다. 특히 방문 페이지에 대해서도 스타일 시트를 더 갖게 될 것이고 여기에도 자바 스크립트가있을 것입니다.
그리고 실제로 우리가 상호 작용해야하는 공용 디렉토리를 사용하려면 명시 적으로 공용 디렉토리를 제공하라.
그리고 저는 여러분에게이 밑줄이 여러분의 이름을 강조해 주었고 가장 마지막 것은 그것을 헤더 파일에 포함 시켰습니다.