프로그래밍/CSS

06 CSS의 텍스트 다루기

윤지(●'◡'●) 2021. 4. 27. 10:50
반응형

 

CSS의 텍스트 다루기

 

 

 

1) color

 

텍스트의 색상을 설정, 기본값은 검정색이다.

 

자세한 내용은 아래 글을 참고해주세용 (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

yoonhihi.tistory.com/95

 

05 CSS의 컬러 다루기

CSS의 컬러 다루기 1)  색상 이름으로 표현하기 [문법] 선택자 {color: 색상이름;} [예시] Color 클래스 아이디 p태그 [결과] 2) RGB 색상값으로 표현 [문법] 선택자{color: rgb(0~255정수,0~255정수,0~255정..

yoonhihi.tistory.com

 

 

 

2) letter-spacing과 word-spacing

 

letter-spacing 텍스트내에서 글자 사이의 간격을 설정 적용 전 : 안녕하세요
적용 후 : 안 녕 하 세 요
word-spacing 텍스트내에서 단어 사이의 간격을 설정 적용 전: 안녕하세요. 반갑습니다. 
적용 후: 안녕하세요.       반갑습니다.

 

[문법]

선택자 { letter-spacing: 글자사이 간격 값;}
선택자{ word-spacing: 단어사이 간격 값;}

 

[예시]

<style>
        .letter{ letter-spacing: 10px;}
        .word{ word-spacing: 10px;}
</style>
<body>
    <h2>CSS텍스트 - 1</h2>
    <p><span class = "letter">안녕하세요. 반갑습니다.</span></p>
    <p><span class = "word">안녕하세요. 반갑습니다.</span></p>
</body>

 

[결과]

 

 

 

 

3) text-align

 

텍스트 수평 방향 정렬을 설정한다.(ex: 왼쪽정렬, 오른쪽정렬...)

 

[문법]

선택자{text-align: 정렬방향;}

정렬 방향의 종류에는 left, right, center, justify 등이 있다. 

 

[예시]

 

<style>
        .left{
            text-align: left;
        }
        .right{
            text-align: right;
        }
        .center{
            text-align: center;
        }
        .justify{
            text-align: justify;
        }
</style>
<body>
    <h2 class="left">왼쪽정렬(left)</h2>
    <h2 class="right">오른쪽정렬(right)</h2>
    <h2 class="center">가운데정렬(center)</h2>
    <h2 class="justify">양쪽정렬 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    Veniam omnis minima, assumenda cupiditate at aperiam 
    architecto consequatur atque fugiat labore odio soluta inventore quidem voluptas
    repellat enim laborum quibusdam doloremque!</h2>
</body>

 

 

[결과]

 

 

 

 

3) text-indent

 

단락의 첫 줄의 들여쓰기를 설정한다.

 

[문법]

선택자{text-indent: 들여쓰기크기값;}

 

 

[예시]

<style>
        .indent1{text-indent: 20px;}
        .indent2{text-indent:5%}
        /*상대적으로 크기를 늘리고 싶을 때는 %로 값을, 
        크기를 고정시키고 싶다면 px로 값을 주면 된다*/ 
</style>
<body>
    <p class="indent1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis praesentium illo et facilis consectetur libero velit in, aliquam impedit incidunt sunt illum rerum debitis placeat optio aperiam laudantium corrupti odit.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis praesentium illo et facilis consectetur libero velit in, aliquam impedit incidunt sunt illum rerum debitis placeat optio aperiam laudantium corrupti odit.</p>
    <p class="indent2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi deserunt optio aut molestias magnam tenetur accusamus, placeat aliquid rem saepe laborum, sed sunt a aperiam ad commodi eos sit reiciendis?Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis praesentium illo et facilis consectetur libero velit in, aliquam impedit incidunt sunt illum rerum debitis placeat optio aperiam laudantium corrupti odit.</p>
</body>

 

[결과]

 

 

 

4) line-height

 

텍스트의 줄 간격(높이)를 설정한다.

 

 

[문법]

선택자 {line-height: 높이값;}

 

[예시]

<style>
        p{
        	/*문단 별 구분 쉽게 하기위해 배경을 깔겠습니다.*/
            background-color: rgb(213, 190, 255);
        }

        /*기본값은 1*/
        #small-line {line-height: 0.7;}
        #big-line {line-height: 3;}
        #px-line {line-height: 20px;}
        #per-line {line-height: 50%;}
</style>
<body>
    <h2>CSS 텍스트 - 3</h2>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis distinctio in eveniet rem rerum omnis laboriosam eos ipsum. Aperiam ex ad minus ipsa, iure nobis ullam exercitationem eius dolores id?</p>
    <p id="small-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas temporibus obcaecati placeat unde sint! Qui accusantium dolore voluptates alias, sint reprehenderit recusandae quas eius sit. Deserunt sit earum saepe repellendus.</p>
    <p id="big-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia ipsa quos aliquam exercitationem voluptatem excepturi, omnis, veniam hic cumque sapiente quaerat minima enim laborum quisquam! Quaerat, id unde. Reiciendis, eos.</p>
    <p id="px-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis commodi, obcaecati exercitationem sed eius accusamus hic repudiandae iste alias. Omnis obcaecati impedit sint consequatur placeat autem, exercitationem ducimus ipsum necessitatibus!</p>
    <p id="per-line">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem unde quibusdam at quam quas alias officiis. Eius optio incidunt culpa harum, maiores eaque voluptatem temporibus nulla ipsa inventore recusandae.</p>
</body>

 

 

[결과]

 

 

 

5)  text-decoration

 

텍스트에 여러가지 효과를 설정하거나, 제거하는데 사용한다.

 

none 하이퍼링크의 밑줄을 지울 수 있다.
underline 밑줄 효과
line-through 취소선 효과
overline 글자위에 줄

 

 

[문법]

a {text-decoration: none;}/*링크 밑줄 지우기*/
선택자{text-decoration: underline;}/*밑줄*/
선택자{text-decoration: line-through;}/*취소선*/
선택자{text-decoration: overline;} /*글자 위에 줄*/

 

 

[예시]

 

<style>
        a{
            text-decoration: none;
        }
        .overline{
            text-decoration: overline;
        }
        .underline{
            text-decoration: underline;
        }
        .line-through{
            text-decoration: line-through;
        }
</style>
<body>
    <h2>CSS</h2>
    <P><a href="https://namu.wiki/w/CSS">출처: 나무위키</a></P>
    <p> <span class="overline">Cascading Style Sheet</span>
        HTML 등의 <span class="underline">마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 언어.</span>
        CSS의 C가 Cascading의 약자인데, 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 <span class="line-through">폭포수처럼</span> 내려가는 모습을 닮았기 때문이다.</p>
</body>

 

 

[결과]

 

6)  text-shadow

 

텍스트에 그림자 효과를 설정한다.

 

[문법]

선택자 {text-shadow: 가로거리 세로거리 번짐정도 색상;}

 

[예시]

 

<style>
        #shadow { color: rgb(255, 183, 183); text-shadow: 10px -10px 5px rgb(109, 103, 103);}
</style>
<body>
    <h1 id="shadow">CSS text-shadow 속성</h1>
</body>

 

 

[결과]

 

 

 

7)  text-transform와 font-variant

 

text-transform uppercase 대문자로 변경
lowercase 소문자로 변경
capitalize 맨 앞글자만 대문자로 변경
font-variant small-caps 소문자 크기의 대문자로 변경 

 

[문법]

선택자{text-transform: lowercase;}
선택자{text-transform: uppercase;}
선택자{font-variant: small-caps;}
선택자{text-transform: capitalize;}

 

[예시]

<style>
        .trans1 {text-transform: lowercase;} /*소문자로*/
        .trans2 {text-transform: uppercase;} /*대문자로*/
        .trans3 {font-variant: small-caps;} /*소문자 크기의 대문자로 변경*/
        .trans4 {text-transform: capitalize;}/*맨 앞글자만 대문자로*/
</style>
<body>
    <h2>CSS 텍스트 - 6</h2>
    <h3>프로그래밍 언어</h3>
    <ul>
        <li class = "trans1">Java</li>
        <li class = "trans2">JavaScript</li>
        <li class = "trans3">jQuery</li>
        <li class = "trans4">node.js</li>
    </ul>
</body>

 

[결과]

 

8)  text-overflow, white-space와 overflow

 

 

text-overflow 텍스트가 기준선을 벗어나 
넘칠 경우 넘치는 텍스트를 
어떻게 처리할지 설정		 clip 글자를 자름
elipsis ...으로 표시
 white-space 스페이스와 탭, 줄바꿈, 
자동 줄바꿈을 어떻게 
처리할지 설정		 wrap 텍스트가 들어가는 블록 요소의
사이즈에 따라 줄바꿈 
wordbreak 텍스트가 들어가는 블록요소의
가로 사이즈에 맞춰 줄바꿈 설정
nowrap 뚫고나감
overflow 기준선을 벗어나 넘칠 경우 
넘치는 값을 어떻게 
처리할지 설정		 hidden 숨김
visible 보여줌

 

 

[문법]

속성명에 맞게 원하는 속성을 넣으면 된다.

선택자{
            white-space: wrap;
            overflow: hidden;
            text-overflow: ellipsis;
}

 

[예시]

<style>
        .content{
            border: 3px dotted red;
            width: 400px;
            padding: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /*hover : content위에 마우스를 올렸을 때*/
        .content:hover {overflow: visible;}
</style>
<body>
    <h2>CSS 텍스트</h2>
    <p class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat eius officiis, cum ipsam error cumque rerum dolor ullam commodi neque facilis labore. Dolorum, fugiat? Quasi, blanditiis? Quis dolorum voluptatibus rerum?</p>
</body>

 

[결과]

white-space: nowrap; 으로 설정했지만,  overflow: hidden; 으로 넘치는 값을 숨겼고,

text-overflow: ellipsis;로 뒤에 내용이 ...으로 표시된다.

하지만, hover를 적용했기때문에 마우스를 올리면 가려졌던 값이 뚫고 나와(white-space: nowrap;) 보여진다.

 

 

 

 

 

 

 

열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.

수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>

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