web study

font와 text의 여러 특성들 본문

web/css

font와 text의 여러 특성들

nayeon web 2023. 1. 10. 13:29 
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <title>color 연습</title>
  <style>
    h1 {
      font-style: italic;
    }

    .text1 {}

    .text1 .background {
      background-color: rgb(166, 123, 196);
      text-decoration: underline;
      font-weight: 700;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif, Courier, monospace;
    }

    .shadow {
      text-shadow: 10px 10px 10px red;
    }

    .line {
      text-decoration: line-through;
    }

    .deco {
      background-color: yellow;
    }

    .deco2 {
      background-color: orange;
      letter-spacing: 10px;
    }
  </style>
</head>

<body>
  <h1>font와 text의 여러 특성들</h1>
  <ul>
    <li>font-family:서체</li>
    <li>font-size:서체 크기</li>
    <li>font-weight:서체 굵기</li>
    <li>font-style:서체 스타일</li>
  </ul>
  <ul>
    <li>text-transform:대소문자 조절</li>
    <li>text-decoration:밑줄 및 취소선</li>
    <li>text-align:서체 및 인라인 정렬</li>
    <li>text-indent:들여쓰기/내쓰기</li>
    <li>text-shadow:서체 그림자</li>
  </ul>
  <ul>
    <li>fline-height:줄과 줄 사이의 간격. 행간</li>
    <li>letter-spacing:글자와 글자 사이의 간격. 자간</li>
    <li>word-spacing:단어와 단어 사이의 간격. 어간</li>
  </ul>
  <p class="text1">
    아이들의 덮어 이름자 나의 별 하나에 불러 많은 지나가는 봅니다. <span class="background">까닭이요, 어머니 그리고 그러나 흙으로 위에 밤이 가슴속에 버리었습니다.</span> 잔디가 별이
    이런 북간도에 계십니다. <span class="line">어머니,하나의 노루, 다 잠,별 봅니다</span>. 내보고, 새워 나는 가득 이 헤일 이국 있습니다. 비둘기, 하나 어머니 지나고 계십니다. 별이
    아침이 계집애들의 새겨지는 이름과,많은 이런 했던 라이너 듯합니다. 아스라히 같이
    어머니, 지나고 나의
    나는
    하나 아름다운 계십니다. <span class="shadow">딴은 않은 이름을 비둘기</span>, 소녀들의 아직 밤이 봅니다.그리고 이런 자랑처럼 말 것은 봅니다. 쓸쓸함과 했던 내 이름과, 새워 때
    까닥이요, 이름과 소녀들의
    까닭입니다. 그리워 시와
    프랑시스
    이름을 별빛이 한 있습니다. 이노새, 하나에 보고, 내 계집애들의 속의 멀리계십니다. 나의 때 까닭이요,
  </p>
  <p class="text2">
    <span class="deco">보고,까닭이요,벌레는 쓸쓸함과 청춘이</span>많은 하나에 까닭입니다.하나에 아스라히 없이 가슴속에 어머님, 새겨지는 이름을 책상을 너무나 있습니다. 그리고 이런 자랑처럼
    말 것은 봅니다. 쓸쓸함과 했던 내 이름과,
    새워 때
    까닥이요, 이름과 소녀들의 까닭입니다. <span class="deco2">그리워 시와 프랑시스 이름을 별빛이 한 있습니다. 이노새, 하나에 보고, 내 계집애들의 속의 멀리 계십니다. 나의 때 까닭이요,
      언그리고 이런 자랑처럼 말 것은 봅니다.
      쓸쓸함과 했던 내 이름과, 새워 때 까닥이요,</span> 이름과 소녀들의 까닭입니다. 그리워 시와 프랑시스 이름을 별빛이 한있습니다. 이노새,하나에 보고, 내 계집애들의 속의 멀리 계십니다. 나의 때
    까닭이요
  </p>
</body>

</html>
color 연습

font와 text의 여러 특성들

  • font-family:서체
  • font-size:서체 크기
  • font-weight:서체 굵기
  • font-style:서체 스타일
  • text-transform:대소문자 조절
  • text-decoration:밑줄 및 취소선
  • text-align:서체 및 인라인 정렬
  • text-indent:들여쓰기/내쓰기
  • text-shadow:서체 그림자
  • fline-height:줄과 줄 사이의 간격. 행간
  • letter-spacing:글자와 글자 사이의 간격. 자간
  • word-spacing:단어와 단어 사이의 간격. 어간

아이들의 덮어 이름자 나의 별 하나에 불러 많은 지나가는 봅니다. 까닭이요, 어머니 그리고 그러나 흙으로 위에 밤이 가슴속에 버리었습니다. 잔디가 별이 이런 북간도에 계십니다. 어머니,하나의 노루, 다 잠,별 봅니다. 내보고, 새워 나는 가득 이 헤일 이국 있습니다. 비둘기, 하나 어머니 지나고 계십니다. 별이 아침이 계집애들의 새겨지는 이름과,많은 이런 했던 라이너 듯합니다. 아스라히 같이 어머니, 지나고 나의 나는 하나 아름다운 계십니다. 딴은 않은 이름을 비둘기, 소녀들의 아직 밤이 봅니다.그리고 이런 자랑처럼 말 것은 봅니다. 쓸쓸함과 했던 내 이름과, 새워 때 까닥이요, 이름과 소녀들의 까닭입니다. 그리워 시와 프랑시스 이름을 별빛이 한 있습니다. 이노새, 하나에 보고, 내 계집애들의 속의 멀리계십니다. 나의 때 까닭이요,

보고,까닭이요,벌레는 쓸쓸함과 청춘이많은 하나에 까닭입니다.하나에 아스라히 없이 가슴속에 어머님, 새겨지는 이름을 책상을 너무나 있습니다. 그리고 이런 자랑처럼 말 것은 봅니다. 쓸쓸함과 했던 내 이름과, 새워 때 까닥이요, 이름과 소녀들의 까닭입니다. 그리워 시와 프랑시스 이름을 별빛이 한 있습니다. 이노새, 하나에 보고, 내 계집애들의 속의 멀리 계십니다. 나의 때 까닭이요, 언그리고 이런 자랑처럼 말 것은 봅니다. 쓸쓸함과 했던 내 이름과, 새워 때 까닥이요, 이름과 소녀들의 까닭입니다. 그리워 시와 프랑시스 이름을 별빛이 한있습니다. 이노새,하나에 보고, 내 계집애들의 속의 멀리 계십니다. 나의 때 까닭이요

'web > css' 카테고리의 다른 글

마우스 이벤트 mouse event  (0) 2023.01.10
배경색 background-color  (0) 2023.01.10
글자 색상 color  (0) 2023.01.10
'web/css' Related Articles more