CSS day6

2022-01-11 4 분 소요

color

text-align

line-height

text-decoration

text-shadow

etc

텍스트

텍스트 관련 스타일

글자와 단어, 그리고 글자로 이루어진 문단에서 사용하는 스타일에 대해 알아보자.

color

웹문서에서 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때는 color 속성을 사용하면 된다.

기본형

color: <색상>

color: #ffff00 | rgb(0,0,255) | blue

위와 같은 코드로 표현이가능하며 16진수 표현법과 rgb 표현법, 색생명 표현법이라고 한다.

16진수 표현법 : 웹 문서의 CSS에서 색상을 16진수로 표현하는 방법으로 위 코드와 같이 #기호 다음으로 6자리의 16진수로 표시한다. 포토샵 같은 그래픽 프로그램에서 색상을 지정할때 사용하는 가장 기본적인 방법이다. 16진수는 #000000(검은색)부터 #ffffff(흰색)까지 표현 가능하고 만약 색상 값이 두자리씩 중복이 될 경우 #ff0처럼 줄여서 표현이 가능하다.

rgb 표현법 : CSS에서 색상을 지정할 때 주로 사용하는 방법으로 순서대로 빨강, 초록, 파랑의 값을 0부터 255까지 표시하여 rgb(0,0,0)부터 rgb(255,255,255)까지 표현하는 방법이다. rgba 표현법도 있는데 뒤에 a는 투명도를 의미하여 예를 들어 rgb(0, 0, 255, 0.5)라고 하면 투명도를 50%로 적용하라는 의미이다.

색상명 표현법 : 생상을 표기할 때 red, yellow, black 과 같이 색상이름을 직접 기입함으로서 적용하는 방법이다.

text-align

문단의 텍스트 정렬 방법을 지정하는 속성으로 왼쪽, 오른쪽, 가운데 정렬 등을 지정 가능하다.

기본형

font-size: left | right | center | justify

종류	설명
left	왼쪽에 맞춰 문단을 정렬한다.
right	오른쪽에 맞춰 문단을 정렬한다.
center	가운데에 맞춰 문단을 정렬한다.
justify	양쪽에 맞춰 문단을 정렬한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트</title>
    <style>
        p{
            border: 3px dotted red;
            padding: 10px;
            margin: 20px;
        }
        .align-left{text-align: left;}
        .align-right{text-align: right;}
        .align-center{text-align: center;}
        .align-justify{text-align: justify;}
    </style>
</head>
<body>
    <p class="align-left">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime numquam, fugiat doloribus similique eius ut sapiente animi illum quas quidem, assumenda ipsum, sed nihil vel sit eligendi possimus eveniet quae.</p>
    <p class="align-right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime numquam, fugiat doloribus similique eius ut sapiente animi illum quas quidem, assumenda ipsum, sed nihil vel sit eligendi possimus eveniet quae.</p>
    <p class="align-center">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime numquam, fugiat doloribus similique eius ut sapiente animi illum quas quidem, assumenda ipsum, sed nihil vel sit eligendi possimus eveniet quae.</p>
    <p class="align-justify">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime numquam, fugiat doloribus similique eius ut sapiente animi illum quas quidem, assumenda ipsum, sed nihil vel sit eligendi possimus eveniet quae.</p>
</body>
</html>

CSS6-1

line-height

두 줄 이상의 문장의 경우 줄 간 간격이 생기는데 그 간격이 좁거나 넓으면 가독성이 떨이지게 된다. 이때 line-height속성을 이용하면 원하는 만큼 조절이 가능하다.

기본형

line-height: <원하는 크기, 정수>px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트</title>
    <style>
        p{border: 3px dotted red;
        padding: 10px;
        margin: 20px;}
        #small_line{ line-height: 0.7;}
        #big_line{line-height: 3;}
        #px_line{line-height: 16px;}
        #per_line{line-height: 50%;}
    </style>
</head>
<body>
    <p id="small_line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, debitis? Ea alias suscipit autem sit provident earum accusantium deserunt odit optio. Tenetur rem facere modi maxime explicabo consequatur libero dolorum.</p>
    <p id="big_line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, debitis? Ea alias suscipit autem sit provident earum accusantium deserunt odit optio. Tenetur rem facere modi maxime explicabo consequatur libero dolorum.</p>
    <p id="px_line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, debitis? Ea alias suscipit autem sit provident earum accusantium deserunt odit optio. Tenetur rem facere modi maxime explicabo consequatur libero dolorum.</p>
    <p id="per_line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, debitis? Ea alias suscipit autem sit provident earum accusantium deserunt odit optio. Tenetur rem facere modi maxime explicabo consequatur libero dolorum.</p>
</body>
</html>

CSS6-2

text-decoration

text-decoration 속성은 텍스트의 밑줄을 긋거나 취소선을 의미한다. 하이퍼링크의 기본 밑줄을 지우는데도 사용된다.

기본형

text-decoration: none | underline | overline | line-through

종류	설명
none	하이퍼 링크 등으로 인한 밑줄을 지우는데 사용
underline	밑줄을 표시
overline	윗줄을 표시
line-through	취소선 표시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트</title>
    <style>
        a{text-decoration: none; color: greenyellow;}
        .under{text-decoration: underline;}
        .though{ text-decoration: line-through;}
    </style>
</head>
<body>
    <h2>HyperText Mark-up Language</h2>
    <p><a href="https://namu.wiki/w/HTML">출처 : HTML(나무위키)</a></p>
    <p> "Hyper Text Mark-up Language" 의 약자. <span class="under">웹 페이지의 모습을 기술하기 위한 규약.</span> 프로그래밍 언어가 아니라 마크업 언어[1]다. 헷갈리지 않도록 하자.[2] 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서다.</p>
    <p>최초 제안자는 CERN의 물리학자 티머시 J. 버너스리이다. URL, HTTP, WWW의 전신인 Enquire 등도 그가 세트로 개발하고 제안했다. TCP/IP 통신규약을 만든 빈턴 G. 서프(Vinton Gray Cerf)와 함께 인터넷의 아버지로 불린다.</p>
    <p><span class="though">나무위키에서는 다음과 같이 내용을 집어넣어 HTML을 적용시킬 수 있지만 도움말에 의하면 지원 종료 가능성이 있는 비권장 문법이므로 나무위키에서는 HTML 태그를 사용하지 않는 것을 추천한다.</span></p>
    </p>
</body>
</html>

CSS6-3

text-shadow

텍스트에 그림자 효과를 줄 수 있는 속성으로 사이트의 제목처럼 강조를 하고 싶은 글자에 사용하면 가시성을 높여줄 수 있는 속성이다. 밋밋한 텍스트에 입체감을 불어 넣는 효과도 있다.

기본형

text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

이렇게 표현이 가능하고 none의 경우 효과를 지우는 속성값이다. 가로 거리에 양수값은 오른쪽을, 음수값은 왼쪽으로 그림자를 만들며, 세로거리는 양수값은 아래쪽으로, 음수값은 윗쪽으로 그림자를 만든다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트</title>
    <style>
        h1{font-size: 50px;}
        #shadow1 {color: deeppink; text-shadow: 0px 10px 10px;}
        #shadow2 {text-shadow: 10px 10px 3px red;}
        #shadow3 {color: white; text-shadow: 10px -10px 5px #000;}
    </style>
</head>
<body>
    <h1 id="shadow1">CSS text-shadow 속성</h1>
    <h1 id="shadow2">CSS text-shadow 속성</h1>
    <h1 id="shadow3">CSS text-shadow 속성</h1>
</body>
</html>

CSS6-4

text-transform

영문자를 표기할 때 텍스트의 대소문자를 원하는 대로 바꿀 수도 있다.

종류	설명
none	줄을 표시하지 않는다.
capitalize	첫번째 글자를 대문자로 변환한다.
lowercase	모든 글자를 소문자로 변환한다.
uppercase	모든 글자를 대문자로 변환한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트</title>
    <style>
        .trans1{text-transform: lowercase;}
        .trans2{text-transform: uppercase;}
        .trans3{text-transform: capitalize;}
    </style>
</head>
<body>
    <h3>프로그래밍 언어</h3>
    <ul>
        <li class="trans1">Java</li>
        <li class="trans2">JavaScript</li>
        <li class="trans3">React</li>
    </ul>
</body>
</html>

CSS6-5

letter-spacing, word-spacing

letter-spacing : 글자와 글자 사이의 간격을 조절하는 속성

word-spacing : 단어와 단어사이 간격을 조절하는 속성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트</title>
    <style>
        .letter { letter-spacing: 5px; color: rgb(40, 38, 136);}
        .word {word-spacing: 7px; color: #ffcccc;} 
    </style>
</head>
<body>
    <p><span class="letter">CSS의 letter-spacing 속성 테스트</span></p>
    <p><span class="word">CSS의 word-spacing 속성 테스트</span></p>
</body>
</html>

CSS6-6

Twitter Facebook LinkedIn

CHANYEONG

CSS day6

텍스트

텍스트 관련 스타일

공유하기

참고

java day17

java day16

JSP day22

JSP day21