728x90
반응형
#em : 지정한 font-size #배  
#rem : 기본 시스템 font-size #배  
em
rem
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body > span:first-of-type {font-size: 2em;}
        /* em : 지정한 폰트크기의 2배 */
        body > span:nth-of-type(2) {font-size: 2rem;}
        /* rem : 기본 시스템 폰트크기의 2배*/

        .divClass {font-size: 20px;}

        .divClass:nth-of-type(1)>span {font-size: 2em;}
        .divClass:nth-of-type(2)>span {font-size: 2rem;}

        .divBox {
            width: 300px;
            height: 200px;
            background: lightgreen;
            margin: 50px;
        }
        .divBox1 {box-shadow: 2em 0 0.5em #000;}
        .divBox2 {font-size: 10px;box-shadow: 2em 0 0.5em #000;}
        .divBox3 {font-size: 10px;box-shadow: 2rem 0 0.5rem #000;}
    </style>
</head>
<body>
    <span>span1</span>
    <div class="divClass"><span>div span1</span></div>
    <span>span2</span>
    <div class="divClass"><span>div span2</span></div>

    <div class="divBox1 divBox"></div>
    <div class="divBox2 divBox"></div>
    <div class="divBox3 divBox"></div>
</body>
</html>​
 

text-shadow (텍스트 그림자)
text-shadow:  값1 값2  값3 값4 ;
- 값1 : 텍스트부터 그림자까지의 x축 방향
 (양수-글자 오른쪽 그림자, 음수:글자 왼쪽 그림자)
- 값2 : 텍스트부터 그림자까지의 y축 방향
 (양수-글자 아래쪽 그림자, 음수:글자 위쪽 그림자)
- 값3 : blur효과(=글자 번짐효과, 양수-모든 방향으로 그림자 번짐효과, 음수- 모든 방향으로 그림자 축소, 기본값 0)
- 값4 : 그림자 색상 지정 (한 가지 색 지정)

여러 색상 값 지정 가능한 형식
- text-shadow:  값1 값2  값3 값4, 값1 값2  값3 값4, 값1 값2  값3 값4 ...; */
여러개의 그림자를 주고 싶은 경우, 쉼표(,콤마)로 나열
text-shadow:
0 0 4px #ccc,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px #f80,
2px -19px 18px #f20;

text-shadow: 0 0 4px #ccc;
text-shadow: 0 -5px 4px #ff3;
text-shadow: 2px -10px 6px #fd3;
text-shadow: -2px -15px #f80;
text-shadow: 2px -19px 18px #f20;
letter-spacing - 자간거리
 
linear-gradient(to left/45deg,#222, white)
 
text-shadow
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #div01 h1 {
        font-size: 100px;
        font-family: "Arial Rounded MT";
      }
      .shadow1 {
        color: orange;
        text-shadow: 10px 10px #777;
      }
      .shadow2 {
        text-shadow: 5px 5px #f00;
      }
      .shadow3 {
        color: #fff;
        text-shadow: 7px -7px 5px #000;
      }
      #div02 {
        background: #222;
        width: 300px;
        height: 100px;
      }
      .shadow4 {
        font-size: 80px;
        font-family: "Arial Rounded MT";
        letter-spacing: 4px;
        color: #000;

        text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
          -2px -15px #f80, 2px -19px 18px #f20;

        /* text-shadow: 0 0 4px #ccc;
        text-shadow: 0 -5px 4px #ff3;
        text-shadow: 2px -10px 6px #fd3;
        text-shadow: -2px -15px #f80;
        text-shadow: 2px -19px 18px #f20; */
      }

      /* text-shadow : 값1, 값2, 값3, 값4;
        값1 : 텍스트부터 그림자까지의 x축 방향(양수-글자 오른쪽 그림자, 음수:글자 왼쪽 그림자)
        값2 : 텍스트부터 그림자까지의 y축 방향(양수-글자 아래쪽 그림자, 음수:글자 위쪽 그림자)
        값3 : blur효과(=글자 번짐효과, 양수-모든 방향으로 그림자 번짐효과, 음수- 모든 방향으로 그림자 축소, 기본값 0)
        값4 : 그림자 색상 지정 (한 가지 색 지정)

        여러 색상 값 지정 가능한 형식
        text-shadow : 값1 값2 값3 값4, 값1 값2 값3 값4, 값1 값2 값3 값4...; */
    </style>
  </head>
  <body>
    <div id="div01">
      <h1 class="shadow1">HTML5</h1>
      <h1 class="shadow2">HTML5</h1>
      <h1 class="shadow3">HTML5</h1>
    </div>
    <div id="div02"><h1 class="shadow4">HTML5</h1></div><br><br>
  </body>
</html>​
728x90
반응형
저작자표시 비영리 변경금지

'[CSS]' 카테고리의 다른 글

[CSS] text-overflow(말줄임표), letter-spacing (글자 사이의 자간), word-sapcing (단어자 사이의 자간)  (0) 2024.02.23
[CSS] text-align(텍스트 정렬), text-indent(들여쓰기)  (0) 2024.02.23
[CSS] video  (0) 2024.02.23
[CSS] audio  (0) 2024.02.23
[CSS] box-shadow  (0) 2024.02.23

+ Recent posts

티스토리툴바