Add a Hover Animation Effect to a WordPress Site

얘들 아, 어때? 제 이름은 Jason Merrill이고 저는 크리에이티브 디렉터입니다 여기 WebTegrity에서

그래서 아니야, 나는 고리가 아니고 너희들 중 일부를 방해 할 수도있다 그러나 그녀는 팀 구성원들에게 조금 더 많은 동영상을 만들도록 요청했습니다 워드 프레스로 발전하고 워드 프레스에서 가능한 일종 웹 사이트 그래서 오늘 내가 너희들을 위해하고 싶은 것은 움직이는 법을 보여주는 것이다 귀하의 웹 사이트에있는 무언가, 효과에 대한 간단한 표지, 그리고하고 싶습니다

왜냐하면 많은 사람들이 다른 것에 관해서는 협박을 당하기 때문입니다 애니메이션 효과 그들은 자바 스크립트 또는 그런 것과 비슷한 것일뿐입니다 그래서 여기에 나는 카톨릭 신자가있다 여기 샌 안토니오에있는 학교에서 예를 들어 사용하고 싶습니다

마우스 오버 효과를 사용하여 무언가를 애니메이션으로 만드는 것이 얼마나 쉬운 지 알 수 있습니다 그래서 여기에 우리가 있습니다, 만약 내가 여기에 로고를 가져 가면, 단지 약간의 효과가 있습니다 의 물론 그것은 홈 페이지로 다시 연결되지만 그것은 단지 약간의 참여와 웹 사이트를 만들 수있는 이런 작은 것들 장난 그러나 내가 아래로 스크롤하면 그들이 나에게 준 의견은 Instagram 피드 위로 마우스를 가져 가면 애니메이션 효과가 없습니다 이 얼음 작은 커서 손을 클릭한다는 것을 알 수있는 방법이 없습니다

그래서 그들은 이 작업에 약간의 참여를 추가하는 빠른 방법이 필요했습니다 말 그대로 2 줄의 CSS로 처리 할 것입니다 그래서 나는 크롬 내부에서 그것을 검사하면 검사관 내부에서 일하게 될 것입니다 여기 스타일 시트 이제 스타일 시트에 대해 알고 있으면 변경 사항을 알 수 있습니다

내가 여기 만들면 백엔드의 스타일 시트에 추가해야 할 것입니다 그러니 제발 그것을 명심하십시오 이 게임은 좋은 장소이지만 결국에는 변경 사항을 영구히 유지하려면 실제 스타일 시트에 넣으십시오 그러나 그림 영역과 같은 모든 종류의 반복되는 요소에 관해서는 reoccurring 요소에 대한 좋은 시나리오이며, 정렬되지 않은 목록을 사용하고 싶습니다 이는 스타일 내에서 예측하고 사용하기 쉬운 구조를 추가하기 때문입니다

시트 하지만 네가 어쩌면 네가 이걸하려고하는 것 같으면 수집하고 목록 항목 대신 div를 사용하면 같은 방식으로 작동 할 수 있지만 제가 할 일은이 목록 항목으로 갈 것입니다 이것은 일종의 여기에있는이 이미지에 사용되는 상위 목록 항목입니다 이미 CSS를 가지고 있습니다 내가 할 일은 내가 잡을거야, 내가 이것에 호버 효과를 추가하고 싶습니다

그래서 저는 새로운 것을 만들 것입니다 이 inspector 요소 안에있는 CSS 행을 추가하면 목록 항목에 마우스를 가져 가면 의사 클래스가됩니다 그래서이 말을 내가 짚었을 때 말하는 것입니다 목록 항목, 내가 넣은 CSS 속성을 활성화하십시오 여기서 저는 변형 속성을 넣을 것이고 저는 저울을 사용할 것입니다

기능 이제 변형을 통해 할 수있는 여러 가지 작업이 많이 있지만 이 경우에는 내가 원하는대로 크기가 같아서 약간 당신은 변환으로 많은 것을 할 수 있습니다 옆에서 움직일 수 있습니다 옆으로, 뛰어 올라라, 다른 많은 것들이있다

네가 할 수있는 일 그래서 너에게 보여주기 위해 15로 그 스케일을 놓을거야 당신이 정말로 이런 것들을 폭발시킬 수 있다고 생각하지만,이 경우에는 너무 작아서 11처럼 갈 것입니다

그리고 거기에 우리가 간다 진짜 미묘하지만 여전히 애니메이션처럼 느껴지지 않습니까? 마우스를 가져 가세요 그것과 그것은 당신에게 튀어 나오고 그것은 훌륭합니다 그러나 그것을 얻기 위해서 애니메이션이 가지고있는 전환점, 우리는 여기서 부모 클래스에 가야합니다 우리는 속성 하나만 추가하면됩니다

이제이 속성을 마우스 오버 위에 추가하지 않습니다 효과가 있기 때문에 효과가있을 것입니다 그것을 밖으로 들락날락하게하고 싶다 여기이 영역에 추가 할 예정입니다 우리는 재산 전환을 사용할 것이고, 우리는 이것을 항상 사용합니다

나는 이것을 사용합니다 나를위한 표준과 같습니다 나는 이것을 말하기 위해 "all ease 03 seconds"라고 타이프한다 전환이 켜지거나 꺼질 때 발생하는 전환이므로 양방향으로 가고 싶습니다

전환 효과에는 여러 가지 유형이 있습니다 나는 생각하기 때문에 쉽게 사용하고 있습니다 그것은 최고입니다 그리고 저는 그것을 말할 수 있습니다 전환 시간은 0

3 초입니다 초 표준과 같습니다 매우 미묘하고 너무 빠르지도 않다 이제는 애니메이션처럼 느껴지는 멋진 효과를 얻었습니다 이전보다 훨씬 매력적이었습니다

그리고 우리는 말 그대로 CSS 두 줄; 그것은 매우 간단합니다 아무것도 두려워 할 필요가 없습니다 사이트 전체에이 효과를 추가 할 수 있습니다 그리고 변형만으로 작동하는 것은 아닙니다 이것은 전환 속성이기도합니다

마우스를 가져 가면 색이 변하는 것이므로 눈치 채실 것입니다 이런 종류의 멋진 전환점이 있습니다 마우스를 가져 가면 날카로운 점프가 아닙니다 그걸로 그래서 그것은 사이트에 많은 스팸을 실제로 추가하는 것과 같은 작은 것들입니다

이 비디오가 사람들에게 도움이되기를 바랍니다 물론 네가 아니란 걸 기억해 완료했으면, 이것을 복사하거나, 스타일 시트에 넣거나, 또는 다음과 같습니다 이미 내 스타일 시트에, 나는 그 마지막 줄을 잡아서 저기도 있습니다 그래서 너희들이 WordPress에 질문이 있다면 한동안 고리를보고 있던 당신들 중 일부는 더 고급, 코멘트 섹션에서 알려 주시기 바랍니다; 나는 그들을 기쁘게 생각한다

나 또는 다른 팀원 중 한 명, 우리는 매우 재능이 많습니다 개발자들은 당신이 얻고 싶어하는 것처럼 괴상하게되기를 원할 것입니다 WordPress와 함께 하지만이게 내가 가진 전부 야 얘들 아

지켜봐 줘서 고마워! 안녕!

Minify HTML CSS JS with PHP (Simple Minifier)

안녕하세요 오늘 내 채널에 오신 것을 환영합니다

제가 보통 얼마나 작은 지 보여 드리겠습니다 내 HTML CSS와 JavaScript는 기본적으로 minifier가하는 일은 모두 압축합니다 소스 코드는 귀하의 웹 사이트를 가볍고 빠르게 만들어줍니다 나는 간단한 작은 화자를 만들었다 Andy Chilton이 제공하는 온라인 서비스를 통해 javascript-minifier

com 및 cssminifiercom 단순화 기 모든 소스를 하나의 파일로 압축하여 웹 서버에 하나의 요청으로 여러 번 요청할 수 있으며 요청을 저장하면 귀하의 웹 사이트 로딩 시간 좋아, 간단한 웹 프로젝트 폴더를 열자 당신 모든 CSS 파일이 CSS 폴더 안에 있고 모든 자바 스크립트 파일이 js 폴더 안쪽 CSS 파일을 열어서 압축 파일이 아직 압축되어 있지 않은 것을 볼 수 있습니다

여기에 indexhtml을 HTML 폴더에 넣을 것입니다 indexhtml 파일을 편집하여 모든 CSS 및 JavaScript 제거 HTML 코드 내부의 링크 태그 당신이 가진 폴더를 축소하기 위해 링크 된 새로운 링크 태그로 대체하십시오 minify

css 및 minifyjs에 올바르게 연결하십시오 이제 우리는 설정을 준비했습니다 우리 프로젝트 폴더에 "간단한 minifire"를 추가하자 그리고 당신이해야 할 일은 minifier

php를 열어야한다는 것입니다 로컬 호스트 또는 웹 서버를 사용하여 minifier를 시작합니다 나는 프로젝트를 추가 할거야 폴더를 내 로컬 호스트 xampp 서버에 넣으십시오 브라우저 우리는 HTML 자바 스크립트와 CSS 파일을 보게 될 것입니다

여기서 우리는 코드가 올바른 순서 목록에 있는지 확인해야합니다 일반적으로 stylecss 및 mainjs와 같은 맞춤 코드가 마지막이어야합니다 그들은 다른 근원을 대체해야한다

그래서 나는 그들을 올바른 것으로 옮길거야 주문 목록 좋아, 이제는 간단한 minifier를 실행하고 기다려 보자 오류나 문제로 인해 문제가 해결되지 않으면 문서를 살펴보십시오 이제 끝났어 우리의 축소 된 출처를 확인해 봅시다

모든 파일은 주석으로 축소됩니다 윤곽 주문 목록에 문제가있는 경우 계속 수정할 수 있습니다 이제 우리 프로젝트를 다시 보도록하겠습니다 자바 스크립트 및 CSS 파일을 만들고 폴더 및 출력 HTML 파일을 축소하여 프로젝트 루트 폴더

제 경우에는 HTML CSS와 JavaScript 폴더를 삭제할 것입니다 하지만 이것은 자습서를 위해서만 필요합니다 자신의 파일을 백업 해주십시오 인덱스 파일을 열자 다 잘된 것 같습니다

출처를 보자 좋아, 모두 이미 이미 자르네, 너희들, 내 튜토리얼을보고 주셔서 감사합니다

Change Menu Font in WordPress (just the menu)

얘들 아,이 질문을 환영 하네 처벌 자 한테서 온거야

그래서 이것은 내가 좋아하는 의견 유형과 같다 당신은 감사의 창조적 인 철자법을 여기에서 조금 공손함을 필요로하지 않습니다 하지만 상처를 입지 않고 바로 비즈니스에 들어가서 메뉴의 글꼴을 변경하려면 어떻게해야합니까? 특이성이 있으니, 고맙습니다 처벌 자 우리는 동영상에 질문을 받았으며 데모 웹 사이트를 알고 있습니다 이것이이 웹 사이트에서 메뉴 글꼴을 변경하는 방법을 실제로 배우기위한 것입니다 그러나 그것은 또한 어떤 웹 사이트에서 작동 할 것이고, 그것은 좋을 것이다

나는 당신들에게 사이트 원점 사용자 정의 CSS 플러그인을 사용하도록 말하는 것만으로 생각했다 아래 링크를 클릭하면 전체 사이트에 연결됩니다 그리고 홈페이지의 일부를 클릭 한 다음 CSS를 변경하면 CSS가 작성됩니다 그러나 작은 기회가 있습니다 그것은 당신의 테마에서 작동하지 않을 것이므로, 우리는 우리 자신의 커스텀 CSS를 작성하는 구식 방식으로 할 것입니다 좋아요, 로그인하겠습니다

그리고 당신이 당신의 wordpress blog 또는 사이트에 관계없이 할 필요가있는 모두 또는 테마는 메뉴 자체를 마우스 오른쪽 단추로 클릭하려는 메뉴 글꼴을 변경하는 것입니다 따라서 메뉴 탭을 선택하십시오 어느 것이 든 상관 없습니다 나는 보통 첫 번째 것과 다른 것을 좋아한다 서비스를 마우스 오른쪽 버튼으로 클릭하고 검사를 클릭하십시오

일단 당신이 그렇게하면 당신은 HTML은 왼쪽에, CSS는 테마 개발자가 만든 오른쪽에 있습니다 그런 다음 오른쪽을 클릭하고 글꼴 위치를 찾으십시오 보통 아래로 스크롤해야합니다 글꼴 크기 float : left를보고 나서 마지막으로 글꼴 모음을 봅니다 정확히 우리가 찾고있는 것입니다

폰트 패밀리를 찾으면 그냥 켜고 끌 수 있습니다 CSS가 올바른지 확인하고 메뉴에서 작동하는지 확인합니다 완벽 할 때도 가끔은 체중을 바꿀 수 있다는 것을 알고있는 것처럼 다른 것들을 바꿀 수 있습니다 우리가 항상 확신 할 수없는 이유가 있지만 항상 대답이 있습니다 따라서 메뉴 글꼴 만 변경하려면 CSS 선택기를 클릭하십시오

한 번 클릭하면 강조 표시됩니다 그 작은 공간에서 마우스 오른쪽 버튼을 클릭하고 복사하십시오 이제 대시 보드로 돌아와서 맞춤 CSS 창으로 이동하려고합니다 그렇다면 사용자 정의 할 수 있습니까? 하지만 우리는 외형에 마우스를 대고 사용자 정의 CSS를 클릭 할 수 있도록 테마 junkie 사용자 정의 CSS 플러그인을 설치했습니다 우리가 작성한 몇 가지 사항이 있습니다

이미지 슬라이더 텍스트가 커집니다 좋아, 그럼 우리는 몇 가지 공간을 만들고 새로운 CSS를 쓸 수있다 그러나 좋은 소식은 우리가 복사했기 때문에 그것을 쓸 필요가 없다는 것입니다 단지 붙여 넣을 수 있기 때문입니다 다음으로 공간을 만들고 악어 브래킷을 열어 ​​악어 브래킷을 치면 새로운 글꼴로 입력하고 쓸 수 있습니다

폰트 패밀리로 표시되는 것은 무엇입니까? 콜론 이요 콜론 이요 그러면 요즘은 네가 원하는대로 바꿀 수있어 나는 호모를 좋아해 그래서 너는 그걸 시도해 글쓰기에 세미콜론 마침내 들어가서 닫힌 작은 괄호를 쓰십시오

이것들은 악어 브래킷이라고 불리는 이것들은 악어와 수학자를 풀어줍니다 어쨌든 우리는 지금 끝났어 새로운 글꼴을 선택했습니다 나는 그것을 구할 필요가있다 이제 사이트를 새로 고침하고 새 글꼴이 표시되는지 확인합니다

새 글꼴을 보지 못했다면 그것은 당신이 잘못된 것을 썼거나 캐싱이 켜져 있고 사이트의 최신 버전이 표시되지 않습니다 캐시 버전 I를 보여주고 있습니다 그것이 글꼴과 CSS를 집어 들고 있지 않은 두 번째 것 같아요 이제는 대시 보드로 돌아가고 싶은 당신에게도 일어날 수 있습니다 우리는 WP 슈퍼 캐시를 설정으로 이동하려고합니다

캐싱을 해제하는 이유는 사이트를 업데이트 할 때 캐싱을 해제하는 것이 좋기 때문입니다 이 기능을 끄고 새로 고침하기 위해 많은 변경 작업 수행 그리고 나는 그것이 효과가있다라고 말하는 것이 어렵다고 생각한다 그러나 제로 거기에서 우리는 간다 우리가 지금 내가 가지고있는 주된 nav가 Tahoma 다라는 것을 알았어 호마 한테 돌아 가면 다시 떨어질거야

철도 그들이 사용하지 않고 거기에서 당신이 괜찮아 졌기 때문에 여전히 여기에 쓰여진 것은 무엇입니까? 그래서 그것은 폰트 패밀리를 바꾸는 방법입니다 다른 말로하면 WordPress의 네비게이션 메뉴 항목의 폰트입니다 나는 또한 당신에게 메뉴 항목의 색상 및 기타 기능의 글꼴 크기를 변경하는 방법에 대한 힌트를 제공하기를 바랍니다 좋아 큰 것을 보아 주셔서 감사합니다 감사합니다

처벌자를위한 그 좋은 질문을 제안하고이 튜토리얼을 고무시키는 것은 괜찮습니다 내가 너를 위해 이걸 만드는 걸 좋아하기 때문에 너를 지켜봐 줘서 고마워 다음 번엔 널 모두 만날거야 괜찮아 그리고 CSS를 완벽하게 작성하고 싶다면 장기적으로는 좋은 아이디어이며 시드니 또는 테마 개발자가 수행 한 표준을 따르고 San Serif를 위해 Serie에서 작성할 수 있습니까? 약간의 쉼표가 있고 난 후에 나는 단지 어느 것이 집인지 기억하지 않는다

집은 인본주의 자 Sancerre 완벽한 그래서 돌아와서 산세 리프를 써라 좋아, 글꼴을 바꾸지 않을거야 너가 serif을 쓰고 serif 또는 sans을 만들 수있는 것처럼 그것은 아니다 세리프를 제거하고 세리프를 제거하십시오 그것은 좋은 CSS 스타일링으로 코드를 훌륭하게 유지하는 것입니다

집에 따옴표를 달아 완벽한 저장이 가능합니다 좋아, 우리는 사업에 뛰어나다

WordPress advanced css add background images to your sub menu

안녕하세요 여러분,이 비디오에 오신 것을 환영합니다 www

system22net 및 https://great-webdesigncom의 Jamie입니다 이 비디오에서는 고급 CSS를 수행하는 방법을 보여 드리겠습니다 사용자 정의를 통해 드롭 다운 메뉴를 무언가로 바꿀 수 있습니다

백그라운드에서 일부 이미지와 더 재미있는 예를 보여 드리겠습니다 여기에 우리가 좋아하는 것 같은 것을 만들거야 그래서 시작하자 우리가하고 싶은 일은이 메뉴를 수평으로 늘리고 싶다는 것입니다 그래서 우리는 실제로 여기에 우리의 링크 뒤에 이미지를 배치 할 수 있습니다

이것을 검사하다 그것은 오른쪽 클릭하고 검사 또는 f12이고 우리의 하위 메뉴가 있습니다 나는 아빌라의 cui를 좋아한다 그래서 그것이 우리가 여기에있는 것이다 내가 바라는 것이 그것이다

바로 거기에서 순서가없는 목록을 보자 그래서 우리는 너비를 늘려야하는 뷰포트 너비 인 폭 100VW의 CSS 속성 화면을 가로 지르다 오케이하자 너는 그걸 펴다 볼 수있는 것처럼 그걸 보자 그게 다 내가 여기서 찾고자하는 것과 내가 원하는 다음 일이야 내가 중심에 있는지 확인하고 싶습니다

순간, 우리는 그 파란색 테두리를 없애고 싶습니다 이 텍스트가 중앙에 있는지 확인하여 텍스트 정렬 센터를 수행하고 거기에있는 것을 확인하십시오 거기에 또 다른 하나는 우리가 여기에 중요한 속성을주고 싶습니다 그런 식으로하면 다른 쪽도 가리고 그걸 원하지 않아요 하늘색 테두리가 그 꼭대기에 있으므로 우리는 경계선 없음이라고 말할 것입니다

그거 없애 버려 조금 더 모양이 좋아지기 시작했다 이제 이것을 복사하고 테마 옵션으로 이동 한 다음 아래로 내려야합니다 테마 옵션 중 페이지 맨 아래에 Divi 테마 옵션이 표시됩니다 사용자 정의 CSS는 여기에 새 항목을 만들어 부 메뉴라고 부릅니다

나는 항상 여기에 제목을 써서 당신이 많은 것을보고 있다면 CSS를 사용하면 코드 편집기로 원하는 부분을 쉽게 찾을 수 있습니다 대개 번호가 매겨져있어 검사관을보고 찾으면 찾을 수 있습니다 안감 번호가 있지만 Divi에서는 여기와 모든 것을 얻지 못했습니다 여기서하는 일은 절대적으로 Divi를 사용하고 있다고 말한 것처럼 사용됩니다 끝내 주지만 이것은 WordPress 사이트에서 사용할 수 있습니다

약간의 테마가있는 사용자 정의 CSS 비트를 사용하면 하위 테마를 만들어야 테마가 업데이트되면 CSS가 덮어 쓰이지 않습니다 좋아, 그냥 방금 만들었던 것을 붙여 넣자 그게 필요 없어 그리고 우리의 변화가 새로 고침되고 나는 똑같이 머물러야한다고 말하지만 그 하위 메뉴는 여기에서 우리 제 3의 메뉴는 그것이 지금했던 것처럼 줄곧 나아야한다 거기에 우리는 간다 그러나 나는 그 사람들이 왼쪽으로 가기를 바란다

우리가 실제로 그 뒤에 이미지를 넣을 수 있도록 약간의 공간을주고 싶습니다 각자 나는 일정한 너비를 만들어서 괜찮은 이미지를 넣을 수 있기를 바란다 그것 뒤에 그래서 선택하자 메뉴 목록 항목 하위 메뉴가있는 바보가 메뉴 목록 항목 목록으로 가득 차게됩니다 목 거기에 우리가 원하는 것은 이제 우리가주고 싶어하는 목록 항목 목록 항목입니다

상단에 약간의 공간이있어서 이미지를 거기에 넣을 수 있습니다 padding top과 275 pix 그리고 더 깊게 만들어야합니다 여기에 이미지를 넣을 자리가있어 그리고 내가 그걸 상상해 보자 왼손쪽에 다시 뒤집어 씌울 필요가있어

그래서 어떤 콜론을 세미콜론으로 콜론을 넣으면 작동하지 않을까요? 그 왼쪽에있는 것이 더 좋을 것입니다 나는 그와 같은 200 250 무언가를 알고 있습니다 그래서 그들에게 폭을 넓혀 보겠습니다 225 사이에 2 25 픽셀이 완전히 다른 것처럼 보일 것이라고 생각하지 않습니다 하지만 그게 옳은데 우리는 멋진 이미지를 넣기에 충분한 공간을 가지고 있습니다

거기에 배경이 있으므로 그냥 CSS의 맞춤 CSS에 저장하겠습니다 왼쪽 클릭하고 드래그하여 선택하면 Ctrl C로 복사됩니다 우리가 지금했던 곳으로 내려 가자 왜냐하면 지난 두 사람은 필요 없어 괜찮은 사람들은 바꿀 수 없다

빠른 저장을 해보십시오 재미있는 부분이 있습니다 여기에 백그라운드에서 원하는 이미지가 있으므로 멋진 배경을 추가하고 싶습니다 여기 어딘가에서 이미지를 보자이 목록 항목을 보면 어떨까요? 여기 내가 그들 위에 마우스를 올려 놓는 동안 당신은 그들이 녹색으로 변하는 것을 볼 수 있습니다

패딩은 각자 개인 ID 메뉴 아이템 799-801과 7을가집니다 여섯 둘, 그리고 신분증이야 그래서 우리가 원하는대로 할거야 해시 태그 메뉴 항목을 수행 할 수있는 ID이기 때문에 사용자 정의 CSS에서 할 수 있습니다 번호를 입력 한 다음 원하는 속성을 추가하여 다시 돌아가십시오

맞춤 CSS로 몇 개의 해시 태그를 드롭합니다 ID 메뉴이기 때문에 – 항목 – 숫자에 관계없이 나는 그것이 799라고 생각했다 그렇지 않다면 1 분을 바꾸어야 할 수도있다 부정확 나는 그게 무엇인지 생각해 좋아, 우리가 뭘하고 싶은지 나나 이미지를 배경으로하고 싶어

그게 배경 이미지가 될거야 자본이 필요 없어 B 다시 돌려 놓자 이미지를 실행하고 배경 이미지로 URL을 주어야합니다 일부 일반 대괄호를 열려면 URL을 식히고 여기에 둥근 대괄호를 그 (것)들 사이에서 우리는 URL를두기 원하고 당신은 잘 말할지도 모른다 나는 어떻게 알 는가? 내가 넣고 싶은 그림의 URL 또는 모두가 할 이미지는 페이지는 테스트 페이지 또는 원하는 모든 종류의 페이지 일 수 있습니다 이 페이지를 유지할 필요가없는 경우 Divi 빌더를 사용할 필요가 없습니다

기본 편집기를 사용하고 미디어 탭 추가를 누르십시오 사진을 업로드했습니다 이미 여기에서 사용할 예정이므로 사진을 삽입하십시오 당신이 그것을 사용하고자하는 것은 텍스트로 올라가면 지금이 페이지에 있습니다 탭의 상단에있는 탭은 스크롤하여 모양을 찾으면 URL을 찾는 방법입니다

소스 SRC 거기에 그것은 우리가 그 오프닝에서 원하는 URL입니다 거꾸로 한 쉼표로 끝내고 둘 다 포함하면 거기에 거꾸로 된 쉼표를 거기에 모두 복사하여 ctrl C를 복사하여 사용자 정의 CSS로 돌아가십시오 그 두 작은 라운드 사이에 붙여 넣으세요 거기에 괄호를 써서 빠른 저장을해라 나는 그녀가 작은 세미콜론을 가지고 있는지 확인하지 않을 것이다 결국 우리는 더 많은 속성을 추가 할 것이고 당신이 필요로하는 것처럼 이제 다시 사이트의 모습을 보도록하겠습니다

그 첫 번째 이미지에 작은 이미지가 새로 고침 우리의 모습을 보자 드롭 다운과 좋은 거기에 이미지가 없다 나는 아이디어를 잘못 7 않았다 아홉 아홉, 아홉 아홉 아홉 가지를 보자 background-image : url 잘못된 것 오 URL 뒤에 간격이 있음을 알 수있다

우리는 URL과 첫 번째 둥근 괄호 사이에 간격을 두지 않기를 바랍니다 너는 아무런 격차도 없다 내 것과 같이 작동하지 않을 것이다 다시 시도하고 다시 시도하십시오 새롭게 하다 그리고 희망적으로 이번에는 거기에 우리의 이미지가 있습니다

좋아요 잠깐만 그래서 저는 똑같은 일을하려고합니다 거기에 다음 네 개의 이미지가있을 것입니다 오른쪽에있는 경계선을 보자

오, 포기해라 오른손 경계선이 단단한 2 개의 말 물론 화이트는 FFF보다 더 좋을 것입니다 그리고 우리는 그것을 줄 것입니다 바닥에 조금 더 두꺼운 경계선을 세 가지 선택을 해봅시다 우리는 사용하고있는 푸른 색을 사용하고 단단한 경계선을 원합니다

파선보다는 오히려 아마도 그 색깔이 같은 색깔이 될 것이기 때문에 아마 그것을 볼 수 없을 것입니다 드롭 다운보기 – 오, 당신은 그것을 볼 수 없다 괜찮아요 약간 진한 파란색으로 괜찮습니다 이제 우리는 나머지 부분을 씻어 내고 반복 할 것입니다 지금은 그냥 빨리 해보 죠 이걸 복사 할게요

그 둘을 원해요 여기에 속성이 있으며 사용자 정의 CSS에 추가 할 것입니다 좋아, 이제 우리는 그것이 우리가 원하는 것을 얻었습니다 메뉴 항목의 나머지 부분은 3 가지가 더 있습니다이 세 가지를 복사합니다

times one two three 이제 우리는 숫자를 바꾸고 싶습니다 8시 2 분 8시 2 분 7시 6 분 그리고 일곱 여섯 – 나는 믿는다 이제 내 이미지는 내가 해냈어 간단히 말해서 나는 1 2 2 3 우리는 거기에 4 명이있어 5 번 가자

나는 그것에 대해 많은 생각을하지 않고있다 분명히 당신은 당신의 생각을 두 개 더 넣고 싶습니다 두 가지는 괜찮습니다 그리고 사이트로 돌아가서 우리는 이제 그 모든 것들에 대한 이미지를 가지고 있어야합니다 새로 고침됩니다

우리가 지금 가지고있는 순간에 우리의 검사관을 없애자 흰색 선으로 구분 된 모든 것들에 대한 배경 이미지와 나는 우리가 분명히해야 할 일은이 배경색을 제거하는 것입니다 하위 메뉴는 CSS로 할 필요가 없다는 것입니다 실제로 우리가 페이지 편집 메뉴에서 그렇게하자 페이지에 내가 편집 페이지 버튼을 칠 수있는 곳으로 우리가 여기서 다룬 풀 너비 메뉴가 있습니다

그래서 우리가 열면 디자인에 가서 배경색을 바꿔야합니다 이 하나의 바로 여기 드롭 다운 메뉴 배경색 나는 그걸 끌어낼 수있다 투명하므로 페이지를 빠르게 업데이트 할 수 있습니다 변경 사항 미리보기 그리고 거기에 우리가가는 그런 배경이 있습니다 그래서 우리는 그것을 가지고 있습니다

하위 메뉴 배경에 일부 이미지를 추가하고 테두리를 추가하려면 CSS는 꽤 많이 있지만 일단 한 번 해보 셨으면 정말 쉽습니다 유용하다는 것을 다시 한번 발견했습니다 제이미는 시스템 22와 훌륭한 웹 디자인 통신이 동영상을 즐겼다면 좋겠다 보고있는 채널 덕분에 멋진 하루 되세요 오

How to Easily Add Custom CSS to Your WordPress Site

WordPress 웹 사이트에 맞춤 CSS를 추가해야합니까? 잘 지켜봐 이 비디오에서는 사용자 정의 CSS를 추가하는 데 사용할 수있는 두 가지 방법을 보여줍니다

WordPress 웹 사이트 첫 번째 방법은 단순히 WordPress 관리 영역에서 직접 사용자 정의 CSS 그 머리를 모양 섹션 및 워드 프레스 47부터 모든 테마 이것을 가지고 당신은 완전히 아래로 스크롤하고 추가적인 CSS를 보게됩니다 에서 여기에 CSS를 추가 할 수 있으며 CSS를 추가하면 실제로 예를 들어 항목이 변경되면 추가하겠습니다

이 CSS 코드와 템플릿에 붙여 넣기 스티커 제목이 방금 나를 위해 바뀌 었습니다 당신이 볼 수있는 변화가 마음에 들면 단순히 게시를 클릭하면 새로운 테마 CSS의 일부가됩니다 지금 이 테마 사용자 정의 도구를 사용하여 추가하려는 모든 사용자 정의 CSS를 기록하십시오 테마를 전환하면 테마를 전환 할 수 있습니다 그 내용을 복사하여 다음 주제에 추가 할 수 있도록하십시오

너는 사용한다 이제 방법 2는 특정 플러그인을 사용하여 사용자 정의 CSS를 추가하는 것입니다 를 사용하여 귀하의 사이트에 사용자 정의 CSS를 유지하기 때문에 CSS 플러그인은 꽤 좋습니다 당신이 주제를 바꿀지라도 관계없이 우리가해야 할 일은 우리에게 돌아가는 것입니다 대시 보드, 플러그인 영역으로 이동 클릭하여 검색 할 새 항목 추가 간단한 사용자 정의 CSS라는 플러그인입니다 이 때문에 아래로 스크롤하고 싶습니다

이 저자들이 찾고있는 도구이므로 지금 설치를 클릭하고 일단 우리가 그것을 설치하고 또한 그것을 활성화하자 일단 활성화되면 여기에서 당신이 모든 사용자 정의 CSS를 추가 할 수있는 모양의 사용자 정의 CSS에서 찾을 수 있습니다 당신은 당신이 바라는 방식으로 당신의 테마를 보일 필요가 있습니다 변경 사항 업데이트 CSS를 클릭하고 사이트를 방문하는 것이 좋습니다 너가 너의 위치를 ​​진짜로보고 싶으면 너가 사용할 수있는 상여 방법 호출 된 플러그인을 사용하여 프런트 엔드에서 CSS를 업데이트 할 수 있습니다 CSS 영웅

사이트의 프런트 엔드에서 변경이 가능하며 변경하려는 항목을 클릭하십시오 우리는 또한 리뷰가있다 당신이 볼 수있는 비디오를 볼 수도 있습니다 귀하의 웹 사이트에 CSS 변경 사항을 적용하기위한 위대하고 쉬운 방법 너 배웠어? 오늘의 비디오에서 나온 게 뭔가? 그렇다면 YouTube 채널을 구독하고 우리는 당신이 당신의 WordPress 웹 사이트를 관리하고 감사 할 수 있도록 도움이되는 팁을 보낼 것입니다

지켜보기 위해

CSS margins using simple CSS – Cascading Style Sheets Tutorial

안녕 얘들 아,이 간단한 CSS 비디오에 오신 것을 환영합니다 이것은 http://wwwsystem22

net의 Jamie이고 이 비디오의 http://web-design-and-tech-tipscom에서 약간의 여백을 보여줍니다 CSS 요소 중 마지막 부분에 CSS를 사용하여이 요소에 공간을주었습니다 하나는 패딩과 꽤 비슷하지만 마진은 늘리는 반면 패딩 (padding)은 엘리먼트 마진 안에 공간을 제공하여 주변 요소를 이동시키고 그들에게 우리 요소의 바깥 공간을 옮겨 놓으십시오 실제로 이것을 포장했습니다

다른 div의 여기에있는 열 우리가 대괄호 텍스트를 열면 내가 보여 드리겠습니다 편집기는 여기에 텍스트가없는 사람을 위해 우리의 원래 HTML과 그것을 가지고 있습니다 편집기이 대괄호 텍스트 편집기는 무료이며 아래에 다운로드 링크가 있습니다 동영상 여기에 우리의 칼럼 내가 여기 실제로 콘텐츠를 해왔습니다 다른 div에서 나는 상자의 클래스를 호출했습니다 그리고 나는 그것의 또 다른 클래스를 부여했습니다

우리 마진을위한 박스를 보아라 나는 단지 당신에게 여기에서 우리 원래의 것을 보여 준다 그리고 내가했던 모든 것이있다 다른 div 추가 이 div의 실제 콘텐츠를 여기에 넣었습니다 조금 더 깔끔하게 정리했습니다

조금 그 내용을주고 상자 클래스를 준 또한 그것을 주었다 실제로 우리 센터 상자를위한 C-box의 다른 클래스 이것과 함께 따라 템플릿이나 작은 데모를 다운로드하고 싶어하는 우리가 여기서 일하는 사이트는 아래 링크에서 다운로드 할 수 있지만 원래 사이트에없는 것처럼이 div를 추가해야합니다 우리 사이트로 돌아 가자 마진이 주어진다 이것이 센터이다 거기에 칼럼을 써 놓았습니다

C 박스 클래스를 제공했습니다 I 'll는 그것에게이 길 위에 그것을 밀 것이다 10의 사진의 말로하게하게되는 마진을 준다 그래서 if CSS 파일로 돌아갑니다 원래 사이트 파일은 다음과 같습니다 사이트를 다운로드 할 때 얻을 수있는 것 여기에 우리가 작업하고 있던 indexhtml 파일이 있습니다

대괄호 또는 텍스트 편집기를 사용하여 CSS 파일을 열면됩니다 CSS 폴더를 열면 여기에 우리가 만든 하단의 간단한 폴더입니다 이 사이트에서는 CSS 파일을 보면 대괄호로 열었습니다 이미 여기 있습니다 그리고 우리는 파란색이었던 두 번째 섹션에서 작업하고 있습니다

섹션 그리고 지금은 그 C 상자에 약간의 마진을 주어야하므로 C 상자는 우리가 준 클래스 였고 HTM에서는 여러 클래스를 가질 수 있습니다 요소를 보면 여기에 상자가 있고 클래스도 있습니다 C 상자의 클래스를 사용하면 원하는 경우 여러 요소를 가질 수 있습니다 이 상자들 중 하나의 한 측면을 제어하면 여기에 모두 같은 요소가 있습니다 상자 하나 하나에 대해 별도로 작업 할 수 있으므로 C 상자를 열고 닫을 수 있습니다

중간 괄호 사이에 약간의 공백이 있고 이제는 여백을 둡니다 우리는 왼쪽에서 왼쪽으로 작업 할 것이라고 말하고 20 픽셀을 줄 것입니다 20 픽셀 오른쪽으로 밀 것이다 지금 우리 사이트로 돌아가서 새로 고침을하면 상자를 보내 드리겠습니다 거기에 오른쪽으로 20 픽셀을 밀어 넣어야합니다

우리가 지금 우리가 박스 오른쪽 클릭을 볼 수 있도록해야하는지 검사를 치고 올바른 요소를 클릭하면 볼 수 있습니다 보시오 상자를 보시라 여백 속성이있다 실제로 Chrome 브라우저에서 실시간으로 처리합니다 Chrome 브라우저를 사용하고 있다면 다음을 사용하고 싶을 것입니다

Chrome 브라우저는 실시간 CSS 수정과 같은 훌륭한 기능을 제공합니다 좋아, 20 점 남았어 우리가 바꿀 수 있다면 너를 채우는 것과 같아 왼쪽 위 오른쪽으로 마진을하고 오른쪽으로하면이 방법으로 뒤쪽으로 밀었습니다 사촌 우리는 오른쪽에 여백을 가지고 있습니다

우리는 또한 위에서 아래로 할 수 있습니다 그리고 그것은 우리가 효과적으로 그것을 지금까지 밀었을 정도로 가장자리에 한계에 주어진다 마진에 대한 좋은 점은 네거티브 속성을 부여 할 수도 있습니다 나는이 방법으로 이것을 튀어 나오고 싶다 그래서 나는 그것이 20 포인트를 뺀 마이너스의 마진을 줄 수있다

많은 가격 책정 테이블이 얼마나 많은지 알게 될 것입니다 중간에 가장 인기있는 것은 하나, 약간 올려서 거기서 우리는 그것을 가지고 있습니다 그것에서 20의 후비는 물건을 펑하는 소리가났다 나머지로부터의 단지 작은 조각은 이것에서이다 여백 CSS가 CSS를 채우는 것보다 돋보이는 이유는 실제로 우리가 왼쪽 일을해야한다면 왼쪽 가장자리에 같은 여백이 겹칠 수 있습니다 40 픽을주고 왼쪽 상자와 겹쳐 져야 하는지를 확인하십시오 거기에 더 많은 50 픽스 괜찮아요 60 사진 우리는 그것을보기가 어렵습니다

그냥 오프셋을주었습니다 20의 아늑한 꼭대기에 오 그렇게 Marge intok 나는 거기에 간다라고 말할 것이다 당신은 그것을 겹쳐서 볼 수 있습니다 나는 그것을 제공합니다 빠른 경계면이 커버 할 것입니다 국경은 다른 작은 영상에있는 국경 CSS를 커버 할 것이다 2 개의 돼지가 단단하다는 것을 밝힌다

내 아이들은 녹색으로 서서 눈에 정도로 예쁘다 돼지를 위해 더 많은 것을 만들겠다 거기에 우리가 간다 그러면 그 점이 조금 더 돋보이게된다 거기에 무슨 일이 일어나고 있는지 그리고 우리는 그 세 가지 모두가있는 상자를 가지고 있습니다

상자에 넣으면 그 중역실이나 세명을 모두 넣으면 그냥 그곳에 복사 할 겁니다 이제 우리 모두가 그 경계를 가졌습니다 그걸 내가 아래에 계단식으로 내려 놓을 수 있으면 좋겠어 우리가 부를 다른 수업을해라 상자 보내기 상자 오른쪽 상자를 우리 상자라고 부르겠습니다

그냥 잘 잡아 야지 우리 상자 CSS에 올라와 그래서 나는 점의 꼭대기에서 닫는 중괄호의 맨 아래로 복사 CSS 스타일 시트로 이동하여 이것을 영구적으로 만듭니다 그래서 우리는 여기 두 번째 섹션에서 우리가 복사 한 것을 붙여 넣습니다 Chrome 브라우저는이 경계선을 잘라내어 놓을 것입니다

상자 CSS 컨트롤에서 2 번 잘라내 자고 거기에 깔끔한 공간이 있습니다 여기 세 상자 모두에 적용되는 상자가 있습니다 우리가 가서 상자를 열면 이제 그 컨트롤을 구할 수 있습니다 우리 사이트로 돌아가서 새로 고침하면 우리가 만든 것과 동일하게 유지해야합니다 그 영구적 인 지금 지금 우리는 단지 이것 아래에 여기에서 떨어 뜨리고 싶다

그래서 지금 나는 말했다 그 상자를 우리의 HTML이라고 부르는 클래스로 지정해야합니다 브래킷 소프트웨어와 거기에 첫 번째 책은 C 박스 여기에 두 번째입니다 나는 그 박스 클래스 다음에 새로운 클래스를 추가 할 것이다 나는 우리 박스를 모른다 당신이 원하는 무엇이라도이 물건이라고 부를 수있는 무엇이라도의 오른쪽 박스 중의 1 개

너는 너를 기억하고있어 너는 그들을 원하지 않는다 너는 그들을 원하지 않는다 이전에 사용한 적이있는 모든 것을 저장하고 저장해 두었습니다 CSS 파일 우리 박스의 새로운 클럭 클래스에서 그 사이에있는 곱슬의 공간

나는 그것을 줄 것이다 나는 그것을 줄 것이다 남은 여백 나는 40의 말로 마진을 주겠다 그러면 20 개의 더 많은 픽을 떨어 뜨릴 것이다 그래서 우연히 캐스 캐 이드해야합니다

이제 Ctrl 키를 우리 사이트로 다시 저장하십시오 새로 고침이 하나 40 위아래로 움직여야합니다 그래서 우리는 친절하게 움직입니다 거기에 중첩되는 것은 마진을 가지고 할 수있는 좋은 일입니다 사물이 돋보이게되거나되지 않는다

그리고 이것은 우리 C 박스가 마진 최고 20을 기억하고있다 한번 해보 죠 얼마나 멀리 떨어져 있니? 100 피스 죠 그것을 줘 – 200 pix 그리고 거기에 거기에 빼기 그래서 거기에 마이너스를 참조하십시오 거기에있는 또 다른 0은 우리 물건과 겹치는 방식으로 보입니다 또 다른 50 가지를 해봅시다

250 가지가 중앙 집중식이므로 250 가지가 더 있습니다 정확하지는 않은 것처럼 나는 240을 할 것이다 그냥 CSS 파일로 돌아 가면 변경하고 영구 사용하도록합시다 마진 최고 – 240 나는 우리가 괜찮지 않다고 말했고 나는 제거 할 것입니다 이게 정말 이걸로 중앙에 남겨두고 그냥 지우고 저장하면 돼

우리 사이트로 돌아가서 내가 새로 고침 할 때이 곳이 다시 튀어 나와야합니다 우리가 거기에 머물러 있어야한다 나는 다른 쪽 패딩이나 여백을 그냥 가져갈 것이다 왼쪽에 더 중앙에 위치해야합니다 이제 중간에 있어야합니다

좋아, 나는 그것이 훌륭한 bandy라고 말했고 좋은 효과가있다 너는 다른 단면을 겹치고있는 많은 사이트를 본다 이제 장치가 특정 레벨에 도달하면 토글됩니다 그러면 떨어질 것입니다 이 칼럼들이 부트 스트랩 컬럼이 점프 할 브레이크 포인트에서 우리가 언론에 넣어야 할 휴식 시간에 단일 항목으로 내려갑니다

그것들을 없애 버리는 질의 때문에 그들은 모두 밑줄을 긋거나 또는 몇개 넣는다 그 미디어 쿼리 아래에 더 많은 여백 CSS가 있지만 내가 말했듯이 다른 작은 동영상에서 미디어 쿼리를 사용하므로 빠르게 찾을 수 있습니다 여백 CSS의 시연이 동영상을 즐긴다면 정말 유용합니다 웹 개발에 관심이 있다면 우리 채널에 가입하십시오 아래의 과정 중 하나를 선택하십시오

일부 고급 과정을 많이 듣게됩니다 YouTube 가입자에게 할인 된 할인 혜택도 있습니다 거기서 다시 한번 이것은 http://wwwsystem22net에서 Jamie이고 http://web-design-and-tech-tips

com보고 주셔서 감사합니다 좋은 하루 되세요

How to add Custom CSS to WordPress (the RIGHT way! – Step by Step)

안녕! 이것은 WinningWP가있는 Topher입니다 이 비디오에서 우리는 한 번 살펴볼 것입니다

WordPress에 맞춤 CSS를 추가하는 방법 원하는 순간을 상상해보십시오 사이트의 모양이 약간 변경되었습니다 당신은 Google 조금 주위에 CSS의 작은 조각을 찾으십시오 그들은 이렇게 말합니다 "이걸 당신의 사이트에 넣으십시오

" 그러나 당신은 어디에 그것을 두는가? 그리고 그것이 올바른 방법으로 이루어 졌다는 것을 어떻게 알 수 있습니까? 보여 드리죠 먼저 CSS가 무엇인지 판단해야합니다 실제로는 두 가지 영역 만 있습니다 CSS를 적용 할 수 있습니다 하나는 일반 사이트 디자인을위한 것입니다

레이아웃 및 색상 등 다른 하나는 콘텐츠 디자인입니다 귀하의 특정 콘텐츠가 보이는 : 이미지 치료, 블록 쿼트 크기 등 앞으로 사이트 디자인을 변경하고 싶을 수 있습니다 전체적으로 새로운 주제를 얻으십시오 그럼에도 불구하고 당신이 만든 작은 비틀기를 유지하십시오 귀하의 콘텐츠가 어떻게 보이는지

내 말 뜻을 보여 드리죠 여기에는 아주 간단한 사이트가 있습니다 레이아웃을 쉽게 설명 할 수 있습니다 상단에 검색 창이 있습니다 헤더 막대, 내용 영역 및보기 힘들다

비어 있기 때문에 여기에 사이드 바가 있습니다 배경은 모두 흰색, 바닥 글은 회색입니다 검색 창은 검은 색입니다 이것들은 당신이 바꿀만한 것들입니다 귀하의 주제와 관련이 있습니다

여기서 우리는 우리의 내용을 가지고 있으며, 우리는 일정량의 이미지와 캡션의 오른쪽에있는 패딩은 기울임 꼴로 표시됩니다 그것들은 내용과 관련된 변화 일 것이며, 두 가지 방법을 살펴 보겠습니다 사이트 디자인 변경 사항은 다음과 관련되어 있습니다 당신의 주제가 말이됩니다 앞으로 테마를 변경하면 당신은 CSS를 유지하고 싶지 않다

어떻게 보이는지에 관한 전부이기 때문입니다 그래서 우리는 현재 테마를 바꾸고 싶습니다 그 주제를 없애 버리면 사라지게하십시오 두 가지 선택 사항이 있습니다 하나는 맞춤 설정 도구입니다

다른 하나는 stylecss를 편집하고 있습니다 어느 쪽도 매우 어렵지 않다 그러나 Customizer는 진정으로 가장 쉽습니다 내 말 뜻을 보여 드리죠

내 사이트의 헤더를 빨간색으로 변경하고 싶습니다 그래서 제가 할 일은 그 이름을 찾는 것입니다 Chrome에서 마우스 오른쪽 버튼을 클릭하여 검사합니다 그리고 바로 여기에 site-header-main이 있습니다 그래서 그것은 내가 바꾸고 싶은 것입니다

이제 여기 내 사이트의 맨 위에있는 사용자 지정 단추가 있습니다 사용자 정의 프로그램의 맨 아래로 스크롤하면 추가 CSS를 클릭 할 수 있습니다 그것을 사용하는 방법에 대한 약간의 지침이 있습니다 닫기를 클릭하면 바로 여기에 나타납니다 그래서 나는 site-header-main을 입력 할 것입니다

배경색은 적색으로 표시되는 중괄호로 표시됩니다 이제는 반드시 알 필요가 없습니다 내가 한 것처럼 검사관을 사용하는 법 f00이 빨간색임을 알 필요가 없습니다 어딘가에서 웹 사이트에서이 코드를 얻을 수 있습니다 그건 괜찮아

너는 할 필요 없어 직접 찾아내는 법을 알아야합니다 너 한테 어떻게 넣는 지 보여줄거야 이제는 게시 할 수 있습니다 이제이 탭을 닫을 수 있습니다

그리고 지금 나는 빨간 머리글을 가지고있다 원하는만큼 CSS를 넣을 수 있습니다 당신은 완전히 변경할 수 있습니다 원하는 경우 사이트의 전체 디자인 하지만 이제는 CSS를 편집하는 다른 방법을 보여 드리고자합니다

이전에 넣은 코드는 제거 할 것입니다 저장하고 이제 우리는 테마의 stylecss 파일을 편집하십시오 모양, 테마에서 대시 보드로 이동합니다 이제 활성 테마가 항상 왼쪽 상단에 있습니다

너는 단지 이것을하고 싶다 하위 테마를 사용하는 경우 특정 방법입니다 당신은 여기에서 볼 수 있습니다 하지만 내 활발한 테마는 메이크업 테마입니다 이렇게하면 make가 업데이트를하면 내 사용자 정의를 지우지 않습니다

내 아이를 주제로 할거야 내 자식 테마는 결코 업데이트되지 않습니다 아동 주제가 업데이트되지 않기 때문입니다 자녀 테마를 사용하고 있음을 확인할 수 있다면 다음 메뉴는 편집기 링크입니다 그리고 바로 여기 그들이 당신에게 말할 것입니다

내가 방금 어린이 주제에 대해 말한 모든 것 그러니 계속 클릭하고 이해하십시오를 클릭하십시오 당신이 자식 테마를 사용한다면 첫 번째 파일은 stylecss입니다

그것은 항상 그렇게 될 것입니다 그리고이 모든 텍스트는 당신의 주제에 대한 정보입니다 아무런주의를 기울일 필요가 없습니다 오른쪽 아래로 가라 너는 내가 여기에있는 것을 보게 될 것이다

"아래에 맞춤 스타일을 추가하십시오" 이 파일에서 편집하기 전에 나는 당신이 그것을 백업하는 것이 좋습니다 싶습니다 그리고 그것은 정말로 간단합니다 우리는 단지 복사해서 붙여 넣기 만 할거야 그것은 다른 파일 어딘가에

Windows에 있다면 Control + A를 할 수 있습니다 또는 Mac에서 Command + A를 할 수 있습니다 모든 것을 강조 표시합니다 Control 또는 Command + C를 눌러 복사합니다 텍스트를 저장할 수있는 다른 파일에도 붙여 넣을 수 있습니다

당신은 영구히 그것을 지킬 필요가 없습니다 너는 이걸 편집하는 동안 너만 지키고있어 이게 완벽하게되면 일단 끝나면 백업을 삭제하기 만하면됩니다 그러나이 하나가 고장 나고 길을 잃으면 간단히 이 파일을 지우고 복사 한 내용을 붙여 넣습니다 그래서 똑같은 코드를 붙여 넣을거야

내가 사용자 정의 프로그램을 사용하여 파일 업데이트를 클릭합니다 그리고 내 사이트를 다시로드하십시오 그리고 우리가 있습니다, 그것은 또한 빨간색입니다 이제 사용자 정의 프로그램이 아주 쉽다면, 왜 당신은 당신의 stylecss 파일을 넣고 싶습니까? 그 이유는 style

css 파일 사용자 정의 프로그램보다 훨씬 빨리로드됩니다 따라서 사용자 정의 프로그램을 사용하여 작업 한 경우 페이지가있는 인스턴스를 얻을 수 있습니다 완전히로드되고, 초 단위로 보입니다 그런 다음 빨간색으로 깜박입니다 그러나 style

css에 넣으면 그렇게하지 않습니다 내가 사랑했던 것들 중 또 다른 하나 맞춤 설정 도구에 대해 볼 수 있습니다 입력 한대로 변경 사항이 적용됩니다 따라서 나를위한 공통 워크 플로는 커스텀 마이저에 모든 CSS 작성하기 그런 다음 stylecss에 복사하여 붙여 넣으십시오

당신은 그렇게 할 필요가 없습니다 맞춤 설정 도구에 모든 것을 남겨 둘 수 있습니다 그리고 그것은 영원히 발견 될뿐입니다 방금 내 추천을 시작했다면 사용자 지정자 만 수행한다는 것입니다 빠르고 쉽고 쉽습니다

네거티브는 매우 작습니다 실험하고 발을 조금 젖히고 싶다면 WordPress의 내부 동작 그러면 stylecss 파일을 편집하십시오 이제 당신이 원하는 다른 종류의 CSS 함께 일하는 것은 귀하의 콘텐츠를 관리하기위한 것입니다 이제 이것을 위해 테마에 묶기를 원하지 않습니다

테마를 바꾸더라도 붙이기를 원합니다 항상 이미지 캡션을 원할 수 있습니다 당신이 사용하고있는 테마에 상관없이 이탤릭체로 나타내지는 않을 것입니다 이 경우 플러그인을 사용하려고합니다 Simple Custom CSS라는이 플러그인을 사용하고 있습니다

그런 다음 모양 아래에 사용자 정의 CSS 메뉴 항목이 있습니다 그리고 여기에 CSS를 간단히 입력 할 수 있습니다 그래서이 캡션의 이름을 알아낼 것입니다 마우스 오른쪽 버튼으로 클릭하고 검사합니다 그리고 wp-caption-text라고합니다

그래서 여기에 wp-caption-text를 입력 할 수 있습니다 글꼴 스타일 : 일반; 사용자 정의 CSS 업데이트를 클릭합니다 그런 다음 우리 페이지를 새로 고침 할 것입니다 그리고 더 이상 이탤릭체가 아닌 것을 볼 수 있습니다

이제 저는 2015 년까지 테마를 바꾸려고합니다 내 이미지 캡션이 여전히 기울임 꼴로 표시되지 않는 것을 볼 수 있습니다 아직 빨간 머리글의 전체 개념은 사라졌습니다 그 모든 코드가 다른 테마에 묶여 있기 때문입니다 검토를 위해 테마를 관리하려면 사용자 정의 프로그램을 사용하거나 또는 모양에서 편집기로 이동하여 스타일 시트를 편집하십시오

콘텐츠 용 CSS를 관리하려는 경우 그럼 당신은 유지 플러그인을 원한다 귀하의 CSS는 테마와 분리되어 있습니다 맞춤 CSS와 같은 것 WordPress에 대해 더 자세히 알고 싶다면 wwwwinningwp

com을 확인하십시오

Supercharged CommitLog WordPress: Loading CSS

[음악 재생] [작은 폭발] SURMA : 그래서 마지막으로 우리는 우리의 인덱스 PHP를 작성했습니다 그리고 우리의 블로그 게시물 목록을 렌더링하는 유일한 PHP 우리의 개인 블로그 게시물

다음 단계는 내가 염두에 두었던 디자인을 구현하는 것이다 나는 그것에 대해 너무 많이 이야기하지 않을 것이다 저장소에 가셔도 좋습니다 CSS 파일을 살펴보십시오 여기에 놀라움이 있어서는 안됩니다

그것은 단지 CSS입니다 대부분 Flexbox 및 일부 색상입니다 하지만 내가하고 싶은 말은 우리 휴대폰을 3G 네트워크에 연결하면 어떻게 될까요? 로드가 어떻게 수행되고 있는지 확인하십시오 3G 네트워크는 기본적으로 낮은 대역폭을 의미하며, 높은 왕복 시간 여행, 그리고 가끔 패킷 손실 이제 블록이 어떻게 작동하는지 살펴 보겠습니다

그래서 나는 블로그를 완전히 제거했다 이 전화에서 모든 캐시가 지워졌습니다 마치이 전화가 블로그를 방문한 적이없는 것처럼 보입니다 블로그를 새로 고침하면 1 초에서 2 초 만에 블로그를 볼 수 있습니다 내용이 있습니다

여전히 초보적입니다 마찬가지로 스타일이 누락되었지만 사용자가 읽기 시작할 수 있습니다 약 10 초 후에 꾸밈음이 거기, 헤더 로고가 완료되었습니다, 블로그는 3G 네트워크를 통해로드가 완료된 것처럼 보입니다 여기서 흥미로운 점은 백그라운드에서, 선적은 실제로 지금 계속되고 있습니다 다음 40 초 또는 50 초 동안 계속 그렇게 할 것입니다

하지만 그건 중요하지 않습니다 왜냐하면 사용자의 경우, 그것은 완료된 것 같습니다 로드가 완료되고 페이지와 상호 작용을 시작하십시오 그리고 그것은 바로 제가 이번에 얘기하고 싶은 것입니다 CSS가 어떻게로드되도록 구성 할 수 있는지에 대해 이야기하고 싶습니다

여전히 당신에게주는 동안 필요한 모든 창의적인 유연성 나는 여기서 아주 간단한 기술을 채택했다 페이지에있는 모든 구성 요소에 대해 구성 요소는 머리글이나 바닥 글과 같은 것으로, 또는 기사 – 두 개의 CSS 파일이 있습니다 그리고 그 중 하나는 중요한 스타일로 가득차 있습니다 다른 파일은 내가 게으른 스타일이라고 부르는 것입니다

이를 좀 더 자세히 설명하기 위해 예제를 살펴 보겠습니다 예를 들어 기사의 스타일을 살펴 보겠습니다 중요한 스타일을 보면, 당신은 우려되는 것을 발견 할 것입니다 레이아웃, 채색 및 시각적 공간 할당, 박스 그림자, 이미지 또는 글꼴에 관한 것 이러한 모든 꾸밈음은 게으른 스타일입니다

요소의 공간을 할당하려는 이유 가능한 한 빨리 게으른 스타일이 결국 들어와, 나는 뛰어 다니는 것을 시작하고 싶지 않아 화면에 우리는 모두 일부 웹 사이트에서 그것을 보았습니다 갑자기 읽고 시작하는 곳 아래쪽으로 이동하십시오

그리고 그것은 단지 성가신 일입니다 그래서 나는 그런 일이 일어나기를 확실히 원하지 않았습니다 그래서 모든 중요한 스타일은 레이아웃이 거기에 있는지 확인합니다 요소가 많은 공간을 할당한다는 것 평생 동안 필요하기 때문입니다 그러나 여기에 비틀기가 있습니다

중요한 스타일은 실제로 일치합니다 따라서 헤더 PHP를 살펴 본다면, 기본적으로 파일을 읽으려면 include를 사용하는 것을 볼 수 있습니다 그것을 HTML 파일 자체에 넣으십시오 그것은 WordPressy가 아닐 수도 있지만, 그래서 WordPress 개발자가 있다면 사과드립니다 이 접근 방식에 불쾌감을줍니다

하지만 효과가있어 충분히 좋을 것 같습니다 하지만 흥미로운 점은 사용자가 인덱싱 된 PHP 및 게으른 스타일에 대한 다른 모든 요청을받습니다 그리고 이것 저것 도착하기까지 영원히 걸릴 것입니다 페이지는 여전히 사용자에게 유용합니다 그들은 내 블로그 게시물을 읽을 수 있습니다

그리고 그것이 내가 원하는 것입니다 우리는 dev 도구로 이것을 에뮬레이션 할 수 있습니다 블로깅을 사용하여 그래서 JavaScript와 스타일에 대한 모든 요청을 차단할 것입니다 즉, PHP는 인덱스 만 가져올 것입니다 그리고 이렇게하고 페이지를 다시로드하면, 당신은 즉시 그 수를 볼 수 있습니다

아무 일도 일어나지 않습니다 그리고 나는 확실히 훌륭한 경험이 아니라는 것을 의미합니다 내가 원했던만큼 세련되지는 않습니다 그러나 블로그의 기능, 내 콘텐츠를 읽는 것이 여전히 효과가 있습니다 실제로 링크를 클릭 할 수도 있습니다

좋은 전환이 될 수는 없지만 여전히 효과가 있습니다 그리고 그것이 내가 생각하기에 정말로 중요하다고 생각하는 것입니다 이리 이것이 내 핵심 기술입니다 가능한 빨리 화면에 표시합니다

첫 번째 내용에 필요한 모든 인라인 창문, 그리고 게으른로드 다른 모든 당신이 이것을하고 필요한 모든 것을 넣으면 색인 된 HTML에 대한 첫 번째 응답에서 렌더링하려면, 방문 페이지가 무엇이든 상관없이 첫 번째 콘텐츠 – 전체 – 팬 측정 기준입니다 게으른 스타일에 대해 이야기 해 봅시다 내 머리글 PHP에서 조금 더 내려다 보면, 당신은 스크립트가없는 태그에 모든 게으른 스타일을 넣는 것을 볼 수 있습니다 이것은 잠시 동안 사용해온 약간의 트릭입니다

그리고 나는 자바 스크립트를 썼다 페이지가 완전히로드 될 때까지 대기하는 그런 다음 스크립트가없는 태그를 찾습니다 lazy-load 클래스 그리고 나서 그것은 모든 아이들을 찢어 버리고, 기본적으로, 그 시점에서 머리에 추가합니다 게으른 스타일의로드를 유발합니다

여기서 흥미로운 점은 사용자가 가지고 있다면, 어떤 이유로 자바 스크립트가 사용 중지되었습니다 또는 스크립트가 작동하지 않는 것입니다 스크립트 태그가없는 것입니다 이 아이들을 그 자체로 가능하게하십시오 no-script 태그의 목적

그리고 바로이 스타일을로드 할 것입니다 기본적으로 스타일로드는 블로킹 프로세스입니다 따라서 자바 스크립트를 사용하도록 설정하지 않은 경우, 당신은 여전히 ​​스타일 측면에서 완전한 경험을 얻을 수 있습니다 그러나 효율적으로로드되지는 않습니다 그러나 자바 스크립트를 사용하도록 설정 한 경우, 내 자신의 로딩 파이프 라인이 시작됩니다

훨씬 더 효율적으로 페이지를로드합니다 이것은 기본적으로 제가 여기서 선택하는 트레이드 오프입니다 아마도 그 대신에 주목할 가치가 있습니다 내 중요한 스타일을 인라인하는 중, 나는 또한 HTTP / 2 푸시를 사용하여 이러한 리소스를 푸시 다운 할 수있었습니다 클라이언트에게

하지만 제가 링크 한 Jake의 기사를 읽은 후에 설명에서, 나는 일종의 걱정이었다 너무 힘들어서 오른쪽으로 밀기가 어렵고 걱정하지 마라 브라우저 호환성 및 푸시 관련 정보 이미 필요하기 때문에 나는 정말로 필요하지 않다 캐시에 그래서 호환성과의 절충안을 선택했습니다

및 캐싱 효율성 말하자면, 그것이 바로 우리가하는 것입니다 다음 에피소드에서 이야기하려고합니다 헤더를 캐싱하고, 나에게 매우 중요한 것 그것은 당신이 많은 대역폭을 절약 할 수 있습니다 아직 다운로드하지 않은 것만 다운로드하면 캐시에서 동적 콘텐츠에 적용됩니다

[음악 재생]

Add social media icons pack code for html/CSS to blogger/wordpress and website🔥 facebook, twitter

css, css, css, 초보자를위한 css, css3, css 초보자를위한 CSS, 초보자를위한 글꼴, 멋진 글꼴 아이콘 추가, 멋진 소셜 미디어 아이콘, CSS 아이콘을 가져 오는 효과, 이미지가없는 아이콘 추가, 멋진 글꼴을 사용하여 소셜 미디어 아이콘 만들기, css cool hover 효과, 마우스 오버 애니메이션, html5 css3 자습서, html5 css3 팁과 트릭, 최신 css 자습서, html, html5, Font Awesome, 자습서 인스 타 그램 아이콘 png, 흑인과 백인 소셜 미디어 아이콘, 검은 색 소셜 미디어 아이콘, 이메일 아이콘 벡터, 페이 스북 지저귐 인스 타 그램 아이콘, 무료 PNG 아이콘, 무료 소셜 미디어 아이콘 벡터, 인스 타 그램 아이콘 벡터, 사회 아이콘 png, 사회 아이콘 svg, 소셜 아이콘 벡터 , 소셜 미디어 아이콘 다운로드, 소셜 미디어 아이콘 html, 소셜 미디어 아이콘 png, 소셜 미디어 로고 벡터, 소셜 미디어 png, 흰색 소셜 미디어 아이콘, html로 소셜 미디어 아이콘을 만드는 방법