안녕하세요 오늘은
CSS Text(글꼴) / List(목록) / Table Style(표 스타일) 중 Text에 알아볼게요.
CSS Text (글꼴 관련 스타일)
텍스트 스타일은 사용하는 글자의 모양새를 지정하는 글꼴 스타일과
웹 문서에서 표시되는 텍스트를 지정하는 문단 스타일이에요.
* font로 시작하는 속성이 글꼴 관련이에요.
font-family 속성
웹 문서에서 사용할 글꼴을 font-family속성으로 지정함으로
<body> 태그를 비롯해 <p> 태그나 <hn> 태그처럼 텍스트를 사용하는 요소에서 주로 사용해요.
/*기본형*/
font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]+) 웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 웹 브라우저 화면에 표시되고,
웹 문서에서 지정한 글꼴이 사용자 시스템에 설치가 아닌 의도한 글꼴이 아닌 글꼴로 표시가 됩니다
body { font-family: "맑은 고딕", 돋움, 굴림 }두 개 이상 지정이 가능하고,
두 단어 이상으로 된 글꼴 이름은 큰 따옴표로 표시가 되요.
<body> 태그 스타일에서 한번 정의하면 문서 전체에 적용됨으로
문서 안의 모든 자식 요소에 같은 글꼴을 사용해요.
font-size 속성
글자 크기의 단위는 px(픽셀)이나 pt(포인트) 등으로 지정하거나 백문율로 사용해요.
/*기본형*/
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
1. 브라우저에서 지정한 글자 크기
2. 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
3. 브라우저와 상관없이 글자 크기를 직접 지정
4. 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시1. '키워드'를 사용하여 글자 크기 지정
xx-small < x-small < small < medium < large < x-large < xx-large
2. '단위'를 사용하여 글자 크기를 지정
-> 단위를 사용해서 글자크기를 직접 지정 (주로 사용)
font-weight 속성
/*기본형*/
font-weight: normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900
여기까지 CSS Text에 알아봤는데요.
다음 포스팅은
CSS Text(글꼴) / List(목록) / Table Style(표 스타일) 중 List에 알아볼게요.
'Frontend > CSS' 카테고리의 다른 글
| CSS Text / List / Table Style (3) (0) | 2025.10.14 |
|---|---|
| CSS Text / List / Table Style (2) (0) | 2025.10.04 |
| CSS Selectors (3) (0) | 2025.09.30 |
| CSS Selectors (2) (0) | 2025.09.27 |
| CSS Selectors (1) (0) | 2025.09.25 |