반응형
- 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;
}
반응형
'Front-End > CSS' 카테고리의 다른 글
[Materializecss] 색상, 이미지, Gird, 버튼, 테이블, Card 구성하기 (1) | 2021.06.02 |
---|---|
[CSS] Grid 그리드(레이아웃) 정리 (0) | 2021.05.24 |
[CSS] Flexbox(레이아웃) 정리 (0) | 2021.05.17 |
[CSS] Position속성(fixed, relative, absolute, static) 정리 (0) | 2021.05.16 |
[CSS] StyleSheet스타일시트 및 선택자 사용법 정리 (0) | 2021.05.13 |