이진욱의코딩

여러가지 폰트속성에 대해서 알아봅시다. 본문

CSS

여러가지 폰트속성에 대해서 알아봅시다.

Crucifi 2019. 10. 5. 20:09

이번 시간에는 css의 여러 가지 폰트 속성에 대해 알아보겠습니다.

 

 

 

첫 번째로는 text-align속성인데요

text-align은 블락 요소 내 인라인(텍스트, 이미지 등) 요소의 문단 정렬을 위한 속성으로, 

"블락 요소"에 적용해야 합니다.

이미지(img) 같은 경우에는 인라인 요소이기 때문에  적용이 불가능합니다.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>여러가지 폰트</title>
    <style>
      p{background:green; width:400px; text-align:justify; margin:0 auto; }
      div{text-align:center;}
      span{background:red; color:white;
            text-align:center; display:block;}
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, possimus.</p>
    <div>
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
    </div>
     <div><img src="C:/Users/이진욱/Desktop/새 폴더/images/spider.jpg" alt="스파이더맨" width="300"></div>
  </body>
</html>

 

이미지는 적용이  되지않은 모습

 

두 번째로는 vertical-align속성인데요 흔히 수직 정렬할 때 사용됩니다.

텍스트를 수직으로 정렬하는 속성으로 vertiacl-align를 사용합니다. block 요소가 아닌 inline 이나 inline-block 에서만 가능합니다. 왜냐하면 vertiacl-align 은 행 방향으로 나열된 요소들의 수직 정렬 옵션이기 때문입니다. 그래서 줄 바꿈이 있는 <div> <div>에서는 안됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img{vertical-align: -120px;}
        /* 인라인 요소와 인라인 요소의 가로정렬  */
        span{vertical-align: 500px;}
    </style>
</head>
<body>
    <img src="C:/Users/이진욱/Desktop/새 폴더/images/spider.jpg" alt="스파이더맨">
    <span>스파이더맨배경</span>
</body>
</html>

 

세 번째로는 text-indent속성인데요 이것은 한 줄 들여 쓰기 속성으로, 두 번째 줄부터는 원래 위치입니다.

또는 영역은 그대로 유지하면서 텍스트만 안 보이도록 적용할 때 text-indent값으로 마이너스 값을 적용합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* p태그를 100px만큼 들여쓰시오 */
    p{
        margin-left: 100px;
        text-indent: 100px;
        background: cadetblue;}
       
    </style>
</head>
<body>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat facilis architecto quasi illum sed pariatur!
       Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat facilis architecto quasi illum sed pariatur!
       Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat facilis architecto quasi illum sed pariatur!</p>
</body>
</html>

네 번째로는 line-height속성으로 줄 높이를 설정하는 속성입니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body > p{line-height: 16px;}    
    div{background-color: chartreuse; color: red;
    font-size: 24px;
    width: 500px; /* height: 200px; */
    text-align: center;
    line-height: 300px;}
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis repellendus eligendi optio, quae autem quas tempore natus dolore, alias possimus maxime minima incidunt eius dolorum magni vero est rerum eum placeat, nulla quaerat? Laboriosam, doloremque itaque culpa quas maxime unde ipsam eaque accusantium debitis iste perferendis excepturi ad sunt praesentium libero exercitationem maiores ab nobis neque, sit optio animi. Neque, enim, quis quae non facilis consectetur sapiente quo officia, ratione commodi tenetur eum repudiandae nulla. Atque optio laborum assumenda explicabo, illo eveniet nobis vel suscipit sit consequuntur quisquam dignissimos inventore repellat incidunt obcaecati dolore porro cum odio maiores! Cum, at!</p>
    <div>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
    </div>
</body>
</html>

 

다섯 번째로는 letter-spacing과 word-spacing속성입니다. letter-spacing은 글자 간의 간격을 띄우는 역할을 하며

word-spacing은 단어 간의 간격을 띄우는 역할을 합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
    p:first-child{letter-spacing: 10px;}
        
    p:last-child{word-spacing: 20px;}
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
</body>
</html>

 

마지막으로 남은 기타 속성들을 설명해드리겠습니다.

word-break:break-all은 글자 단위로 줄 바꿈을 하는 역할을 하고, word-wrap:break-word는 글자가 튀어나오는 것을 방지합니다. white-space:nowrap은 튀어나오는 말든 모두 한 줄로 나오게 만드는 역할을 합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{width: 500px; font-size: 20px; background-color: darkcyan;}
        p:nth-child(2){word-break: break-all;} /*글자단위로 줄바꿈*/
        p:nth-child(3){width: 300px; word-wrap: break-word;} /*글자 튀어나오는거 방지*/
        p:last-child{white-space: nowrap;}/*모두 한줄로*/
    </style>
</head>
<body>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        http://amberafdsaff.com/2010/11/ansdf-dasdas-dad-qwrwrr/
    </p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</body>
</html>

 

여기까지가 css의 여러 가지 폰트에 대한 정리입니다.

감사합니다~

'CSS' 카테고리의 다른 글

<css> float에 대해 알아보도록 합시다.  (1) 2019.10.08
<css> 위치(position)에 대해 알아봅시다.  (0) 2019.10.05
css의 여러가지 선택자에 대해 알아봅시다.  (0) 2019.09.24
스타일시트 적용방법에 대해 알아봅시다.  (0) 2019.09.24
미디어 쿼리 써먹기(응용)  (0) 2019.07.15
'CSS' Related Articles more