개발 공부 기록하기

DAY 10. 텍스트 관련 스타일(2): text-align, line-height, text-decoration 본문

프밍/CSS

DAY 10. 텍스트 관련 스타일(2): text-align, line-height, text-decoration

태영(泰伶) 2022. 11. 3. 16:15

1. text-align: 텍스트 정렬하기

      text-align: start | end | left | right | center | justify | match-parent ;

 

속성값 설명
start 현재 텍스트 줄의 시작 위치에 맞춰 문단을 정렬.
end 현재 텍스트 줄의 끝 위치에 맞춰 문단을 정렬.
left 왼쪽에 맞춰 문단을 정렬. default 값.
오른쪽에 여백이 존재한다.
right 오른쪽에 맞춰 문단을 정렬.
center 가운데에 맞춰 문단을 정렬.
justify 양쪽에 맞춰 문단을 정렬.
left와 달리 오른쪽에 여백이 없다.
match-parent 부모 요소를 따라 문단을 정렬.

 

 

예제 1.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>text-align</title>
         <style>
            p {
               width: 600px;
               border: 1px solid #222;
               padding: 10px;
               margin: 10px;
            }
            .center {
               text-align: center;
            }
            .justify {
               text-align: justify;
            }
         </style>
      </head>
      <body>
         <h1></h1>
         <p>껍질에 붉은 빛이 돌아 <b><big>레드향</big>(감평甘平)</b>이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
         <p class="center">껍질에 붉은 빛이 돌아 <b><big>레드향</big>(감평甘平)</b>이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
         <p class="justify">껍질에 붉은 빛이 돌아 <b><big>레드향</big>(감평甘平)</b>이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
      </body>
   </html>

↓

위에서부터 기본값(left), center, justify 적용.

 

 

 

모든 속성값 적용해보기 by myself:)

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>Text-align(practice by myself)</title>
         <style>
            span {
               width: 200px;
               padding: 10px;
               margin: 10px;
               text-align: center;
            }
            p {
               width: 200px;
               border: 1px solid #ffd6ec;
               padding: 10px;
               margin: 10px;
            }
            .start {
               text-align: start;
            }
            .end {
               text-align: end;
            }
            .left {
               text-align: left;
            }
            .right {
               text-align: right;
            }
            .center {
               text-align: center;
            }
            .justify {
               text-align: justify;
            }
            .match-parent {
               text-align: match-parent;
            }
         </style>
      </head>
      <body>
         <p class="start">The flowers that blooms late is the most rare and beautiful of all.🌸</p>
         <p class="end">The flowers that blooms late is the most rare and beautiful of all.🌸</p>
         <p class="left">The flowers that blooms late is the most rare and beautiful of all.🌸</p>
         <p class="right">The flowers that blooms late is the most rare and beautiful of all.🌸</p>
         <p class="center">The flowers that blooms late is the most rare and beautiful of all.🌸</p>
         <p class="justify">The flowers that blooms late is the most rare and beautiful of all.🌸</p>
         <span>
            <p class="match-parent">The flowers that blooms late is the most rare and beautiful of all.🌸</p>
         </span>
      </body>
   </html>

↓

text-align: match-parent;의 부모 요소인 <span>에서 지정한 것처럼, 마지막 <p>에서는 text-align: center;를 따른 것을 확인할 수 있다.

 

 

 

 

 

2. line-height: 줄 간격 조절하기

     한 문단이 두 줄을 넘어가면 줄 간격이 생기는데, 이 간격이 너무 좁거나 너무 넓으면 가독성이 떨어진다.

 

     줄 간격 지정 방법

          1) 절대 크기 값으로 지정

          2) 문단의 글자 크기를 기준으로 몇 배인지 지정

          3) 문단의 글자 크기를 기준으로 몇 %인지 지정

 

               ⇒ 그러니까 아래 세 줄은 모두 똑같이 줄 간격이 24px인 것이다.

p { font-size: 12px; line-height: 24px; }
p { font-size: 12px; line-height: 2.0; }
p { font size: 12px; line-height: 200%; }

 

 

 

예제 2.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>line-height</title>
         <style>
            p {
               width: 600px;
               border: 1px solid #222;
               padding: 10px;
               margin: 10px;
            }
            .small-line {
               line-height: 0.7;		/* 글자 크기의 0.7배 줄 간격 */
            }
            .big-line {
               line-height: 2.5; 		/* 글자 크기의 2.5배 줄 간격 */
            }
         </style>
      </head>
      <body>
         <p>껍질에 붉은 빛이 돌아 레드향(감평甘平)이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
         <p class="small-line">껍질에 붉은 빛이 돌아 레드향(감평甘平)이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
         <p class="big-line">껍질에 붉은 빛이 돌아 레드향(감평甘平)이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
      </body>
   </html>

↓

 

     line-height는 텍스트를 상하(上下)로 정렬 할 때도 유용하게 쓰인다.

왼쪽의 것을 오른쪽처럼 바꾸려면, 'height의 속성값 = line-height의 속성값'이 되면 OK!

 

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>상품 소개 페이지</title>
         <style>
            h1 {
               font-size: 60px;
               font-family: Verdana, Geneva, Tahoma, sans-serif;	/* 글꼴 */
            }
            .heading {
               width: 100%;			/* 영역 너비 */
               height: 100px;			/* 높이 */
               background: #222;		/* 배경 색 */
               color: rgb(255, 255, 255);	/* 글자 색 */
               text-align: center;		/* 가로 정렬 - 가운데 */
               line-height: 100px;		/* 세로 정렬 - 가운데. line-height 값과 height 값을 같게 */
            }
         </style>
      </head>
      <body>
         <h1 class="heading">HTML</h1>
      </body>
   </html>

↓

 

3. text-decoration: 텍스트에 줄을 표시하거나 없애주기

  • 텍스트에 밑줄을 긋거나 취소선을 표시할 때 쓰인다.
  • 하이퍼링크가 적용된 텍스트에 밑줄을 없앨 수 있다.

     text-decoration: none | underline | overline | line-through ;

 

 

 

예제 3.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>text-decoration</title>
      </head>
      <body>
         <h1>text-decoration 속성</h1>
         <p style="text-decoration: none;">none</p>
         <p style="text-decoration: underline;">underline</p>
         <p style="text-decoration: overline;">overline</p>
         <p style="text-decoration: line-through">line through</p>
      </body>
   </html>

↓

 

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

DAY 10. 목록 관련 스타일(1): list-style-type  (0) 2022.11.03
DAY 10. 텍스트 관련 스타일(3): text-shadow, text-transform, letter-spacing, word-spacing  (0) 2022.11.03
DAY 9. 텍스트 관련 스타일(1): color  (0) 2022.11.03
DAY 9. Google Font  (0) 2022.11.02
DAY 8. Web Font  (0) 2022.11.01
'프밍/CSS' Related Articles more
Comments