돌아 오신 걸 환영합니다.
이 비디오에서 우리는 지금 당장 사이트의 스타일을 연구 할 것입니다.
끝 부분에 보이는 것과는 전혀 다른 곳입니다.
그래서 실제로 그것들을 나란히 비교합시다.
여기에 우리가 있습니다.
그래서 우리가 모서리를 반올림하여 여기에 약간의 간격을 더하는 큰 변화가 있습니다.
버튼의 스타일을 변경합니다.
그래서이 버튼들은 당신이 마우스를 가져갈 때까지 버튼처럼 보이지 않습니다. 그리고 우리는 호버 효과를 얻습니다. 우리 버튼은 확실히 끔찍합니다. 우리는 그들에게 어떤 호버 효과도 없습니다.
또한 그들 위치는 약간 잘못되었습니다.
당신이 볼 수 있듯이 내가 텍스트를 얻는 지 알 수 있겠지만 만약 내가 신선한 것이라면 텍스트가 양쪽면으로 모든 것을 푸시합니다.
또한 여기에 애니메이션이 있습니다.
그래서 내가 올바르게 클릭하면 잘못된 것을 클릭하면 얼마나 천천히 사라지는 지주의를 클릭하면 즉시 제거됩니다.
그래서 우리는 전환을 추가하고 싶습니다.
또한 우리는 여기에 H-1을 가지고 있습니다.
더 많은 공간을 차지해야합니다.
배경색을 변경해야합니다.
글꼴을 변경하고 싶습니다.
색상의 범위가 올바르게 지정되어 라인 자체에 있으므로 글꼴이 더 큰지 확인해야합니다.
또한 전체 본문의 글꼴을 변경해야합니다.
그래서 이들은 모두 같은 글꼴입니다.
그리고 마지막으로 여러분은 스트라이프와 바디의 끝 사이에 약간의 공간이 있음을 알게 될 것입니다. 그리고 솔루션 버전에서는 공간이 전혀 없습니다.
승인.
먼저이 H-1을 다루기 시작하겠습니다.
그래서 우리는 서브 라인 텍스트로 가서 H-1로 갈 것입니다. 그러면 솔루션에서 볼 수있는 것처럼 중간에 정렬 할 것입니다.
상황이 중심에 맞춰져 있습니다.
따라서 텍스트 정렬 센터를 추가하고 저장 및 새로 고침 만하면됩니다.
약간의 개선.
다음은 배경색을 변경하여 색상이 여전히 파란색이되도록 하겠지만 페이지를 새로 고침하면 잘 작동합니다.
그러나 다시 새로 고침을 한 다음 게임에서이기거나 새로운 색상을 클릭합니다.
그것은 검은 색으로 되돌아갑니다. 왜냐하면 자바 스크립트 코드는 자바 스크립트에서 어두운 회색의 검은 색으로 다시 설정하기 때문에 덮어 쓰기 때문입니다.
우리는 2 3 2 3 2 3이 색상으로 리셋 할 곳을 찾아야합니다.
여기에 우리가 간다.
우리는 단지 이것을 여전히 푸른 색으로 바꾸고 싶습니다.
그리고 그것이 새로 고침을 시작할 때 여전히 파란색으로 시작됩니다.
나는 새로운 색깔을 얻는다.
그것은 여전히 ​​파란색으로 유지됩니다.
승인.
그것이 바로 그 것입니다.
이제 우리 H-1의 양쪽에있는 모든 검은 색 공간을 없애자.
따라서 H-1에서는 왼쪽과 오른쪽의 여백 여백을 모두 없앨 것입니다.
그렇게 할 때 어떤 일이 일어나는지 주목하십시오.
그 검은 공간은 왼쪽 위와 오른쪽에있는이 작은 간격을 제외하고 모든면에서 사라집니다.
그리고 그것은 실제로 몸에서 오는 H-1에서 오는 것이 아닙니다.
그래서 우리가 몸에 가서 여백을 0으로 줄 수 있다고 고쳐주십시오.
그리고 지금이 작은 틈에주의를 기울여서 내가 새롭게 할 것이고 사라지는 것이죠.
그래서 우리의 하얀 줄무늬는 여기이 버전에서와 같이 모든면에서 옆으로갑니다.
승인.
다음은 재미에 초점을 맞추어 보겠습니다.
따라서 재미는 모든 요소에서 동일합니다.
버튼과 H-1 그리고 여기의 스팬은 모두 같은 폰트이고 약간 다른 폰트 가중치입니다.
그리고 우리는 Avenir이라고 불리는 시스템 vaunts에 내장 된 폰트 중 하나를 사용하려고합니다.
그래서 글꼴 패밀리 Avenir이 될 것입니다.
그것은 모든 시스템에서 작동하지 않을 수도있는 글꼴입니다.
그래서 우리는 몽 (Mont)이라는 또 다른 옵션을 추가 할 것입니다. Serat 그냥 그렇게.
그래서 우리는 분명히 똑같이 보이지 않는이 재미로 끝납니다.
그리고 그것은 글꼴 체중에 달려 있습니다.
그래서 우리는 H1이기 때문에이 폰트의 무게를 바꿀 필요가 있습니다.
기본값은 굵게 만들거나 700 또는 800 또는 900의 글꼴 체중을 갖도록하는 것입니다.
우리가하고 싶은 것은 폰트 가중치를 보통으로하는 것입니다.
그래서 우리 H-1이 글꼴 체중을 늘리고 저장합니다.
새롭게 하다.
그게 가까이에있어.
이제 우리가 바꿀 필요가있는 몇 가지 다른 것들이 있습니다.
첫 번째는 이것이 모두 대문자이며 텍스트 변환 대문자와 저장을 사용하여 RCSS로 그렇게 할 수 있다는 것입니다. 그래서 이제는 더 가까이서 보게 될 것입니다. 또한 우리의 색이 자체 선에 있고 우리가 스팬의 스타일을 약간 다르게하고 싶습니다. 하기 위해서.
우리는 여기서 우리 팀으로 가서 사실상 우리는 노인을 조금 편집 할 것입니다.
그리고 이것이 우리가이 일을 할 첫 번째 방법입니다.
우리는 Pearcey SS로 다른 작업을하는 방법을 보게 될 것입니다.하지만 우리는 위의 스타일을 한 줄에 그 위대한 스타일이있는 곳부터 시작하여 휴식을 취하기 시작할 것입니다.
우리는 abr 태그를 사용할 수 있습니다. 실제로 스타일에 대한 약간의 시선을 사로 잡은 스타일은 아니지만 약간의 리턴과 줄 바꿈을 추가하는 것이 빠르고 쉬운 방법입니다. 줄 바꿈.
그래서 우리는 위대한 후 하나를 원합니다. 우리는 휴식을 원했고, 그리고 나서 우리의 스팬을 원했고 그리고 나서 우리는 또 다른 휴식을 원했고, 그 다음에 게임을 색칠했습니다. 그리고 우리가 새로 고침하면 우리는 점점 더 가까워지고있는 것을 볼 수 있습니다.
이제 스팬을 훨씬 더 크게 만드는 데 집중해야합니다.
그래서이 밴드는 컬러 디스플레이에 대한 아이디어를 가지고 있습니다.
그래서 우리는 R C S S로 가서 색상 표시를 선택합니다.
이드 컬러 디스플레이를 선택한 다음 글꼴 크기가 H-1 글꼴 크기의 200 %라고 말합니다.
새로 고침하면 더 큰 글꼴 크기가 적용됩니다.
그리고 우리는 점점 가까워지고 있습니다.
우리는 여기서 휴식을 취하고 있습니다.
우리는 여기서보다 우리가 줄 사이에 더 많은 공간을 가지고 있음을 알 수 있습니다.
그래서 우리가 그 일을하기 위해 할 수있는 몇 가지 일이 있습니다.
첫 번째는 선 높이를 변경하는 것입니다.
그래서 우리는 줄 높이 1.1을주고 저장할 것입니다.
그리고 우리의 버전을 다시 살펴보고 새로 고침을하면 조금 줄어드는 것을 볼 수 있습니다.
그러나 이제 우리는 상단과 하단의 공간을 잃었습니다.
우리는 거기에 약간의 공간이 필요합니다.
그래서 우리가 할 일은 들어가서 패딩을 더하는 것입니다.
그래서 우리는 왼쪽과 오른쪽이 아닌 위쪽과 아래쪽에만 패딩을 추가 할 것이고 위쪽과 아래쪽에 20 픽셀을 넣을 것입니다. 그래서이 패딩 20 픽셀과 0처럼 할 수 있습니다.
우리는 또한 20 픽셀 위쪽으로 채우고 아래쪽으로 패딩을 할 수도 있습니다.하지만 이것은 새로 고침을하는 더 짧은 방법이며, 이제 거의 다 볼 수 있습니다.
그래서 우리의 머리글은 괜찮아 보입니다.
우리는 올바른 글꼴을 올바른 글꼴 색으로 대문자로 올바른 배경색으로 만듭니다.
내가 플레이 할 때 올바른 표정이 유지되는지 확인합시다.
우리가 해결해야 할 다음 일은이 탐색 바에있는 버튼입니다.
그래서 우리는 그것들을 개선하기위한 갈 길이 멀다.
우리가하고 싶은 첫 번째 작업은 테두리를 제거하여 버튼 주변에이 경계가 분명하지 않도록하는 것입니다.
배경색도 없애고 싶습니다.
따라서 여기서 볼 수있는 배경이 없어야합니다.
마우스를 가져갈 때까지 또는 우리가 선택할 때까지 기다리는 것입니다.
또한 글꼴 패밀리가이 글꼴과 같은지 확인하려고합니다.
시작하겠습니다.
그리고 모든 버튼을 선택하겠습니다. 버튼을 클릭하면 border none이라고 말하고 저장합니다.
새로 고침 할 때 버튼에주의하십시오.
승인.
그래서 우리는 이제 국경이 없다.
그러나 우리는 여전히 배경색을 가지고 있습니다.
이제는 같은 배경을 사용하지 않고 저장하고 새로 고침하고 더 가까워지고 있습니다.
이제 일반 텍스트 만 있습니다.
그리고 우리는 여기에있는 것처럼 모든 텍스트를 대문자로 만드는 것으로 시작할 것입니다.
그래서 우리는 텍스트 변형을 다시 사용하여 그 라인을 붙여 넣기 위에 복사하고 새로 고칩니다.
이제 버튼은 모두 대문자입니다.
다음으로해야 할 일은 버튼이 div 스트라이프 컨테이너의 맨 위에서 맨 아래로가는 것을 확인하는 것입니다.
지금은 공간의 일부만 차지하므로 높이를 100 %로 설정하면됩니다.
그리고 그것은 우리가 훨씬 더 가까워지는 것을 볼 수있는 것처럼 그것이 포함 된 요소의 100 퍼센트를 차지할 것임을 의미합니다.
이제는 일부 색상을 변경하여 글꼴 크기를 글꼴 두께로 변경 한 다음 아직 설정하지 않은 호버 효과를 변경해야합니다.
그 다음으로 할 일은 폰트가 약간 더 무거워 지도록하고 색상을 파란색으로 변경하는 것입니다.
그래서 폰트 무게는 칠백 가지가 될 것이고 색깔도 여전히 푸른 색이 될 것입니다.
그리고 새로 고침을 확인해 봅시다.
그래서 약간 더 오래갑니다. 그리고 여러분은 또한 색깔이 지금 우리가 여기서 가지고있는 것과 같은 색깔의 푸른 색으로 바뀌 었음을 볼 수 있습니다.
글자 간격을 1 픽셀로 변경하는 것은 아주 사소한 변화입니다.
그리고 새로 고침 할 때주의를 기울이면 각 편지 사이에 약간의 간격이있는 것을 볼 수 있습니다.
Leslie는 글꼴 크기에 초점을 맞추어 보겠습니다.
그들은 조금 작게 보입니다.
그래서 폰트 크기를 사용하고 상속 받도록 설정합니다.
그리고 새로 고침하면 글꼴 크기를 상속받을 수 있고 명시 적으로 글꼴을 말할 필요가 없습니다.
이제 살펴 보겠습니다.
가장 큰 차이점 중 하나는 현재 서로 다른 간격을두고 있다는 것입니다.
페이지가로드 되 자마자 여기에 공간이 있습니다.
그러나 버튼을 클릭하기 전까지는 그 공간이 없습니다.
그래서 우리가해야 할 일은 실제로 여기에 스팬 스타일을 적용하는 것입니다. 그리고 그 스팬을 메시지라고하며, 우리는 그 공간을 차지할 수있는 몇 가지 속성을 제공하고 싶습니다. 우리가해야 할 일은 하나만 바꾸면됩니다. 실제로 재산.
그래서 우리는이 팬인 우리의 메시지를 표시하도록 선택할 것이고 우리는 display 속성을 줄 모양으로 바꿀 것입니다.
BLOCK 그래서 내가 새로 고침하면 더 큰 차이를 눈치 채지 못할 것이다.하지만 20 %를주고 저장하고 새로 고침해야 할 필요가 있기 때문이다.
이 화면의 20 %를 차지하는 항목이 없어도이 범위가 적용됩니다.
그래서이 요소들을 우리가 원하는 부분에 밀어 넣습니다.
살펴보고 비교해 봅시다.
좋아, 꽤 가까워 보인다.
이제 우리는 선택한 클래스를 올바른 색상과 호버 효과가 일치하도록 만드는 작업을 수행합니다.
이제는 버튼에 들어가서 호버 (hover) 효과를 추가 할 것입니다.
그래서 우리가해야 할 일은 Colan Huffer 버튼을 추가하는 것입니다. 글꼴 색을 흰색으로 변경하고 배경색을 파란색으로 변경해야합니다.
그래서 우리는 기본적으로 색상을 반대로하고 저장하고 새로 고칩니다.
내가 가리키면 그 효과를 볼 수 있습니다.
완전한.
우리가 선택한 수업은 똑같이 보일 것입니다.
그냥 스타일을 복사하려고합니다.
선택 될 때와 비교할 때 우리가 어떤 것을 떠올리게 할 때 차이점은 없습니다.
그들은 똑같아 야합니다.
그래서 당신은 옳은 것처럼 보일 수 있습니다.
파란색 배경과 흰색 텍스트 색상이 표시됩니까?
그리고 움직일 때 그것은 사라집니다.
약간의 차이가 있습니다.
솔루션 버튼 위로 마우스를 가져 가면 해당 색상이 희미 해집니다.
그것은 나의 버전에 대한 단순한 스위치가 아닙니다.
그것은 단지 즉시 토글합니다.
버튼 선택기에서 C S 전환 속성을 사용하여이 문제를 해결할 수 있습니다.
우리는 전환을 작성하고 전달할 것입니다.
두 개의 인수는 두 개의 값이고 첫 번째 인수는 전환하려는 인수이고 우리의 경우 모든 속성에 인수를 추가 한 다음 다음 인수는 얼마나 오래 걸릴지를 나타냅니다.
그래서 나는 처음에 2 초 동안 그것을 과장 할 것입니다.
다시 말해 전환 속성은 CSX에 색상 변경이나 글꼴 크기 변경 및 속성 간의 전환 효과를 적용하는 방법을 알려줍니다.
그래서 제가 여기서 말한 것은 우리의 경우 실제로 색상과 배경이되는 버튼에 속성이 언제든지 변경된다는 것입니다.
따라서 색상이 변경되고 배경색이 변경 될 때마다 2 초 정도 걸릴 것이고 새로 고침하면 보게 될 것입니다.
그리고 내가 떠 다닙니다.
오 아직 작동하지 않습니다.
나는 여기에서 나의 s를 놓치고있다 2.00 s.
이제 새로 고침하고 마우스를 가져 가면 페이드 인하는 데 2 ​​초가 걸립니다. 선택한 클래스를 추가하기 위해 클릭하면 2 초가 걸리며 나가면 페이드 아웃하는 데 2 ​​초가 걸립니다.
그래서 2 초는 확실히 길다.
나는 약 3 초를 목표로하고 있다고 생각한다.
그걸 시험해 봅시다.
우리는 거기에 갈.
그것은 나에게 꽤 좋아 보인다.
마지막 큰 일은이 정사각형에 둥근 모서리를 가져 오는 것입니다. 둥근 모서리에 Border radius라는 속성을 사용하는 방식입니다.
그래서 당신이보고 싶다면 중앙 문서를 열어 놓았습니다.
좋은 읽을 거리 야.
그러나 그들은 반경을 가지고 보드로 할 수있는 다른 것들에 대한 몇 가지 예를 보여줍니다.
그래서 우리가 할 일은 약간의 경계 반경을주고 이것들은 사각형입니다.
그리고 우리가 목표로하는 것을 살펴 보겠습니다.
그래서 그것들은 우리가 얻고 자하는 것입니다.
그래서 약간의 완만 한 곡선이었습니다.
우리의 정사각형 클래스에 올라가서 경계 반지름을 지정하고 시작하기 위해 과장된 것을하십시오. 우리가 50 퍼센트를하면 어떻게되는지 보여 드리겠습니다.
서클을 사용하고 실제로 서클을 사용하는 것을 선호 할 수 있습니다.
나는 그들을 사용하는 것을 고려하고 있었지만, 결국이 둥근 모서리 사각형을 선호했고 내가 사용한 숫자는 15 퍼센트였다.
그리고 우리는 그것들을 두 번 점검하고 비교할 것입니다.
좋아 보이네.
15 퍼센트이지만 원한다면 5 퍼센트를하고 새로 고침하면 어떻게되는지 보여 드리겠습니다.
우리는 아주 약간 둥근 모서리를 얻습니다.
그래서 저는 15 개의 새로 고침으로 돌아가서 멋진 둥근 모서리가 생기지 만, 애니메이션 효과를 얻으려고 노력해야합니다. 왜냐하면 내가 이것들 중 하나를 클릭하기 때문입니다.
호버 효과가 페이드 인하듯이 색상이 바뀌는시기에주의하십시오.
이를 달성하기 위해서는 전환 속성을 사용해야하지만 약간 다른 방법이 필요합니다.
그래서 저는 사각형으로 갈 것입니다. 우리가 전환하고 싶은 유일한 것은 배경색이나 배경입니다.
다시 2.0 초의 시간을 들여서 어떻게 보이는지 봅시다.
그래서 나는 새로 고침을하고 이것들 중 하나를 클릭하겠습니다.
페이드 아웃하는 데 2 ​​초가 걸리는 것을 볼 수 있습니다.
그래서 우리는 그렇게 오래 지속될 것을 원하지 않습니다.
어쩌면 아마도 6 점 째로 갈 것입니다.
해보자.
승인.
그것은 합리적으로 보인다.
배경이 바뀔 때마다 0.6 초가 걸릴 수 있습니다.
그러나 다른 속성이 변경되면 속성이 변경 될 때 우리가 말한 버튼처럼 애니메이션을 적용하지 않으면 3 초가 걸릴 것입니다.
우리는 배경만을 목표로 삼고 그 변화가 있습니다.
0.6 초가 걸릴 것입니다.
우리가 알고 싶은 한 가지 중요한 점은 전환 속성이 ​​모든 브라우저에서 가능한 한 브라우저 친화적 인 방식으로 작동하지 않는다는 것입니다.
우리는 실제로 두 가지 속성을 추가해야합니다. 두 가지 속성은 기능상의 차이점을 알아 채지 못하지만 브라우저 지원만을위한 것입니다.
첫 번째 것은 Web Kit Dasch 전환이며 우리는 여기에 똑같은 정확한 값을 추가 할 것입니다.
그리고 우리는 이것이 하나의 돌진이되어야한다는 또 다른 것이 필요합니다. Moz M. Ozy.
그래서 이들은 실제로 브라우저 접두사입니다.
그래서 웹 키트는 브라우저가 사파리처럼 사용하는 엔진 인 웹 키트 용입니다.
그리고 나서 우리는 모질 (Moz)을 가지고 있으며 짧은 형태의 모지 (Mozy)는 파이어 폭스가 만들어내는 질라 (Zilah)입니다.
따라서 전환 속성이 ​​모든 단일 브라우저에 아직 내장되어 있지 않기 때문에 이것들은 더 많은 지원을 추가하기위한 것입니다.
그래서 우리는 새로 고침.
아무것도 달라 보이지 않아야합니다.
우리 게임은 여전히 ​​똑같은 방식으로 작동하고 여전히 같은 애니메이션을 얻습니다. 우리는 모두 이것을 전환 한 후에 같은 것을 반복해야합니다. MOOC 전환을 위해 0.3 초가 지나야 전환됩니다.
마지막으로 스트라이프와 그리드의 시작점 사이에 약간의 간격이 있습니다.
여기에 우리가 가지지 않은 간격이 더 있다는 것을 알 수 있습니다.
그리고 지금 우리가 검사하면 우리는 그리드 주위에있는 요소를 가지고 있습니다.
우리는 사각형을 가지고 있고 우리는 div ID 컨테이너를 가지고 있고 그 컨테이너 div는 6 개의 사각형을 모두 차지합니다.
그래서 우리는 그것을 사용할 수 있고 그 컨테이너 div에 약간의 공백을 추가합니다. 단지 위아래에 여백을 추가 할 것입니다.
그래서 나는 우리가 이미 그것을 조금 스타일링했다고 생각합니다.
여기에 우리가 간다.
그래서 우리는 증거금이 0이라고 말했다.
그리고 자동 대신 우리가 할 일은 여백이 위쪽과 아래쪽에 20 픽셀이고 왼쪽과 오른쪽에 자동으로 위치한다는 것입니다. 이것이 중심에있는 방법입니다.
그래서 우리는 왼쪽과 오른쪽에 자동으로 나타나기를 원하지만 20 픽셀 위쪽에 새로 고침합니다.
우리는 간격이 있습니다.
OK. 그래서 우리는 지금 스타일과 함께 끝내게된다.