[3주차] 5. CSS 글꼴과 문자 관련 속성 & 2주차 후기

font 글꼴

- 글자 관련 속성들을 지정

 

1. 단축 속성

- font: 기울기 두께 크기 / 줄 높이 글꼴;

- 일반적인 단축속성은 띄어쓰기로 구분하지만 font의 경우 /가 들어가는 이유는 크기와 줄높이 같은 경우 순서를 명확하게 하지 않으면 뭐가 뭔지 구분이 어렵기 때문이다.

- 기본적으로 최소한 font-size(크기)와 font-family(글꼴)을 지정해야 다른 것들을 생략해도 사용 할 수 있다.

 

2. 개별 속성

- font-style : 글자 기울기 지정, 기본값은 normal

• normal : 기본 값으로 스타일 없음
• italic : 보통의 경우에 글자를 기울일 경우에 oblique 말고 이걸 씀, 이탤릭 체 활자
• oblique : 기울어진 글자

- font-weight: 글자 두께(가중치:글자의 무게) 지정, 기본값은 normal

• normal : 기본 글자 두께, 400과 동일
• bold : 글자 두껍게, 700과 동일
• bolder : 부모(상위) 요소보다 더 두껍게(bold보다 두껍다는 개념 아님), 상대적인 값, 많이 쓰지 않음
• lighter : 부모(상위) 요소보다 더 얇게, 상대적인 값, 많이 쓰지 않음, 상속 값이 500 이하 인경우 100이다.

상속 값	border	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

• 숫자 : 보통의 경우 숫자로 입력하는 것이 많음, 100부터 900까지 100단위의 숫자 9개, normal과 bold 이외의 두께를 제공하는 글꼴(서체)를 위한 설정

값	일반적인 두께 이름
100	Thin(Hairline)
200	Extra Light(Ultra Light)
300	Light
400	Normal
500	Medium
600	Semi Bold(Demi Bold)
700	Bold
800	Extra Bold(Ultra Bold)
900	Black(Heavy)

• 숫자 값과 두께가 불일치 했을 때 어떻게 실제 계산해서 폰트 두께가 정해지는 원리
  : 없을 때 나머지 값들을 어떻게 찾아낼것인가 두께를 최대한 근접하게 표시할 것이냐, 400미만 값이 주어지면 가장 가까운 두께의 얇은 두께를 사용하고 500초과 값이 주어지면 가장 가까운 숫자의 두꺼운 두께를 사용 한다.
  ex) normal과 bold만 지원하는 글꼴일 경우, 100~500은 normal을 의미하고 600~900은 bold를 의미한다.`
• font-size:글자 크기 지정, 기본값은 medium(대략적으로 16px 인지하고 쓰기)
• 단위 : 기본값은 16px(브라우저마다 환경에 따라 달라질 수 있음),기본적으로 많이 씀, px,em,cm 등 단위로 지정, 웬만하면 크기를 알 수 있는 이 단위를 쓰는 것이 좋음
• % : 되도록이면 em으로 대체해서 쓰는 것이 좋음, 부모(상위) 요소의 비율로 지정

<불명확한 값들>

• xx-small : 가장 작은 크기
• x-small : 더 작은 크기
• small : 작은 크기
• medium : 중간 크기, 기본값은 medium
• large : 큰 크기
• x-large : 더 큰 크기
• xx-large : 가장 큰 크기
• smaller : 부모(상위) 요소보다 작은 크기
• larger : 부모(상위) 요소보다 큰 크기

- line-height: 줄 높이(정확히 줄 간격은 아니다.) 지정, 기본값은 normal(Reset.css 적용시 1)

• 첫번째와 두번째 줄 사이의 높이가 아니라 말그대로 글자 크기를 포함한 줄의 높이이다.
• 기본적으로 지정된 값은 브라우저마다 1.4 or 1.2 정도이다, 글자 크기의 ()배
• 기본적인 line-height 값을 지정하는 것이 중요하다
• 특정한 글꼴에 몇배 정도 크기를 가지는 line-height 수치를 입력하고 싶다면 정확한 px를 입력하는 것도 방법이 되겠지만 숫자로 입력해서 배수로 입력하는 것도 방법이다.
• normal: 기본 값으로 브라우저의 기본 정의 사용(1~1.4)
• 숫자 : 요소 자체 글꼴 크기의 배수로 지정, 단위가 없는 숫자로 지정, 가장 많이 씀,
  ex) 폰트 크기의 2배의 줄높이를 갖겠다 line-height: 2;`
• 일반적으로 쓰이는 배수의 크기는 1.4~1.7이다.(글자를 읽는 데 불편함이 없는 배수, 폰트의 종류에 따라 달라질 수 있다.)
• 단위 : px, em, cm 등 단위로 지정, 해당하는 높이의 실질적인 높이 설정 가능, 가장 많이 씀
• % 요소 자체 글꼴 크기의 비율로 지정

- font-family : 글꼴(서체) 지정, 운영체제(브라우저에 따라 달라짐)

• font-family: [글꼴후보1, 글꼴후보2…], 글꼴계열;
  ex) font-family : Arial, “Open Sans”, “돋움”, dotum,(여기까지가 글꼴후보), sans-serif(글꼴계열);`
• 제공 가능한 특정한 글꼴을 웹사이트에서 사용할 수 있게 해줌
• 브라우저에 지정하길 원하는 글꼴 이름 후보들과 그 후보가 제대로 표현되지 못했을 경우 나올 글꼴 계열을 같이 설정해줘야 함
• 글꼴이름 : 사용하길 원하는 글꼴 이름 설정, 글꼴 이름은 여러 개를 정할 수 있다(후보), 글꼴을 1번부터 10번까지 제공하면 1번부터 10번까지의 후보가 만들어지고 그 중 하나가 사용이 됨
  후보를 입력해야 하는 이유: 사용자(브라우저)는 웹사이트를 보기 위해 접근 시 그웹사이트의이미지, 폰트 등의 자원들을 브라우저로 다운받아야 한다. 폰트는 웹에서 사용하기에 굉장히 용량이 큰 편이다. 그러다보니 웹에서는 폰트는 무거우니까 웹사이트엔 올려놓진 않지만 이름은 명시하니까 사용자(브라우저) 운영체제 환경에 설치되어 있는 폰트 중에서 명시된 폰트가 있으면 그걸 찾아서 쓰면 좋을 것 같아 후보를 정해준다.
• 글꼴계열
  serif(바탕체 계열: 꼭다리 존재),
  sans-serif(고딕체 계열: 딱딱 떨어짐, 가장 많이 씀),
  monospace(고정너비(가로폭이 동등한)글꼴 계열, 코드 등에 쓰임),
  cursive(필기체 계열),
  fantasy(장식(재미있는 문자표현을 포함하는) 글꼴계열)
  : 글꼴계열이다. 필수로 입력해야 한다. 후보 제시 했는데 그 글꼴(폰트)을 다 쓸 수 없을 때 글꼴을 쓸 수 있는 환경에서 글꼴 계열 중에서 다른 글꼴(폰트)들을 자동으로 찾아서 고르게 됨
• 웹폰트 : 일반 폰트와는 다르게 웹에서 좀 더 가볍게 쓸 수 있도록 경량화된 폰트. 웹에서 사용하기 적합한 형태로 수정된 형태인 폰트. 기본적으로 웹폰트를 제공하지 않으면 사용자환경에 있는 폰트를 사용한다.

 

---

문자(Text) 관련 속성

1. color : 글자의 색상을 바꿔주는 속성(요소 색상 아님)

- 값특정한 색을 입력

- 색상 표현(color 뿐만 아니라 색상을 표현하는 모든 개념에서 사용 가능)

표현	의미	예시
색상이름	브라우저에서 제공하는 색상의 이름 (각각 조금 다르게 표현될 수 있음, 그래서 실무에선 피해주는 것이 좋음)	red, blue
Hex 색상코드	16 진수(0123456789abcdef) 색상(Heradecimal Colors), 많은 경우 이용 0123456789abcdef	#00000(검정) #fffff(흰색)
RGB	빛의 삼원색, rgb 함수(R,G,B)	rgb(255,255,255)
RGBA	빛의 삼원색, 투명도(R,G,B,투명도)	rgba(255,0,0,.5(투명도50%))
HSL	색상, 채도, 명도	hsl(120,100%,50%)
HSLA	색상, 채도, 명도, 투명도	hsl(120,100%,50%,.3(30%))

 

2. text-align: 문자의 정렬방식 지정

- left: 왼쪽 정렬

- right : 오른 쪽 정렬

- center :가운데 정렬

- justify:양쪽 맞춤, 한줄에서는 안되고 태그를 이용한 두 줄 말고 칸이 모잘라서 떨어지는 두줄 이상일 때만 가능

 

3. text-decoration : 문자의 장식(선(line)에 대한 장식) 설정

- none : 기본값으로 선 없음

- underline : 밑줄을 지정

- overline : 윗줄 지정

- line-through: 중앙선(가로지르는)을 지정), 취소한 거 표시할 때 사용

 

4. text-indent: 첫번째 줄의 들여쓰기 지정

- 오른 쪽으로 들여쓰기

- 들여쓰기 개념 자체는 일반적인 웹사이트에서는 많이 사용하진 않지만 왼쪽으로 글자를 밀어내는(음수 값을 통한 내어쓰기) 용도로는 많이 사용

-> 특정화면 밖으로 밀어내는 개념으로 많이 사용

- 음수값도 쓸 수 있음 : 음수 값 사용시 첫째 줄은 왼쪽으로 들여쓰기(내어쓰기 outdent) 됨

- 이미지 대체텍스트로 활용 가능 : 음수값을 사용하여 내어쓰기로 화면밖으로 텍스트를 밀어버림

- 특정화면 밖으로 밀어내는 개념으로 많이 사용, 없어진 건 아니고 존재하는데 안보일 뿐이다.

 

5. letter-spacing: 문자의 자간(글자 사이 간격) 설정

- noraml : 기본값으로 글자 사이의 일반 간격이다

- 단위 : px, em, cm 등 단위로 지정

- 음수값도 가능하다.

6. word-spacing : 단어와 단어 사이의 간격(띄어쓰기의 너비) 설정

- noraml : 기본값으로 단어 사이의 일반 간격이다(0과 비슷)

- 단위 : px, em, cm 등 단위로 지정

---

Tips

- background: url(“”)로 배경이미지 가져올 경우 width,height 값을 지정해줘야 이미지가 나타남

---

3주차 후기: CSS를 본격적으로 배우기 시작하니까 더 재밌어졌다. 역시 꾸미기를 시작하니까 제법 완성도가 높아진 듯 하다. 하지만 속성이 너무 많아 기억하기 어렵다. 자주 쓰는 속성들은 메모를 해놓고 주기적으로 봐야겠다. 과제는 날이 갈수록 어려워지고 있다. 그래도 내가 오늘 해냈다! 뿌듯하다. 매주 늘어가는 내실력을 보면 최종적으로 다 들었을 때의 실력이 궁금해진다.