HTML 공부하기 : 텍스트 스타일링(text-align, text-decoration, 폰트크기)

 

text-align 속성

텍스트를 왼쪽, 오른쪽, 가운데로 정렬

 

text-align : left; 텍스트를 왼쪽 정렬

 

text-align : center; 텍스트 가운데 정렬

 

text-align : right; 텍스트 오른쪽 정렬

---

Text-decoration

 

text-decoration으로 글 아래, 위, 글 관통, 그리고 하이퍼링크에 아랫줄을 없앨 수 있다.

 

 

text-decoration: underline; : 글 아래 밑줄

 

text-decoration: overline; : 글 위 줄 생성

 

text-decoration: line-through : 글 관통

 

text-decoration: none : 글자 밑에 라인 생성안함

(보통 하이퍼링크를 생성하면 밑줄이 자동으로 생성되는데 none으로 하면 밑줄이 생성이 안됨)

 

---

폰트 크기

폰트 크기는 절대적인 방법과 상대적인 방법 2가지로 나뉜다.

 

절대적 : px, pt

상대적 : em, %

 

px은 절대 적이기 때문에 다른 거에 영향을 받지않고 px 대로 반영한다.

 

pt는 px보다 1.3배? 정도 글자 크기가 크다.

 

 

 

상대적 : %

 

 

 

div2와 div3를 똑같이 200%를 줬지만 글자크기는 다르다.

 

왜이렇게 될까?

 % 폰트크기를 결정할 때는 부모요소의 폰트크기 기준으로 만들어진다.

 

div 부모는 body이기 때문에 16px로 될 거고

 

div2의 부모는 div이므로 200%를 했기에 32px

 

div3의 부모는 div2이므로 32px에서 2배 64px 이 된다.