HTML, CSS

[CSS 기초이론] - CSS 텍스트 그림자 효과, 구글 웹 폰트 활용하기

일등하이 2021. 1. 13. 20:29
반응형

www.youtube.com/watch?v=lJA-QOWXqIc&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99&index=7

<!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=Lobster&family=Yusei+Magic&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&family=Yeon+Sung&display=swap"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap"
      rel="stylesheet"
    />
    <title>CSS 텍스트 그림자효과, 구글 웹 폰터 활용</title>
    <style>
      body {
        background-color: #222222;
        font-family: 'Nanum Gothic', sans-serif;
        font-size: 14px;
        line-height: 1.6em;
      }
      h1 {
        font-weight: normal;
        font-family: 'Yeon Sung', cursive;
        font-size: 4em;
        line-height: 1em;
      }
      h2.txt-shadow {
        font-weight: normal;
        font-family: 'Merienda', cursive;
        font-size: 6em;
        text-shadow: 0 0 10px #ececec;
        text-transform: uppercase;
        color: orange;
      }
      h2.txt-shadow2 {
        color: goldenrod;
        font-family: 'Merienda', cursive;
        font-weight: normal;
        font-size: 6em;
        text-transform: uppercase;
        text-shadow: 5px 5px 0 darkblue, 10px 10px 0 crimson;
      }
      p {
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h1>
      캠핑칸, 30년 캠핑 텐트 전문업체, 확실한AS,마카돔,오크돔,마카플러스,오크벨.
    </h1>
    <h2 class="txt-shadow">campingkan</h2>
    <h2 class="txt-shadow2">campingkan</h2>
    <p>
      30년동안 수출과 군납, 내수 면텐트를 전문적으로 제작해 온 업체입니다. 이제
      캠핑칸이란 이름으로 새 출발을 시작하게 되었습니다. 지난 30년간의 기술력을
      바탕으로 한 최고의 품질과 서비스로 보답하겠습니다. 많은 성원 부탁드립니다.
    </p>
  </body>
</html>

반응형