텍스트를 컨트롤하는 속성
line-height:30px을 하면 줄 높이가 30px으로 변경된다. 하지만 글자 크기를 변경할 시에 글자 크기가 line-height 값보다 크다면 좁은 공간에 큰 글자가 들어가있어서 이상해보인다.
그렇기 때문에 line-height:1.5 이런 식으로 작성해야 한다. 만약 부모의 line-height가 1.5em인 경우 font-size의 1.5배라는 의미인데 이렇게 단위가 명시되어 있으면 자식들의 글자 크기가 부모의 글자 크기와 다른 경우 글자가 이상해진다.
예를 들어 부모의 font-size가 40px이고 line-height가 1.5em이면 자식들의 line-height는 60px가 된다. 여기서 자식의 글자 크기가 40px가 아닌 line-height보다 더 크다면 글자가 겹쳐보이게 된다.
폰트 사이즈보다 line-height가 더 큰 이유는 리딩(leading) 공간이라고 해서 글자를 읽을 때 가독성을 높여주기 위해 문장 간 거리를 뒀기 때문이다.
line-height를 지정하지 않으면 normal값이 기본 값이다. 폰드 스타일에 따라 조금씩 달라진다.
line-height를 1로 주면 리딩 영역은 사라지고 font-size와 높이가 같아진다.
font-size를 80px; line-height를 1; margin-top을 -1em;으로 해주면 font-size가 변경되어도 그에 맞게 line-height가 조절된다. margin-top을 -1em으로 해주면 배경 이미지 위에 글자가 써진다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <html> <head> <title>centering</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <img class="box-item1" width="50%" src="images/airplane.png"> <img class="box-cover" width="100%" src="images/sky.jpg"> <h2 class="airplane">airplane</h2> <h1>airplane</h1> <p><strong class="bold">Airplane</strong> in the sky is going from right side to left side. </p> </div> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | body{ background-color:skyblue } .box{ background-color:white; width:60%; margin:100px auto; text-align:center;/*상속되는 요소이므로 .box의 자식들이 가운데 정렬됨*/ border-radius:20px; border-right:5px solid #aaa; border-bottom:5px solid #bbc; } .box h1{ color:deepskyblue; border-bottom:5px solid deepskyblue; width:50%; margin:auto; } .box p{ padding:3rem; line-height:1.5; font-size:15px; } .box-cover{ border-radius:20px; z-index:-1; } .box-item1{ border-radius:20px; margin-top:-50px; margin-right:500px; z-index:1; float:left; } .box-item1:hover{ margin-left:-200px; transition:all 3s; } strong.bold{ background-color:blue; display:inline; padding:10px; width:100px; height:100px; } .airplane{ font-size:80px; background-color:white; line-height:1; margin-top:-1em; font-family:'impact'; color:white; } | cs |
'CSS' 카테고리의 다른 글
| 상속 inheritance (0) | 2018.10.07 |
|---|---|
| 버티컬 얼라인 vertical align (0) | 2018.10.07 |
| 마진 병합 margin collapsing (0) | 2018.10.07 |
| display (0) | 2018.10.07 |
| 가운데 정렬, negative margin (0) | 2018.10.06 |
