다음은이 마크 업을 복사 해 보겠습니다.
나는이 단락들 사이에서 약간 다른 베이컨 ipsum을 사용했다.
그래서 나는이 둘을 복사 할 것입니다. 그러나 다시 초점이 맞지는 않습니다.
그래서 우리가 다시 원하는 것은 div 클래스가 게시물과 같아 지도록하자.
그리고 여러분 중 일부는 왜 div를 div 클래스에 넣는 것이 모든 일에 대해 게시물을 같게 만드는 지 궁금해 할 것입니다.
이것 없이는 정상적으로 작동합니다.
실제로 물건을 함께 묶는 것입니다.
한 블로그 게시물이 다른 블로그 게시물에 번지는 곳에서 거대한 엉망이되는 것보다는
나는 이것이 하나의 게시물이라는 것을 알기 위해 약간의 내용을 담고 싶습니다. 그래서 여기서는 끝납니다. 그래서 제 생각에는 코드를 좀 더 깨끗하게 유지하는 것이 좋습니다.
그래서 우리는 날짜 또는 고전 날짜라는 div를 원했고 날짜는 2015 년 12 월 11 일이었습니다.
저장하십시오.
그런 다음 우리는 H2와 그 H-2를 가졌습니다.
이것은 또 다른 끔찍한 기사 인 또 다른 기사입니다.
그것을 읽는 것을 권장하지 마십시오.
그것은 단지 베이컨에 관한 것입니다.
그래서 저는이 인용문을 다시 복사 할 것입니다.
어떤 단락입니다.
클래스는 인용문 붙여 넣기와 같습니다.
그리고 여기에 두 개의 문단이 더 있습니다.
마침내 우리가 필요로하는 마크 업의 마지막 비트.
두 번째 단락.
우리는 거기에 갈.
그럼 어떻게 보이는지 봅시다.
그래서 제가 알아챌 수있는 한 가지는 여기에 게시물 사이에 약간의 간격이 있다는 것입니다.
그래서이 사람은이 일에 뛰어들뿐입니다.
12 월 11 일의 날짜는 우리가 왼쪽에서 볼 수있는 것처럼 약간의 간격을두고 싶습니다. 왜냐하면 우리가 누락 된 HRR 때문일 수 있습니다.
우리가해야 할 일은 블로그 게시물 사이에 약간의 여백을 더하는 것입니다.
이제부터 시작하겠습니다.
그래서 실제로 실제로 H R 요소를 보지 못했습니다.
이런 식으로 사용하는 것은 매우 간단합니다.
실제로 자체 닫는 것은 아무 것도 가지지 않고 닫는 태그 나 내부 내용 만 char 가로 규칙으로 사용하지 않습니다.
우리가 당신에게 보여줄 것을 새롭게한다면.
그래서 그것은 우리에게이 선을 가로 지르게합니다. 그리고 그것은 보통 괜찮습니다.
대부분의 사람들은 이것들을 조금 스타일링하기를 좋아하지만 이것은 정말로 희미합니다.
당신이 말할 수 있는지 모르겠지만 근본적으로 약간 더 두껍게되고 그 다음에 가장자리에서 후행하고 어떤 숯을 스타일링하는데 사용할 수있는 훌륭한 자원과 것들이 있습니다.
그리고 그들이 여기에이 이유를 추가 한 이유는 무언가를보고 자신이 쓰지 않은 스타일을 찾으려고했기 때문입니다.
그래서 저는 H R 스타일을 찾기 위해해야 ​​할 것을 정확히 보여 드리겠습니다.
나는 단지 Google HDR 스타일이고 우리가 얻는 것을 볼 것입니다.
그리고 당신은 내가 실제로 그 중 두 개를 클릭 한 것을 볼 수 있습니다.
각 항아리에는 간단한 스타일이 있으므로 여기에 몇 가지 옵션이 있음을 알 수 있습니다.
그래서 그들은 이것이 바로 여기에 갔다고 생각합니다.
그러나 이것과 같은 것을 시도해 봅시다.
코드를 클릭하면 복사가됩니다.
이 두 가지 스타일이 복사하고 우리가하지 않습니다.
저는이 라인이 모든 라인을 이해할 필요가 있다고 생각하고 싶지 않습니다. 왜냐하면이 라인이 꽤 진보적이며 해커처럼 보이기 때문입니다.
실제로는 작동하지 않아도되지만 우리가하고 싶은 유일한 일은 이것이 우리의 H R을 선택하는 것입니다. 그래서 이것이 HRO에게 우리가 가지지 않는 스타일의 클래스 7을 사용하게하는 것입니다.
자 이제 숯을 선택하고 어떻게 보이는지 보겠습니다.
페이지를 새로 고칩니다.
그래, 우리가 간다.
그래서 나는 개인적으로 저것을 걱정하지 않는다.
나는이 종류의 산책로를 여기에서 사용할 것이다.
원하는 것을 자유롭게 사용하고 자유롭게 연주하십시오.
그러나 다시 요점은 당신이 쓰지 않은 외부의 것을 찾으려고 노력하고 싶었 기 때문에 나는 그것을 할 수 있다고 전적으로 당신에게 보여주고 싶습니다.
그래서 이걸 복사하고 있습니다.
나는 이것을 쓰지 않았다.
이 스타일을 제거하고 여기에 넣어야합니다.
그래서 그들이하고있는 일은 마치 HRO에 경계선을 설정하는 것처럼 보입니다. 경계선 높이가 단지 하나의 픽셀이고 그런 다음 그라데이션 인이 배경 이미지입니다.
그래서 그것이 그 그라디언트 효과를 얻는 방법입니다.
그래서 우리가 새로 고치면 거기 가세요.
여기에 멋진 그라디언트 효과가 있습니다.
나는 실제로이 것을 선호하기 때문에 나는 앞으로 나아가고 이것을 유지할 것입니다.
이걸로.
나는 색상을 약간 바꿔서 밝은 회색으로 만들지 만 지금은 그냥 그대로 두자.
그러나 우리는 여전히 우리의 다음 블로그 게시물이 너무 빨리 시작하고 우리는 거기에 약간의 공간을 추가해야 할이 문제가 있습니다.
그래서 우리가해야 할 일은 약간의 마진을 더하는 것입니다.
그래서 여기에 공간을 추가 할 수 있도록 각 게시물의 하단에 여백을 추가 할 수 있기 때문에 실제로 모든 게시물 주위에이 블로그 게시물 래퍼가 있다는 것은 좋은 우연한 일치입니다.
그래서 우리가해야 할 일은 선택입니다.
수업장을 보여 드리겠습니다.
그것은 하나의 게시물입니다.
그래서 우리는 단지 여기에 있습니다.
포스트 마진과 비슷하며 여백이 아닌 20 픽셀을 사용합시다.
3 월과 바닥에 새로 고침 만하면 아주 가깝게 보입니다.
여기 마지막 문제는 우리가 여기있는 것보다 더 많은 공간을 가지고 있다는 것입니다. 왜냐하면 우리가 추가 한 것은 실제로 포스트 클래스 밖에 있으므로 우리가 추가 한 마진의 영향을받지 않기 때문입니다.
그래서 우리가 그렇게하면 우리는 A char를 움직입니다.
어디 있니?
여기에 우리는 게시물의 하단에 가서 우리는 신선한 있습니다.
우리가 원하는 간격을 얻었는지 알 수 있습니다.
좋습니다. 그래서 우리가 실험하고 싶었고 정확한 것을 얻고 싶다면 우리는 H.R. 스타일로 돌아가서 다른 것들을 시도해보십시오.
그러나 내가 다시 보여주고 자하는 것이 다른 스타일을 통합 할 수 있다는 것입니다.
호기심을 불러 일으키고 파악하는 것이 좋지만 실제로 작동하는 방식을 정확히 알 필요는 없습니다.
그래서이 프로젝트를 멋진 단순한 최소한의 블로그로 만들고 지금 당장 당신이 즐겼습니다.
분명히 실제로 블로그로 기능하지는 않습니다.
우리는 어떤 종류의 인터페이스로도 새로운 게시물에 추가 할 수있는 의견이 없습니다.
우리는 나이 든 사람을 실제로 편집해야합니다.하지만 자바 스크립트를 사용하고 특히 백 ​​엔드에 도달하면 데이터베이스가 있고 Express라는 프레임 워크에 서버가 있습니다. 실제로이 블로그를 가져갈 것입니다. 댓글을 달 수있는 양식을 사용하여 게시물을 추가 할 수있는 실제 블로그로 바꿔 투표와 같은 다른 일을 할 수 있습니다.
그래서 그것은 정말로 흥미 진진 할 것입니다.
우리는 이것을 평가할 것입니다.
비교적 적은 수의 라인을 찾는 것이 상대적으로 좋습니다.