Front-End/CSS

[CSS] Box박스 모델 및 글꼴 사용법 정리

CJun 2021. 5. 14. 16:27
반응형

  • content : 내용물
  • padding : content(내용물)와 border의 간격
  • border : 경계선
  • margin : 여백

블럭 vs 인라인 차이점은?

블럭 인라인
한줄에 하나씩 쌓인다. 한줄에 여러 요소가 나온다.
가로와 세로 길이를 가진다. 가로 세로 길이 X, 내용물의 크기 만큼 차지한다.
화면 배치를 위해 주로 사용된다. 텍스트를 꾸밀 때, 주로 사용이 된다.

font-family 속성

  • 웹문서에서 사용할 글꼴을 지정
  • 텍스트를 사용하는 요소들에 사용됨
  • 지정한 글꼴이 없을 경우 2~3가지 글꼴을 지정할 수 있음
  • 둘 이상의 글꼴을 지정할때에는 ,로 구분함
body {
     font-family:"맑은 고딕",돋움,굴림;  /* 글꼴 */
}

1. Font Style, 폰트 글꼴

p.normal {
	font-style: normal;
}
p.italic {
	font-style: italic;
}
p.oblique {
	font-style: oblique;
}

2. Font Size, 폰트 크기

div.a {
	font-size: 15px;
}
div.b {
	font-size: large;
}
div.c {
	font-size: 150%;
}
div.d {
	font-size: 2.5em; /* 40px/16=2.5em */
}

3. Font Weight , 폰트 굵기

p.normal {
	font-weight: normal;
}
p.light {
	font-weight: lighter;
}
p.thick {
	font-weight: bold;
}
p.thicker {
	font-weight: 900;
}
반응형