[속성] 텍스트 관련 속성을 통해 텍스트 꾸미기

 

 

 

---

 

텍스트와 관련된 속성은 무엇이 있을까?

 

 

---

 

 

 

 

font-family

 

--

font-family 속성은

글꼴을 지정하는 속성으로

속성값으로는 1개 이상의 "글꼴 명"을 작성하고 쉼표(,)를 통해 구분한다.

글꼴을 여러 개 작성하는 이유는 우선순위를 지정하기 위함이다.
작성한 순서대로 글꼴을 확인하여, 첫 번째 글꼴이 없으면 다음 글꼴로 적용하는 방식으로 진행된다.

 

추가로 마지막에 "글꼴 유형"을 추가할 수 있는데

글꼴 유형은 글꼴의 개념이 아니라 글꼴의 형태를 의미한다.

만약 명시한 글꼴을 불러오지 못할 경우를 대비하기 위해 불러오려고 한 글꼴과 가장 유사한 형태의 글꼴 유형을 마지막에 작성하여 지정한 글꼴을 전부 불러오지 못하더라도 텍스트가 유사한 형태로 보여줄 수 있기 때문에

font-family 속성에는 반드시 글꼴 유형을 작성하도록 권장된다.

한글로 된 글꼴이나 공백이 있는 글꼴 명은 큰따옴표("")로 항상 감싸야한다.

 

 

기본 형식

font-family: 글꼴1, 글꼴2, ... 글꼴 유형;

 

예시 코드

p {
   font-family:batangChe, "Times New Roman", serif;
}

바탕체와 타임스 뉴 로먼 글꼴을 적용했으며, serif(삐침이 있는 명조 계열의 글꼴)을 글꼴 유형으로 지정했다.
만약 바탕체 적용이 가능하면 바로 바탕체로 적용되며, 만약 없다면 다음인 타임스 뉴 로먼 글꼴로 적용된다.

--

 

 

 

 

font-size

 

--

font-size 속성은

텍스트 크기를 변경하는 속성으로

속성 값으로는 단위를 포함한 크기를 작성한다.

 

기본 형식

font-size: 텍스트 크기 단위

 

예시 코드

p{
   font-size: 16px;
}

--

 

 

 

 

font-weight

 

--

font-weight 속성은

텍스트의 굵기를 설정하는 속성으로

속성 값으로 "숫자 표기법"을 사용하거나 "키워드 표기법"을 사용할 수 있다.

 

• 숫자 표기법   :   100 ~ 900까지 100단위로 굵기 지정 (숫자가 클수록 굵음)
• 키워드 표기법   :   lighter, normal, bold, bolder 키워드로 굵기 지정
                               (숫자와 비교하면 normal = 400, bold = 700과 비슷하다.)

 

 

기본 형식

font-weight: 숫자 표기법 | 키워드 표기법

 

예시 코드

p {
   font-weight: 400;
}

p {
   font-weight: normal;
}

--

 

 

 

 

font-style

 

--

font-style 속성은

글꼴의 스타일을 지정한다.

 

속성 값 종류

• normal   :   기본 형태
• italic   :   이탤릭체
• oblique   :   기울기

 

기본 형식

font-style: 속성값;

 

예시 코드

p {
   font-style: italic;
}

--

 

 

 

 

font-variant

 

--

font-variant 속성은

영문 텍스트를 크기가 작은 대문자로 변경할 때 사용되는 속성이다.

 

속성 값 종류

• normal   :   기본 형태
• small-caps   :   텍스트를 크기가 작은 대문자로 변환

 

기본 형식

font-variant: 속성값;

 

예시 코드

.test {
   font-variant: small-caps;
}

<p>This is test text</p>
<p class="test">This is test text</p>

--

 

 

 

 

color

 

--

color 속성은

텍스트의 색상을 지정하는 속성이다.

속성 값으로는 색상을 지정하는 영문, RGB, HEX 모두 가능하다.

 

기본 형식

color: 속성값;

 

예시 코드

p {
   color: red;
}

--

 

 

 

 

text-align

 

--

text-align 속성은

텍스트를 정렬할 때 사용되는 속성이다.

 

속성 값 종류

• left   :   왼쪽 정렬
• center  :  중앙 정렬
• right  :  오른쪽 정렬
• justify  :  양쪽 정렬

 

기본 형식

text-align: 속성값;

 

예시 코드

p {
   text-align: right;
}

--

 

 

 

 

text-decoration

 

--

text-decoration 속성은

텍스트에 선을 긋기 위한 속성이다.

 

속성 값 종류

• none   :   텍스트 장식(선)을 모두 지운다.
• line-through  :  텍스트 중간을 관통하는 선을 긋는다.
• overline   :   텍스트 위에 선을 긋는다.
• underline   :   텍스트 아래에 선을 긋는다.

a 태그를 사용하면
기본적으로 아래에 선이 그어지는 이유도 기본 스타일 시트에서 a 태그에 이미 unerline을 적용했기 때문이다.

 

기본 형식

text-decoration: 속성값;

 

예시 코드

a {
   text-decoration: none;
}

--

 

 

 

 

letter-spacing

 

--

letter-spacing 속성은

글자 사이의 간격(자간)을 조절하기 위한 속성으로

속성 값에는 "normal" 키워드 또는 크기를 넣을 수 있다.

 

기본 형식

letter-spacing: normal | 크기;

 

예시 코드

p {
   letter-spacing: 16px;
}

--

 

 

 

 

line-height

 

--

line-height 속성은

텍스트 한 줄의 높이를 지정하는 속성으로

속성 값에 "normal" 키워드 또는 숫자, 퍼센트, 크기 등을 넣을 수 있다.

 

속성 값 종류

• normal   :   웹 브라우저에서 정한 기본 값을 적용
• 숫자   :   현재 font-size 값에 입력한 사이즈와 곱한 값으로 적용
• 퍼센트   :   현재 font-size 값에 입력한 사이즈와의 비율로 적용
• 크기   :   입력한 크기로 적용

 

기본 형식

line-height: normal | 속성값;

 

예시 코드

line-height:normal;
line-height:1;
line-height:1.5;
line-height:200%;
line-height:16px;

 

모든 텍스트는

웹 브라우저에 표시될 때 텍스트의 위쪽과 아래쪽으로 일정 크기의 여유 공간을 가진다.

그리고 이 여유 공간을 전부 포함한 글줄 사이의 간격을 "행간"이라고 부르며,

line-height 속성을 통해 제어가 가능하다.

--