4. CSS Text

728x90

1. CSS 폰트 사이즈 단위

default: 16px, 1em(100%)

2. 텍스트 서식(1)

1) color: 글꼴 색을 지정하는 특성

value: color name

2) text-decoration: 텍스트 줄 표시 / 제거

3) text-transform: 텍스트를 대문자 및 소문자로 변환

value: none capltallze uppercase lowercase

4) text-shadow: 텍스트 그림자 효과

value(1): [x-축거리][y-축거리][퍼짐 거리 정도][색상]
value(2): none

5) letter-spacing: 알파벳 간격 조정 ★자주 사용된다.

value: px em pt % rem

6) word-spacing: 단어 간격 조정 (자주사용안함)

value : px em pt % rem

3. 텍스트 서식(2)

1) text-align: 문자 정렬 방법을 지정하는 속성

value: center left right justify

2) direction: 쓰기 방향 지정 (자주사용안함)

value: ltr rtl

3) text-indent: 들여쓰기 텍스트 (자주사용안함)

value: px em pt % rem

4) line-height

value: px em pt % rem

예제1 ) text-shadow

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>웹폰트 활용하기</title>
        <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
        <style>
            h1 {
                font-family: 'Permanent Marker', cursive;
            }
            
        </style>
    </head>
    <body>
        <h1>
           CSS 웹폰트 활용하기
        </h1>
        <p>
             HTML5, CSS3, jQuery, WordPress, Mobile Web App Coding, Bootstrap, Semantic-UI, Responsive Web Coding 
        </p>
    </body>
</html>

예제 2) text-shadow 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>텍스트쉐도우</title>
    <link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet">
    <style>
        body {
            background-color : #333;
        }
        h1.text-shadow1 {
            font-family: 'Merienda';
            font-size: 50px;
            color: gold;
            text-transform: uppercase;
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.51);
        }
        h1.text-shadow2 {
            color: gold;
            font-family: 'Merienda';
            font-size: 50px;
            text-transform: uppercase;
            text-shadow: 5px 5px 0 darkblue, 10px 10px 30px dodgerblue;
        }
    </style>
</head>
<body>
    <h1 class="text-shadow1">csscodingTest</h1>
    <h1 class="text-shadow2">cssCodingTest</h1>
</body>
</html>

저작자표시 비영리 변경금지

'2019백업' 카테고리의 다른 글

6. CSS 배경 색상 및 이미지 제어하기 (속성: background-image, background-repeat) (0)	2019.07.22
5. CSS 목록 스타일 (0)	2019.07.22
3. 브라우저 벤더프리픽스 (0)	2019.07.22
2. CSS 선택자 (태그, 클래스, 아이디, 하위, 그룹, 전체 선택자) (0)	2019.07.22
1. CSS 기초이론 (0)	2019.07.22

'2019백업' 카테고리의 다른 글

티스토리툴바