1. font, font-style
글자 관련 속성들을 지정[단축]
값 의미 기본값
font-style 글자 기울기 normal
font-weight 글자 두께 normal
font-size 글자 크기 medium (16px)
line-height 줄 높이(줄 간격) 지정 normal (reset.css 적용시 1)
font-family 글꼴(서체) 지정 운영체제(브라우저)에 따라 달라짐
font: 기울기 두께 크기 / 줄높이 글꼴; [최소한 크기, 글꼴은 지정해야 나온다]
.box{
font: italic bold 20px / 1.5 "Arial", sans-serif;
}
font-style
글자 스타일(기울기)를 지정[개별]
속성 값
값 의미 기본값
normal 스타일 없음 normal
italic 이탤릭체(활자)
oblique 기울어진 글자 (이탤릭을 더 많이 쓴다)
2. font-weight
글자의 두께(가중치)를 지정[개별]
값 의미
normal 기본 글자 두께, 400과 동일 (기본값)
bold 글자 두껍게, 700과 동일
bolder 부모(상위)요소보다 더 두껍게
lighter 부모(상위)요소보다 더 얇게
숫자 100~900까지의 100단위의 숫자 9개, normal과 bold 이외의 두께를 제공하는 글꼴(서체)를 위한 설정
일반적인 두께의 이름
font-weight의 각 값은 일반적으로 다음과 같은 글꼴의 이름으로 표현됨
값 일반적인 두께 이름
100 thin
200 extra-light
300 light
400 normal
500 medium
600 semi bold
700 bold
800 extra bold
900 black
=> 오직 100단위로만 쓸 수 있다
상대적 두께
bolder, lighter를 사용할 경우
부모(상위)요소에게 상속 받은 값에서 다음과 같이 계산됨
상속값 bolder lighter
100~300 400 100
400~500 700 100
600~700 900 400
800~900 900 700
숫자값과 두께의 불일치
글꼴(서체)의 정확한 두께를 숫자로 표현할 수 없는 경우에만...
1. 400이 주어지면 500을 사용하고, 500이 불가하면 500미만의 다른 두께 사용
2. 500이 주어지면 400을 사용하고, 400이 불가하면 400미만의 다른 두께 사용
3. 400 미만 값이 주어지면, 가장 가까운 숫자의 얇은 두께 사용
4. 500초과 값이 주어지면, 가장 가까운 숫자의 두꺼운 두께 사용
ex. normal과 bold만 지원하는 글꼴인 경우
100~500은 normal, 600~900은 bold 의미
3. font-size
글자의 크기를 지정[개별]
값
단위 px, em, cm (기본값: 16px)
% 부모(상위)요소의 비율로 지정
나머지 방법은 추천하지 않는다
4. line-height
줄 높이(줄 간격 지정)
값
normal 브라우저의 기본 정의를 사용 (1 ~1.4) : 브라우저마다 다르다 (기본값)
숫자 요소 자체 글꼴 크기의 배수로 지정 : font의 2배로 정하고 싶으면 2라고 적으면 됨
(일반적으로는 1.4~1.7 추천)
단위 px, em, cm 등 단위로 지정
% 요소 자체 글꼴 크기의 비율로 지정
: 첫번째 줄, 두번째 줄 사이의 정중앙선 - 두번째 줄, 세번째 줄 사이의 정중앙 선 사이의 간격
즉 줄과 줄 사이는 설정한 값의 반
ex.
div{
line-height: 32px;또는 2(배수)
}
5. font-family
글꼴(서체) 지정 [개별 속성]
값 의미
글꼴이름 글꼴(서체) 후보 목록을 지정 : 여러개를 제시해주고 그 중에 고르게 된다
serif
sans-serif
font-family: 글꼴후보1, 후보2...글꼴계열;
{
font-family: Arial, "Open Sans", "돋움", dotumsans-serif;
}
=> 웹사이트에서 우리가 원하는 font를 올리면 용량이 너무 많기 때문에
기본적으로 사용자 브라우저쪽에서 찾아서 사용하도록 font를 알려주는 것
만약 후보들이 다 없으면 마지막 글꼴 계열 중에서 찾도록 유도 : 브라우저에 따라 계열 중 다른 폰트가 나올 수 있다
후보 없이 계열만 써도 된다
[종류]
serif 바탕
sans-serif 고딩(가장 많이 사용)
monospace 너비가 다 같음
cursive 필기체
fantasy 장식이 있는 글자
6. color: 문자의 색상 지정
값 의미 기본값
색상 문자의 색상 지정 rgb(0,0,0)
색상표현
표현
색상이름 (정확하지 않아서 웬만하면 지양) 브라우저에서 제공하는 색상의 이름 red, blue
Hex 색상코드 (가장 많이 사용) 16진수 색상 #000000(검정)
RGB (빛의 삼원색) rgb( 255, 255, 255)
RGBA 많이 사용 (빛의 삼원색, 투명도) rgba(255, 0, 0, .5)
HSL 색상 채도 명도 hsl( 120, 100%, 50%)
HSLA 색상 채도 명도 투명도 hsla( 120, 100%, 50%, .3)
7. text-align
문자 정렬 방식 지정
값 = 의미
left 왼쪽
right 오른쪽
center 가운데
justify 양쪽 맞춤 - 한줄에서는 안되고 두줄 이상 - br태그 없이 칸이 모자라서 두줄이 된 경우에만 가능
8. text-decoration
문자의 장식(line)을 설정
none 선 없음 [기본값]
underline 밑줄을 지정
overline 윗줄을 지정
line-through 중앙선(가로지르는 선) 지정
9. text-indent
첫번째 줄의 들여쓰기를 지정
-음수값을 사용할 수 있다
-음수값을 사용하면 첫째줄은 왼쪽으로 들여쓰기(내어쓰기)된다
cf. outdent라는 것은 없다
ex. text-indent: 50px 또는 -10px
img태그는 alt를 통해 대체 텍스트 제공, 크기가 어느정도 정해지는데
background 속성으로 url을 넣는 방식은 width, height를 넣어야 화면에 이미지가 나온다
이때 alt속성을 통해 대체 텍스트를 제공할 수 없으므로 text-indent로 화면 영역 밖에 -9999px;로 명시적으로 위치할 수 있다 (이때 대체텍스트는 브라우저가 읽을 수 있도록 넣어놓는 것)
10. letter-spacing
문자의 자간(글자 사이의 간격)을 설정
값 의미
normal[기본값] 단어 사이의 일반 간격 (단위로 치면 0)
단위 px,em,cm 등 단위로 지정 (음수도 가능)
div{
letter-spacing: 2px;
}
11. word-spacing
단어 사이(띄어쓰기)의 간격을 설정
값 의미 기본값
normal 단어 사이의 일반 간격 normal(0) : 기본적인 띄어쓰기 값이 나온다
단위 px,em,cm 등 단위로 지정 (음수도 가능)
'패캠 네카라쿠배 도전: HTML CSS' 카테고리의 다른 글
| 2차 테스트 - 7일차 객체 지향 프로그래밍 (0) | 2021.06.22 |
|---|---|
| [패캠 네카라쿠배 2기] 2차 테스트 - 7일차 (0) | 2021.06.22 |
| [패캠 네카라쿠배 2기 도전] CSS/속성 - 박스 모델 (0) | 2021.05.31 |
| [패캠 네카라쿠배 2기 도전] CSS/ 단위 (1) | 2021.05.28 |
| [패캠 네카라쿠배 2기 도전]CSS/ 개요, 선택자, 상속 (0) | 2021.05.27 |