몽땅뚝딱 개발자

[CSS] 서체(font) 본문

Development/HTML · CSS

[CSS] 서체(font)

레오나르도 다빈츠 2021. 12. 5. 16:15

 

◽ 글자에 관련된 속성

속성 풀이
font-family 글꼴
font-size 사이즈 (px, %, *em 등)
* 1em은 100%와 같은 뜻으로 부모박스에서 설정한 크기와 같은 크기이다.
font-weight 두께 (bold, normal 등)
font-style 기울임
font-variant 작은 대문자 표현 (small-caps)
line-height 줄 간격 조정
font 위의 속성들을 한 줄로 기술하는 선택자

 

 

◽ 한번에 쓰기

font를 통해 한번에 작성할 수 있으며 순서를 반드시 지켜야하며 글자 크기와 글꼴은 절대 생략할 수 없다.

font: [font-weight, font-style, font-variant] [font-size/line-height] [font-family]
/* 작성 예시 */
h1 {
	font: bold italic small-caps 15px/1.2 "굴림", Gulim;
}
 
 
💡 Tip

레이아웃을 정할 때 크기를 편하게 가늠하기 위해 전체 문서에서 가장 많은 양을 차지하는 본문의 서식인 <body> 태그에 전체적인 폰트와 크기를 지정해주는 것이 좋다.

 

 

 

 

출처

김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020)

 

 

 

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

 

저작자표시

'Development > HTML · CSS' 카테고리의 다른 글

[CSS] 스타일시트(Stylesheet) 작성의 4가지 방법  (0) 2021.12.06
[CSS] 벤더 프리픽스(CSS3 Vendor Prefix)  (0) 2021.12.05
[HTML] input의 다양한 속성  (0) 2021.12.04
[HTML] input의 다양한 type  (0) 2021.12.03
[HTML] 기본용어 및 마크업 시 주의사항  (0) 2021.12.02
'Development/HTML · CSS' Related Articles more
Comments

티스토리툴바