좋아, 그럼이 블로그를 처음부터 만들어 보자.
그러니 여기를 따라 가십시오.
나는이 파일을 끝내기까지 새로운 파일을 만드는 것부터 시작하려고합니다.
그래서 우리가하고 싶은 첫 번째 일.
솔루션을 열어서 참조 할 수 있도록하고 색상 및 글꼴 크기가 정확한지 확인하겠습니다.
그러나 우리가 정말로하고 싶은 첫 번째 작업은 파일 설정 작업이므로 두 가지 파일이 있습니다. HMO와 블로그에는 제목 블로그를 제외하고는 아무것도없고 Blog Dotsie SS라는 스타일 시트에 연결되어 있습니다. 비어 있습니다. .
따라서 이것은 우리가 필요로하는 두 파일을 아는 것입니다.
그리고 이제 시작해서 그들을 채우십시오.
그래서 우리는 언제 이런 일을하는지 결정해야합니다.
어디에서 시작해야할까요?
그리고 가장 좋은 해결책은 우리 시대의 G 메일에서이 마크 업 중 일부를 시작하여 스타일을 지정하는 것입니다.하지만 실제로 스타일을 적용하기 전에 모든 단어를 완성 할 필요는 없습니다.
그래서 저는 여러분이 여러분의 단서 하나 또는 두 개와이 헤더 중 하나를 우리 몸에두기 시작할 것입니다.
그리고 이것을하기 위해 이것은 베이컨 ipsum을 제외하고 Lorem Ipsum 텍스트입니다. 그냥 베이컨 ipsum dot com을 추가하는 것입니다.
클릭하여 베이컨을주고 단락 중 하나를 복사하십시오.
나는 단지 내가 여기있는 것을 사용하려고하지만, 그 단어가 거기에있는 한 그 단어는 그렇게 중요하지 않습니다.
따라서 베이컨을 사용하려면 ipsum을 사용하십시오.
그러나 베이컨을 반대한다면 다른 ipsum을 선택하거나 자신의 단어를 구성하거나 실제로 자신의 블로그 게시물을 올릴 수 있습니다.
그것은 이상적 일 것입니다.
그리고 나서 저는이 표제 중 하나를 여기에 넣고 이것들을 모두 H1로 만드는 것이 합당 할 것입니다.
그러나 일반적으로 규칙은 페이지에 하나의 H-1을 갖고 싶어서 페이지에서 가장 큰 것이되어야합니다.
그래서 우리는 각각 여러개의 제목을 가지고 있기 때문에 여기에 여러 개의 기사 제목이 있습니다.
저는 H-2와 함께 갈 것입니다.하지만 하루의 끝에는 전혀 문제가되지 않습니다. 왜냐하면 우리가 그것에 대해 모든 것을 스타일링 할 것이기 때문에 우리는 폰트 크기를 바꿀 것입니다. 색상 및 그 차이에 대한 성격 대 H1로 설정함으로써 결정될 모든 것들은 어쨌든 제거 될 것입니다.
그래서 저는 H-2와 함께 갈 것입니다. 그리고 저는 이것이 가장 창의적인 제목이 아니라 저의 첫번째 기사라고 말하려고합니다.
시작하기 전에 미리 보도록하겠습니다.
그러니 열어.
승인.
지금까지 우리 블로그가 있습니다.
그래서 우리는 많은 결정을 내릴 수 있습니다.
제가 시작할지도 모르는 첫 번째 장소는이 몸이이 경계선을 갖게하는 것입니다.
그래서 마지막 비디오에서 색상을 제공했습니다.
저는이 색을 여기에 복사 할 것이고 몸을 선택할 수 있도록 물의 몸을 줄 것입니다. 그러면 우리가 할 일은 경계선이라고 말하면서 20 픽셀의 색을 띄게됩니다.
그리고 그걸 확인해 봅시다.
승인.
그래서 우리가보기를 원할 것 같은 방법을 보이지는 않습니다. 그러나 거기에 도착하면 우리는 국경을가집니다.
우리가 실제로 비교할 수 있도록 전체 크기로 만들어 보겠습니다.
당신이 알아 차릴 또 다른 것은 거기에 우리의 국경은 온 몸이 전체 페이지를 차지하는 모든 방법으로가는 하나의 문제입니다.
여기에서 몸은 페이지의 일부만 차지합니다.
그리고 양쪽에 간격이 있습니다.
그리고 우리 본문에있는 우리의 말은 국경에 대항하기 때문에 우리가 가지고 있지 않은 안쪽에 간격이 있습니다.
먼저 문제를 해결하고 해결해 봅시다.
물론 패딩이 필요합니다.
그래서 이것은 모든면에서 20 픽셀 패딩입니다.
아래쪽과 왼쪽과 오른쪽에도 패딩이 있음을 볼 수 있습니다.
그래서 몸에서 4면 모두에 20 픽셀의 패딩을 지정하면됩니다.
그래서 조금 더 가깝습니다.
우리가해야 할 다음 작업은 너비가 정확하도록하는 것입니다. 전체 화면 일 때 너비가 올바른 크기가 될뿐만 아니라 축소 될 때이 너비가 700 픽셀로 유지되는 것을 볼 수 있습니다. 잠시 동안 700 픽셀로 유지되고 축소되고 축소됩니다.
그래서 우리는 그것이 일어날 수 있는지 확인하기를 원합니다.
그래서 우리는 약간의 트릭을 사용하려고합니다.
그리고 나서 당신이하고 싶은 또 하나의 일은 그것이 지금 당장 집중되고 있는지 확인하는 것입니다.
우리는 정말로 말할 수 없습니다.
그러나 그것은 중심에 있지 않습니다. 왼쪽에있을 것입니다.
그럼 먼저 내부에 추가하겠습니다.
그러니 700 픽셀을 사용하여 저장한다고 가정 해 봅시다. 왼쪽에서이 사진에 대해 이야기하고 있습니다. 중간에 중심을두고 싶습니다. 상자에서 말한 자동 또는 마진 자동 트릭을 사용할 수 있습니다. 모델 비디오.
그래서 우리는 마진을 설정하고 바로 가기를 사용하려고합니다.
그래서 우리는 상하의 픽셀을 0 픽셀로하고 왼쪽과 오른쪽으로 오토를 할 것입니다.
우리가 4 명이 아니라 여기에 2 명을 할 때를 기억하십시오.
이것은 위쪽과 아래쪽이며 이것은 왼쪽과 오른쪽입니다.
따라서 자동으로 센터에 배치되지만, 맨 위와 맨 아래에 0을 지정하면 상단에 맞춰 나타납니다.
여기이 하나가 아닙니다.
우리는 약간의 공간이 있습니다.
거기에 20 픽셀 있습니다.
그래서 그것은 간단한 수정입니다.
같은 라인이 20Px로 바뀝니다.
우리는 x가 필요합니다.
우리는 전에 0이 아니었기 때문에 그냥 0으로 남겨 두었습니다.
그러나 숫자가있을 때 우리는 다음을 필요로합니다.
OK 그래서 꽤 가까워 보인다.
유일한 것은 축소 될 때 더 이상 700 픽셀을 말할 수 없을 때까지이 값을 700 픽셀로 유지하기를 원합니다.
그리고 우리는 그것이 축소되기를 원합니다. 그리고 그것을하는 것은 꽤 쉽습니다. 실제로 우리가하고 싶은 모든 것은 이것을 최대 너비로 변경 한 다음 그것을 백분율로 할당 할 것입니다.
그리고 이것이 말하는 것은 당신이 필요할 때 그것을 80 퍼센트로 만듭니다.
하지만 최대 700 픽셀로 만들 수 있습니다.
그래서 내가 새로 고침 할 때 그 모습을 보여 드리겠습니다.
최대 7 백 픽셀에 추가되어 변경되지 않으므로이 경우 80 %가 700 픽셀 이상인지 확인합니다.
그래서 700시에 700시에 머무르며 여기까지 줄어들 기 시작합니다.
현재 80 %가 700 픽셀 미만입니다.
승인.
이제 우리는 우리의 기본 몸을 셋업했습니다.
그 다음으로하고 싶은 것은 우리 Funt가가는 것입니다.
그래서 우리가 마지막 비디오에서 가지고있는 음표로 가면 폰트는 Source sense pro라고 부릅니다.
이제 Google phos로 가서 Pro 발신 소스를 찾아 보겠습니다.
그래서 여기에서 열어 보았습니다.하지만 다시 Google은 com의 글꼴을 그어서 소스에 대한 검색을 통해 여기에 프로를 보내어 콜렉션을 사용하도록했습니다.
그리고 이제 우리는 어떤 글꼴 가중치를 우리가 원하는지 선택할 수 있습니다.
그리고 저는 원래 비디오에서이 사실을 말하지 않았지만 이것은 폰트 가중치 400의 일반적인 폰트입니다.
그리고 이것은 더 무거운 무게입니다.
접었습니다.
그래서 우리는 그 두 가지를 모두 원할 것입니다.
그래서 대담한 400 700으로 정상입니다.
우리는 여기서 내려 가서이 링크를 복사합니다.
이제 Google 글꼴을 제거 할 수 있으며 HMO로 이동하여 해당 링크를 붙여 넣기 만하면됩니다.
이제 우리는 소스 감각을 사용할 수 있습니다.
두 단락과 두 살 모두에 할당하고이 날짜에 있기를 원합니다.
그래서 우리가 할 수있는 것은 단락을 선택하고 글꼴 패밀리 소스 감각 프로라고 말하면 H-1에 대해서도 똑같이 할 수 있습니다.
그러나 이것이 우리의 성공을 실제로 사용하는 것은 아닙니다.
우리 코드는 우리가 사용하고자하는 모든 요소를 ​​약간 반복 할 것입니다.
우리는 이걸 추가해야 할 것입니다.
그래서 우리가 대신하는 것은 몸에 적용하는 것입니다.
그리고 몸 안으로 들어가서 모든 것을 몸 안으로 상속받습니다.
그래서 글꼴 가족 소스와 프로 및 저장 새로 고침 우리가 가서 H-1 그것을 사용하거나 H-2 우리는 단락이 있습니다.
지금까지는 꽤 좋아 보이네요.