텍스트 들여 쓰기 속성 및 인접 형제 선택기 사용
좋은 웹 디자인 은 종종 좋은 인쇄술에 관한 것입니다. 웹 페이지의 내용 중 상당 부분이 텍스트로 제공되기 때문에 텍스트를 매력적이고 효율적으로 스타일을 지정할 수 있다는 것은 웹 디자이너로서 소유 할 수있는 중요한 기술입니다. 안타깝게도 우리는 인쇄물에서 온라인으로하는 같은 수준의 활판 인쇄 제어를 가지고 있지 않습니다. 이것은 우리가 인쇄물에서 그렇게 할 수있는 것과 똑같은 방법으로 웹 사이트에 항상 안정적으로 텍스트 스타일을 지정할 수는 없다는 것을 의미합니다.
인쇄에서 종종 보게되는 (그리고 온라인에서 다시 만들 수있는) 일반적인 단락 스타일은 그 단락의 첫 번째 줄이 하나의 탭 공간을 들여 쓰는 곳입니다. 이를 통해 독자는 한 단락이 시작되고 다른 단락이 끝나는 곳을 볼 수 있습니다.
브라우저는 기본적으로 그 아래에 공백이있는 단락을 표시하기 때문에 웹 페이지에서이 비주얼 스타일을 많이 보지 못합니다. 단락의 끝 부분과 다른 부분이 시작되는 것을 보여주는 방법으로 표시되지만, 영감 된 들여 쓰기 스타일을 단락에 적용하려면 텍스트 들여 쓰기 스타일 속성을 사용하면됩니다.
이 속성의 구문은 간단합니다. 다음은 문서의 모든 단락에 텍스트 들여 쓰기를 추가하는 방법입니다.
p {text-indent : 2em; }들여 쓰기 사용자 정의
들여 쓰기 할 단락을 정확히 지정할 수있는 한 가지 방법은 들여 쓰기를 원하는 단락에 클래스를 추가 할 수 있지만 모든 단락을 편집하여 클래스를 추가해야합니다. 이는 비효율적이며 HTML 코딩 우수 사례를 따르지 않습니다.
대신 단락을 들여 쓰기 할 때 고려해야합니다. 다른 단락 바로 다음에 오는 단락을 들여 쓰기합니다. 이렇게하려면 인접한 형제 선택 도구를 사용할 수 있습니다. 이 선택기를 사용하면 다른 단락이 바로 앞에 오는 모든 단락을 선택하게됩니다.
p + p {텍스트 - 들여 쓰기 : 2em; }첫 줄을 들여 쓰고 있기 때문에 단락에 그 사이에 여분의 공백이 없어야합니다 (브라우저 기본값). 문법적으로는 단락 사이에 간격을 두거나 첫 번째 줄을 들여 쓰지 만 두 줄을 모두 들여 쓰기해서는 안됩니다.
p {margin-bottom : 0; 패딩 하단 : 0; } p + p {margin-top : 0; 패딩 - 상단 : 0; }음수 들여 쓰기
또한 음수 값과 함께 text-indent 속성을 사용하여 보통 들여 쓰기와 같이 오른쪽으로 시작하는 줄의 시작을 왼쪽으로 이동시킬 수 있습니다. 단락의 왼쪽에 약간의 여백에 따옴표 문자가 나타나고 글자 자체가 여전히 멋진 왼쪽 정렬을 형성 할 수 있도록 행이 따옴표로 시작하는 경우이 작업을 수행 할 수 있습니다.
예를 들어, 단락 인용 부호의 하위 항목 인 단락을 가지고 있고 부정적으로 들여 쓰기를 원한다고 가정 해보십시오. 이 CSS를 작성할 수 있습니다.
blockquote p {text-indent : -.5em; }이렇게하면 여는 따옴표 문자가 포함 된 단락의 시작 부분이 왼쪽으로 약간 이동되어 매달린 구두점을 만들 수 있습니다.
여백 및 여백 관련
종종 웹 디자인에서 여백 또는 패딩 값 을 사용하여 요소를 이동하고 공백을 만듭니다. 그러나 이러한 속성은 들여 쓰기 된 단락 효과를 얻기 위해 작동하지 않습니다. 단락에이 값 중 하나를 적용하면 모든 단을 포함하여 해당 단락의 전체 텍스트가 첫 번째 줄 대신 간격을 두게됩니다.