HTML, CSS

[CSS 기초이론] - CSS 텍스트 관련 스타일

일등하이 2021. 1. 13. 19:54
반응형

www.youtube.com/watch?v=7_X7AZJLNUo&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99&index=6

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap"
      rel="stylesheet"
    />
    <title>CSS 필수이론</title>
    <style>
      body {
        font-size: 14px;

        /* 600 = bold */
        /* font-weight: bold; */

        /* 1em = 14px font-size에 상대적으로 변함*/
        line-height: 1.5em;
        font-family: 'Nanum Gothic';
        text-align: center;
      }
      h2 {
        /* 소문자를 약간 대문자로 표시 */
        /* font-variant: small-caps; */
        font-size: 2rem;
        text-transform: uppercase;
        color: crimson;
        /* font-weight: normal; */
        /* letter-spacing: 5px; */
        /* word-spacing: 10px; */
        text-shadow: 5px 5px 10px rgb(88, 8, 8);
        /* direction: ltr; */
        text-align: center;
      }
      p {
        /* 왼쪽 오른쪽 수평(양쪽)정렬  */
        text-align: justify;
      }
      h3 {
        /* text-decoration: underline; */
      }
    </style>
  </head>
  <body>
    <h1>캠핑칸</h1>
    <h2>Camping kan</h2>
    <h3>enjoy life in nature</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque vero
      exercitationem voluptatem, inventore, laudantium necessitatibus nam odio
      maxime autem natus perspiciatis odit ex distinctio. Blanditiis, minus
      perferendis nam itaque dicta praesentium voluptate necessitatibus.
      Voluptatem odio, qui maxime hic illum tempore!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque vero
      exercitationem voluptatem, inventore, laudantium necessitatibus nam odio
      maxime autem natus perspiciatis odit ex distinctio. Blanditiis, minus
      perferendis nam itaque dicta praesentium voluptate necessitatibus.
      Voluptatem odio, qui maxime hic illum tempore!
    </p>
  </body>
</html>

반응형