08. 텍스트 스타일

 

 

1. 텍스트 방향 지정하기

- 아랍권 사용자를 위해 글씨를 오->왼 순으로 정렬해주는 기능

    <style>
        .direction1 {
            direction: ltr;
        }
        
        .direction2 {
            direction: rtl;
        }
    </style>
    <div class="direction1"> 왼쪽에서 오른쪽으로 가는 서구 스타일</div>
    <div class="direction2"> 오른쪽에서 왼쪽으로 가는 아랍 스타일</div>
    <div class="direction2"> 일타스 랍아 는가 로으쪽왼 서에쪽른오</div>

왼쪽에서 오른쪽으로 가는 서구 스타일

오른쪽에서 왼쪽으로 가는 아랍 스타일

일타스 랍아 는가 로으쪽왼 서에쪽른오

 

2. 글꼴색상 지정하는 방법

- color 속성을 통해 글자색을 지정 가능하다
- 방법1) 16진수 3byte or 4byte RGB값, #FF00AA 
- 방법2) RGB/RGBA 함수 사용 ex) rgb(255,0,200)
-이미 표준화된 색상 텍스트로 정의 , ex) red, blue...
- VSCODE에서는 색상 플러그인을 통해 자유롭게 색상조절이 가능하다!

   <style>
        .color1 {
            /* color: #ff23ff; */
            color: #ff00aa30;
            /* 뒤에 2자리 30은 알파값 (투명도) */
        }
        
        .color2 {
            color: rgb(174, 184, 2);
            background-color: rgba(102, 169, 184, 0.59);
            /* 뒤에 0.59는 알파값 */
        }
        
        .color3 {
            color: blue;
        }
    </style>
    <div class="color1"> color1, 방법 1 입니다.</div>
    <div class="color2"> color2, 방법 2 입니다.</div>
    <div class="color3"> color3, 방법 3 입니다.</div>

color1, 방법 1 입니다.

color2, 방법 2 입니다.

color3, 방법 3 입니다.

 

3.텍스트 밑줄, 취소서 등의 선 표시하는 방법

- text-decoration 속성을 사용하여 활용

    <style>
        .text_deco1 {
            text-decoration: none;
        }
        
        .text_deco2 {
            text-decoration: underline;
        }
        
        .text_deco3 {
            text-decoration: line-through;
        }
        
        .text_deco4 {
            text-decoration: overline;
        }
    </style>

    <div class="text_deco1"> 밑줄이 없는 태그 (일반적인 상태)</div>
    <a href="00_css01.html">일반 a태그 </a><br>
    <a href="00_css01.html" class="text_deco1">일반 a태그 </a><br>
    <div class="text_deco2"> 아래에 밑줄- 강조때 사용</div>
    <div class="text_deco3"> 가운데줄-취소선</div>
    <div class="text_deco4"> 위쪽에줄</div>

밑줄이 없는 태그 (일반적인 상태)

일반 a태그
일반 a태그

아래에 밑줄- 강조때 사용

가운데줄-취소선

위쪽에줄

 

3. 영문 대소문자를 변경하는 옵션

- text-transform 옵션을 활용

    <style>
        .text_trans1 {
            text-transform: none;
        }
        
        .text_trans2 {
            text-transform: capitalize;
        }
        
        .text_trans3 {
            text-transform: uppercase;
        }
        
        .text_trans4 {
            text-transform: lowercase;
        }
    </style>
    <div class="text_trans1">I am a ironMAN. none.</div>
    <div class="text_trans2">I am a ironMAN. capitalize.</div>
    <div class="text_trans3">I am a ironMAN. uppercase.</div>
    <div class="text_trans4">I am a ironMAN. lowercase.</div>

I am a ironMAN. none.

I am a ironMAN. capitalize.

I am a ironMAN. uppercase.

I am a ironMAN. lowercase.

 

3. 그림자옵션

- text-shadow 를 활용하여 그림자 셋팅 가능

    <style>
        .bg {
            background-color: black;
            margin: 30px;
            padding: 50px;
            width: 100%;
            height: 500px;
        }
        
        .text_shadow1 {
            color: orangered;
            text-shadow: 5px 5px orange;
            font: 30pt bold;
        }
        
        .text_shadow2 {
            color: white;
            text-shadow: 0px 1px 20px #fff;
            line-height: 30pt;
            font: 30pt bold;
        }
        
        .text_shadow3 {
            color: white;
            text-shadow: 5px 5px 20px turquoise;
            line-height: 30pt;
            font: 30pt bold;
        }
        
        .text_shadow4 {
            color: rgb(44, 33, 33);
            line-height: 30pt;
            font: 30pt bold;
            text-shadow: 0px 0px 4px #ccc, 0px -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20;
        }
    </style>

    <div class="bg">
        <p class="text_shadow1">그림자 있는 글꼴입니다. 5px 5px orange</p>
        <p class="text_shadow2">그림자 있는 글꼴입니다. 0px 1px 20px white</p>
        <p class="text_shadow3">그림자 있는 글꼴입니다. 5px 5px 20px turquoise</p>
        <p class="text_shadow4">그림자 있는 글꼴입니다. 복합적으로 줄수 있답니다.</p>
    </div>

그림자 있는 글꼴입니다. 5px 5px orange

그림자 있는 글꼴입니다. 0px 1px 20px white

그림자 있는 글꼴입니다. 5px 5px 20px turquoise

그림자 있는 글꼴입니다. 복합적으로 줄수 있답니다.

 

 

---

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."