7/11 - 스타일링

1. Color 지정

1. color: 색 이름
2. color: rgb(00, 00, 00)
3. color: #012345 (→ hex값 사용)

---

2. 스타일링 태그

1. font-weight → 굵기
   범위 : 100 - 900 (100, 200, 300... 단위로 존재)
   400 → 보통 굵기 / 700 → b태그와 비슷

2. text-align → 정렬 (left, center, right)

3. text-decoration → 밑줄과 관련
   1) underline → 밑줄
   2) overline → 윗줄
   3) line-through → 취소선
   4) none → 선 삭제 (하이퍼링크에서 주로 사용)

---

3. 가운데 정렬이 text-align으로 안되는 경우

주로 하이퍼링크에서 안되는 경우 발생

해결방법 : <div>로 감싼 후 div를 가운데 정렬한다. (class 이름 지정 후 center)

---

4. Text 크기

1. 절대적 방법 : px, pt
   1) pt → px의 1.33배
2. 상대적 방법 : em, %
   1) 1em = 100% / 1.5em = 150%
   2) % → 부모 요소를 기준으로 비율 지정

line-height → 각 줄이 실질적으로 차지하는 공간 (장간)

---

5. 폰트 설정

font-family: "폰트 이름", "폰트 이름2"
(뒤쪽 폰트는 예비 폰트 설정이다)

폰트 이름에 띄여쓰기가 있다면 반드시 " 로 감싸주고 그외에는 안해도 무관하다.

ex> font-family: "Times New", Times, serif;

---

6. 구글 폰트

1. https://fonts.google.com 에서 원하는 글꼴의 +를 누른 후 링크를 가져와서 <'head>에 넣는다.
2. https://fonts.google.com/earlyaccess 에서 korean 검색 후 1번 처럼 적용

---

7. 폰트 파일 사용방법

1. project 파일에 fonts파일 생성
2. css파일에

	@font-face {
		src: url("../fonts/BMJAU.otf");
	    font-family: "JUA";
	    }

	p {
	font-family: "JUA";
	}

이런 식으로 css 파일에 font의 접근경로와 이름을 지정해주고 원하는 곳에 넣으면 된다.

---

8. span 태그

<'div>를 쓰고 스타일링을 하면 새로운 줄로 옮겨버린다.
→ <'span>을 쓰면 그 문제가 해결된다.
(특정 텍스트만 문단 변형 없이 스타일링 가능)