CSS Quickies: 텍스트 들여쓰기

CSS Quickes란 무엇입니까?

Instagram에서 사랑하는 커뮤니티에 질문하기 시작했습니다. "어떤 CSS 속성이 혼란스럽나요?"

"CSS Quickies"에서 하나의 CSS 속성에 대해 자세히 설명하겠습니다. 커뮤니티에서 요청한 속성입니다. CSS 속성에 대해 혼란스러워하는 경우 아래의 의견에 대해 또는 아래에 적어주세요! 나는 모든 질문에 대답합니다.

CSS의 텍스트 들여쓰기에 대해 이야기해 봅시다.

웹 사이트에서 텍스트를 들여쓰기해야 하는 경우가 있습니다. 이것은 사용자가 페이지를 빠르게 스캔하고 보고 있는 내용의 컨텍스트를 이해하는 데 도움이 됩니다. 첫 줄 들여쓰기는 책과 잡지에서 흔히 볼 수 있는 것입니다. 일부 과학 논문에서는 모든 단락을 들여쓰기해야 합니다.

CSS에는 이 동작을 수행하는 속성이 있습니다. 이것을 '텍스트 들여쓰기'라고 합니다.

사용 방법

px, rem, rm 및 백분율과 같은 일반적인 값을 사용할 수 있습니다. 가장 간단한 예는 다음과 같습니다.

p {
    text-indent: 4rem;
}
p {
    text-indent: 20%;
}
p {
    text-indent: 100px;
}

text-indent는 텍스트의 첫 번째 줄을 지정된 양만큼 들여씁니다. px와 같은 전체 길이를 사용하면 들여쓰기가 얼마나 될지 명확하지만 백분율은 어떻습니까? 백분율은 어떻게 계산됩니까? 백분율은 포함하는 블록의 너비를 나타냅니다. 따라서 텍스트가 있는 요소가 100px이고 20% 들여쓰기를 하지 않는다면 절대값은 20px가 됩니다. 쉽죠?

음수 들여쓰기.

이 속성의 깔끔한 점은 음수 길이를 허용한다는 것입니다. 따라서 텍스트를 오른쪽뿐만 아니라 왼쪽으로도 이동할 수 있습니다. 이 기술을 "걸기 들여쓰기"라고 하며 책과 잡지에 사용되며 경쟁 제품보다 디자인을 높일 수 있습니다.

p {
  text-indent: -2rem;
}

codepen 예제를 만들었습니다. 이 예에서는 text-indent 를 가지고 놀 수 있습니다.

각 라인 및 교수형

each-line and hanging`은 2019년 11월에 이 기사를 작성하고 있으므로 어떤 브라우저에서도 구현되지 않습니다. 따라서 프로덕션 코드에서는 사용하지 마세요. 나는 당신에게 예를 보여줄 수도 없습니다. 이것이 이것이 얼마나 실험적인 것입니다.
each-line : 들여쓰기는 블록 컨테이너의 첫 번째 줄과 강제 줄 바꿈 후 각 줄에 영향을 주지만 소프트 줄 바꿈 이후에는 줄을 변경하지 않습니다.

그리고
hanging : 들여쓴 줄을 반전시킵니다. 첫 번째 줄을 제외한 모든 줄은 들여쓰기됩니다. 우리는 이것을 우리 스스로 만들었습니다.

👋안녕하세요! | | | Medium | |