<p>

<p>
  Geckos are a group of usually small, usually nocturnal lizards. They are found
  on every continent except Antarctica.
</p>

<p>
  Some species live in houses where they hunt insects attracted by artificial
  light.
</p>

p {
  margin: 10px 0;
  padding: 5px;
  border: 1px solid #999;
}

<p>첫 번째 문단입니다.
  첫 번째 문단입니다.
  첫 번째 문단입니다.
  첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.
  두 번째 문단입니다.
  두 번째 문단입니다.
  두 번째 문단입니다.</p>

<p>
  독자 입장에선 문단 사이를 여백으로 구분하는게 제일 읽기 쉽지만, 첫 줄
  들여쓰기로도 구분할 수 있습니다. 들여쓰기는 보통 인쇄매체에서 공간과 종이를
  아끼기 위해 사용합니다.
</p>

<p>
  학교 과제나 초안 등 나중에 편집할 글은 여백과 들여쓰기 둘 다 사용합니다.
  그러나 완성한 글에 둘 다 사용하는건 불필요하고 초보적으로 여겨집니다.
</p>

<p>
  아주 오래된 글에서는 문단을 특수기호 ¶, <i>필크로</i>(단락 기호)로
  구분했습니다. 그러나 답답하고 읽기 힘들어 지금은 사용하지 않습니다.
</p>

<p>
  얼마나 읽기 힘들까요? 직접 알아보세요.
  <button data-toggle-text="안돼! 다시 돌려놔요!">단락 기호 써보기</button>
</p>

p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
  text-indent: 0;
  display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}

document.querySelector("button").addEventListener("click", function (event) {
  document.querySelectorAll("p").forEach(function (paragraph) {
    paragraph.classList.toggle("pilcrow");
  });
  var newButtonText = event.target.dataset.toggleText;
  var oldText = event.target.innerText;
  event.target.innerText = newButtonText;
  event.target.dataset.toggleText = oldText;
});

p {
  margin-bottom: 2em; /* 문단 다음 여백을 늘림 */
}