- font-family : 글꼴정의
- font-size: 글자 크기를 정의.
- text-align: 정렬 방식을 정의.
- color: 글자 색상을 정의.
font-family(글꼴)
*{
font-family: Times, monospace, serif;
}family-name: ","로 여러 폰트를 지정할 수 있다.
이름 중간에 공백이 있거나, 한글일 경우 홑따옴표('')로 묶어서 선언
선언 순서대로 우선순위 지정 가능
Times를 먼저 지정하되, 지원되지 않을 경우 monospace를 지정
generic-family: 브라우저 대체 폰트 font-family의 맨 마지막에 선언 (무조건 꼭 선언해주어야 한다.)
serif(획에 삐침이 있는 폰트, 명조체), sans-serif(획에 삐침 없는 폰트, 돋움체)
*{
font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;
}위의 예시에서 한글 폰트를 Dotum,'돋움' 두 가지 다 지정해 주었는데, 이유는 한글을 지원하지 않는 디바이스일 경우 해당 한글 폰트를 불러올 수 없기때문임.
https://developer.mozilla.org/ko/docs/Web/CSS/font-family
font-size(글자크기)
/* <length> values */
font-size: 12px;
font-size: 0.8em;
/* <percentage> values */
font-size: 80%;
/* <viewport-units> values */
font-size: 1vw; /* 1% of viewport width */
font-size: 1vh; /* 1% of viewport height */수치와 단위
px - 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
rem - <html>태그의 font-size에 대응하는 상대적인 태그
em - 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기
기본 값 미지정 시 글꼴의 기본 크기는 16px (1em)
https://www.w3schools.com/cssref/pr_font_font-size.asp
https://developer.mozilla.org/ko/docs/Web/CSS/font-size
text-align(블록 내 정렬 방식)
text-align: 인라인 요소의 수평 정렬
⚠️ : <div>와 같은 블록 레벨 요소에는 적용 ❌ <div>에 적용시, <div>전체가 아닌 <div> 에 들어가 있는 인라인 요소에만 적용이 됨.
p{ text-align: right; }left/right: 왼쪽 또는 오른쪽 정렬한다.
center: 가운데 정렬한다.
justify: 양끝 정렬한다. (마지막 줄 제외) 모든글자의 끝과 끝이 동일 정렬
text-align과 display의 관계
- text-align은 inline-level에 적용
- text-align은 block-level에 적용할 수 없음
그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게 해야 할까요?
박스모델 챕터에서 다룬 margin의 auto 값을 이용해서 하시면 됩니다.
- 가운데 정렬 인라인 요소 : text-align (center) 블럭 요소 : margin (auto)
요소의 레벨에 따라 정렬하는 방식의 차이를 바로 알고 있으시기 바랍니다.
https://www.w3schools.com/cssref/pr_text_text-align.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
color(폰트 색상)
span{ color: red; }
span{ color: #FF0000; }
span{ color: rgb(100%, 0%, 0%); }
컬러 키워드
red, blue....
* 참고: transparent 투명을 나타내는 키워드
16 진법 #RRGGBB
적색(RR) 녹색(GG) 청색(BB)
16 진법 #RGB
위에서 두 자리가 각각 같은 값을 가지면 3자리로 축약하여 사용할 수 있음
#aa11cc -> #a1c
RGB( )
rgb(R, G, B)의 형태로 각 변수 값(R 적색, G 녹색, B 청색)
0~255의 정수로 된 값을 지정할 수 있으며, 0 → 255는 검정 → 흰색으로 값의 변화를 나타냅니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
https://www.w3schools.com/css/css3_colors.asp
Reference
https://www.boostcourse.org/cs120/lecture/92868?isDesc=false
https://www.inflearn.com/course/%EC%9E%85%EB%AC%B8%EC%9E%90-css-%EA%B8%B0%EC%B4%88%EA%B0%95%EC%9D%98
본 게시글은 부스트코스 비전공자를 위한 HTML/CSS, 인프런 입문자를 위한 CSS 기초 강의 수강 후 작성한 게시글임.
'CSS' 카테고리의 다른 글
| position: sticky에 관한 내용들 (0) | 2022.10.05 |
|---|---|
| CSS: 6 float, clear (0) | 2022.03.31 |
| CSS: 4 박스모델(Box-Model) (0) | 2022.03.28 |
| CSS: 3 구체성, 상속, 캐스케이딩 (0) | 2022.03.28 |
| CSS: 2 선택자 (0) | 2022.03.24 |
