고정 헤더 영역
상세 컨텐츠
본문
반응형
line-height 속성 - 줄 간격 조절하기
- 문단의 첫 줄을 넘어 두 줄 이상이 되면 '줄 간격'이 생긴다. 그런데 줄 간격은 너무 좁으면 내용이 눈에 잘 들어오지 않는다. 이때 line-height 속성을 이용해서 줄 간격을 조절할 수 있다.
line-height: normal | <숫자> | <크기> | <백분율> | inherit<html>
<head>
<meta charset="utf-8">
<style>
.height1 { line-height: 0.7; }
.height2 { line-height: 2; }
</style>
</head>
<body>
<p>동해물과 백두산이 마르고 닳도록<br/>하느님이 보우하사 우리나라 만세</p>
<p class="height1">동해물과 백두산이 마르고 닳도록<br/>하느님이 보우하사 우리나라 만세</p>
<p class="hegiht2">동해물과 백두산이 마르고 닳도록<br/>하느님이 보우하사 우리나라 만세</p>
</body>
</html>
text-overflow 속성 - 넘치는 텍스트 표시하기
- 너무 긴 글인 경우 요약해서 많이 문장만 보여주고, 나머지의 경우는 말 줄임표로 생략되었지만 마우스를 텍스트 위에 올리면 줄여진 텍스트를 다 보여줄 수 있게 처리를 할 수 있다.
- 그때 사용하는 게 text-overflow 속성이다.
<html>
<head>
<meta charset="utf-8">
<style>
.content {
border: 1px solid #ccc; /* 테두리 */
width: 300px; /* 단락의 너비 */
white-space: nowrap; /* 줄 바꿈 안함 */
overflow: hidden; /* 넘치는 부분 감춤 */
text-overflow: ellipsis; /* 말 줄임표 */
}
.content:hover {
overflow: visible; /* 넘치는 부분 보여줌 */
}
</style>
</head>
<body>
<p class="content">내 생의 삶이 다하는 순간까지 앞을 향해 달려갈거다.
하지만 두번의 실수는 있어서는 안되기 때문에 후회하는 시간보다 그걸 개선하는 데 노력을 기울일거다.
왜냐면 후회하는 시간보다 더 나아지기 위한 노력의 내 모습이 더 사랑스럽기 때문이다.</p>
</body>
</html>
white-space 속성 - 줄바꿈 속성주기
- 줄 바꿈에 대한 설정을 할 수 있다.
- 이 속성을 이용해서 문단이 줄 바꿈이 아예 일어나지 않도록 처리할 수 있다. 또는 이 속성을 통해서 'pre'요소 처럼 보여지게 할 수도 있다.
속성
- normal : 기본적인 속성이다.
- nowrap : 줄 바꿈을 하지 않는다. 문단이 박스를 벗어나도, 심지어 br 요소를 사용하더라도 줄 바꿈이 일어나지 않는다.
- pre : pre요소와 동일하게 보여진다. 줄 바꿈, 띄어쓰기 공백 모든 게 그대로 보여진다. 박스를 벗어나더라도, nowrap과 같이 줄 바꿈이 일어나지 않는다.
- pre-line : pre로 보여지는 부분 중 줄 바꿈만 보여주고, 띄어쓰기 공백은 무시한다. 또한, 박스를 벗어나기 전 자동으로 개행이 일어난다.
- pre-wrap : pre-line과 비슷하나, 띄어쓰기 공백까지 인식하여 보여준다.
- inherit : 부모의 속성을 상속 받는다.
<html>
<head>
<meta charset="utf-8">
<style>
.white1 { white-space: nowrap; }
.white2 { white-space: pre; }
</style>
</head>
<body>
<div style="width: 300px;">
<p class="white1 ">내 생의 삶이 다하는 순간까지 앞을 향해 달려갈거다.
하지만 두번의 실수는 있어서는 안되기 때문에 후회하는 시간보다 그걸 개선하는 데 노력을 기울일거다.
왜냐면 후회하는 시간보다 더 나아지기 위한 노력의 내 모습이 더 사랑스럽기 때문이다.</p>
<br/><br/>
<p class="white2 ">내 생의 삶이 다하는 순간까지 앞을 향해 달려갈거다.
하지만 두번의 실수는 있어서는 안되기 때문에 후회하는 시간보다 그걸 개선하는 데 노력을 기울일거다.
왜냐면 후회하는 시간보다 더 나아지기 위한 노력의 내 모습이 더 사랑스럽기 때문이다.</p>
</div>
</body>
</html>반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] 배경 색과 배경 이미지 (0) | 2021.04.24 |
|---|---|
| [CSS 기초] 목록 스타일 (0) | 2021.04.23 |
| [CSS 기초] 문단 스타일 (1) (0) | 2021.04.20 |
| [CSS 기초] 텍스트 스타일 (0) | 2021.04.19 |
| [CSS 기초] 글꼴 관련 스타일 (2) (0) | 2021.04.16 |
댓글 영역