반응형
- text-indent
- letter-spacing
- line-height
- word-spacing
- white-space
text-indent : 들여쓰기
<div class="paragraph-wrapper">
<p class="paragraph">
아주 재미있는 월드컵이었습니다. 김영권과 손흥민의 골로 독일을 이겼습니다. 하지만 16강 진출에는 실패했습니다.
우리 태극전사들 모두 자랑스럽습니다. 정말 통쾌했습니다.
</p>
</div>
.paragraph-wrapper .paragraph {
text-indent: 20px; // 첫줄 들여쓰기 20px
text-align-last: center; // 마지막 줄은 가운데 정렬
background: #49ca69;
}
letter-spacing : 글자 사이의 공백
.paragraph-wrapper .paragraph {
letter-spacing: 30px;
..(생략)..
}
Line Height : 줄 사이 공간
1보다 크면 멀어지고 1보다 작으면 가까워진다.
line-height가 1보다 작을 때
.paragraph-wrapper .paragraph {
line-height: 0.8;
...생략..
}
line-height가 1보다 클 때
.paragraph-wrapper .paragraph {
line-height: 1.8;
...생략..
}
word-spacing : 단어 사이 공백
letter-spacing은 글자 사이의 공백이다. 차이가 있다.
.paragraph-wrapper .paragraph {
word-spacing: 20px;
..생략..
}
White Space : 자동 줄맞춤 할까(wrap)? 말까(nowrap)?
가장 자주 보이는 속성이다.
nowrap으로 설정하면 그냥 한줄로 쭈 우욱 간다.
.paragraph-wrapper .paragraph {
white-space: nowrap;
}
설정하지 않으면 기본값인 wrap이다.
.paragraph-wrapper .paragraph {
/* white-space: nowrap; */
}
반응형
'개발 > CSS' 카테고리의 다른 글
float : 인라인요소가 자신을 감싸는 컨테이너의 좌우측에 붙는다. (0) | 2022.02.19 |
---|---|
flex-wrap : 강제로 한줄배치 (0) | 2022.02.19 |
align-self, align-items, align-content (0) | 2022.02.13 |
gap 속성과 margin 속성의 차이 (0) | 2022.01.30 |
Flex박스 속성 : grow, shrink, basis (0) | 2022.01.29 |