[css] 글자와 텍스트 스타일 & 문단과 문단 스타일

font-style 속성은 글자를 기울일 때 사용할 수 있습니다.

italic과 oblique은 얼핏 보면 비슷한데
italic이 '기울여서 쓴' 서체라면
oblique는 본래 서체를 기울여놓은 것입니다.

서체마다 둘 다 있거나 한 쪽만 있거나 둘 다 없을 수도 있는데
이들은 한쪽이 없을 시 상호 교차되어 사용됩니다.

 

---

 

font-weight 속성은 글자의 굵기를 조절합니다.

서체가 어떤 굵기를 지원하느냐에 따라 normal과 bold중에 선택하거나
100~900 사이 100 단위의 수치를 사용합니다.

---

font-size 속성은 말 그대로 글자의 크기를 지정합니다.
단위로는 px과 %, em, rem이 사용되죠.

px는 절대값으로서 픽셀 단위입니다.
100%는 1em으로, 이들은 부모 요소와의 상대적 크기를 나타내죠.
rem은 html 요소와의 상대적 크기를 가지므로, 요소의 중첩에 영향을 받지 않습니다.
pt는 1인치/72로, 프린트할 컨텐츠에 사용됩니다.

 

---

 

 

text-decoration 속성은 밑줄, 취소선, 물결선 등으로
글을 꾸며주는데 사용됩니다.

여러 꾸밈요소를 함께 사용할 수 있으며
선의 형태, 색, 굵기 등 디테일을 지정할 수도 있습니다.

아래 링크에서 상세 내용과 구성 속성들을 확인하세요.
👉  MDN 문서 보기

 

---

text-transform 속성은 알파벳의 대소문자 표시에 사용됩니다.

HTML, CSS와 같이 대문자로 작성된 텍스트는 capitalize에 영향을 받지 않습니다.

---

 

text-shadow를 사용하면 텍스트에 그림자를 줄 수 있습니다.

'x좌표, y좌표, 흐림(선택), 색' 형식으로 그림자를 넣을 수 있고
쉼표로 구분해서 여럿을 넣을 수도 있습니다.

크롬 계열 브라우저의 개발자 도구를 사용하면 손쉽게 값을 조정할 수 있죠.

 

---

text-align 속성은 텍스트의 정렬 방식을 지정합니다. 직관적으로 알 수 있듯, 기본값인 left는 왼쪽, center는 가운데, right은 오른쪽으로 텍스트(및 인라인 요소들)을 정렬하죠. justify는 왼쪽으로 정렬하면서, 텍스트가 여러 줄이 될 때 마지막 줄을 제외한 줄들의 오른쪽이 나란히 되도록 각 줄의 공간을 조절합니다.

 

letter-spacing으로는 자간, word-spacing으로는 단어 간격, line-height으로는 줄 높이를 조절할 수 있습니다.

---

text-indent 속성으로는 들여쓰기를 조절할 수 있습니다. 값으로 입력한 수치만큼 첫 줄이 안쪽으로 들어가죠. 글자크기와 같이 px, %, em 등의 단위들을 사용할 수 있고, 음수를 넣어서 내어쓰기를 할 수도 있습니다.

 

 

---

list-style 속성으로는 list 앞 말머리를 바꿀 수 있다. 예시는 아래와 같다.

                'disc',

                'circle',

                'square',

                '"-  "',

                '"👉   "',

                'url(./yalco.png)',

                'decimal',

                'lower-alpha',

                'upper-alpha',

                'lower-roman',

                'upper-roman',

                'lower-greek',

                'none',

 

 

 

크롬 개발자 도구 열기

윈도우: Ctrl + Shift + i
맥: Cmd + Alt + i