CSS : 텍스트 스타일링 속성들

gpt한테 그려달라고 해봤다. 음...

목차

1. color : 글자색

2. font-size : 글자 크기

3. font-family : 글꼴

4. fon-weight : 글자 굵기

5. line-height : 줄 높이

6. text-decoration : 텍스트 꾸미기

---

1. color : 글자색

글자색을 지정하는 속성이다. text, font 같은 거 안붙이고 단순히 color만 사용한다.

여러 색상 단위로 속성값을 지정한다.

.red-text {
	color: red;
}

.blue-text {
	color: #0000ff;
}

.green-text {
	color: rgb(0,255,0);
}

---

2. font-size : 글자 크기

글자 크기를 지정하는 속성이다.

지정된 키워드 혹은 크기 단위로 속성값을 지정한다.

#large-text {
    font-size: large;
}
#medium-text {
    font-size: medium;
}
#small-text {
    font-size: small;
}
#px-text {
    font-size: 10px;
}
#em-text {
    font-size: 2em;
}
#rem-text {
    font-size: 2rem;
}

---

3. font-family : 글꼴

사용하고 싶은 글꼴을 다운받아서 사용할 수도 있고, 기본으로 사용가능한 글꼴들 중 골라서 사용할 수도 있다.

#font-courier {
    font-family: 'Courier New', Courier, monospace;
}
#font-georgia {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

 

---

4. font-weight : 글자 굵기

지정된 키워드 및 100단위 숫자로 100~900을 속성값으로 사용한다.

#_bold {
    font-weight: bold;
}
#_100 {
    font-weight: 100;
}
#_500 {
    font-weight: 500;
}
#_900 {
    font-weight: 900;
}

 

---

5. line-height : 줄 높이

텍스트 사이 간격을 조절할 때 사용한다.

단위로 직접 입력할 수도 있지만

단순 숫자만 입렵할 경우, 해당 숫자를 font-size에 곱하는 식으로 들어간다.

#_3px {
    line-height: 3px;
}
#_1 {
    line-height: 1;
}
#_2 {
    line-height: 2;
}

---

6. text-decoration : 텍스트 꾸미기

텍스트에 밑줄을 넣거나 취소선을 넣는 등의 경우에 사용한다.

none의 경우, 기본적으로 밑줄이 들어가는 태그 (<a>)에서 밑줄을 없앨 때 많이 사용한다.

#_none {
    text-decoration: none;
}
#_underline {
    text-decoration: underline;
}
#_line-through {
    text-decoration: line-through;
}

 

 

 

 

 

 

 

참고

codeit 강의