제수기 - 제발 수업내용을 기억해라

CSS

Cascading Style Sheets

• 부모한테 적용한 스타일링이 자식한테 전이돼서 처리되는 경우가 많아서 이런 이름을 갖게 됐다.

HTML에 CSS 적용하기

1. inline style 속성

2. html문서상의 style태그

3. 외부 style sheet를 link걸어 사용

• 👩‍🔧가장 권장되는 방식

---

CSS Selector

CSS Selector 스타일링을 적용할 HTML 태그를 결정하는 표현식

• 사이트 참고 CSS Selectors

• 그림에는 안 보이지만 cursor: pointer를 넣어서, 저 위에서만 마우스 표시가 달라짐.

자식 | 후손선택자

자식선택자 >
후손선택자 공백

div 안에 h4, ul, div 자식 태그가 있다. 또 위에 ul안에는 li 2개가 자식의 자식으로 있고, 아래쪽 div에는 h4, ul 자식의 자식이 있고, ul li 2개가 자식의 자식의 자식으로 있다.
이때 자식의 자식 x n = 후손이라고 칭한다.

형제선택자

가상클래스 선택자

^ 되돌아 올라간다
div>p#bar1>lorem^p#bar2>lorem

active

• 클릭을 해야 색이 나타난다.
  

hover

• 마우스 올리기만 해도 나온다.
  
  

위치 관련

들여쓰기 format document

전체클릭 -> 오른쪽 클릭 -> format document 들여쓰기 한번에 해줌

of-type 계열선택자

부정선택자

• p가 아닌 애들은 다 밑줄 쳐주세요
  

루트 선택자

가상요소 선택자

Selector Priority

css 선택자 우선순위
1. !important = (오버라이드 금지)
2. inline style
3. 금 : 아이디 선택자
4. 은 : 클래스/속성/ 가상클래스 선택자
5. 동 : 태그/가상요소 선택자

• 동
  

• 은
  

• 금
  

• 인라인
  

복합된 경우

• 금메달 1개 vs 은메달+금메달
  

Font

• link 넣어서 href에 참조를 넣고
  

css에서 이렇게 넣어주면 된다.

컨트롤 쉬프트 C 개발작업창 여기서 폰트 상세 확인 할 수 있다.

• 여기 클릭하고 키보드 위아래 누르면 커지거나 작아지는 걸 바로바로 볼 수 있다.
  

폰트 페밀리

저게 순서대로 Gill Sans 없으면 옆에꺼 없으면 옆에꺼 이런식으로 나온다.

웹폰트

브라우저에서 사용하는 많은 폰트들. 기본적으로는 os의 폰트들을 끌고 오는 건데, 사용자 컴퓨터에 설치가 안돼있으면 안 나온다.

내가 사용한 멋진 폰트가 클라이언트 컴퓨터에 설치돼있지 않아서 적용이 안 된다고? -> 그래서 나온 게 web font. web font를 제공하는 서버를 하나 둘 테니까 거기서 바로바로 다운로드 받아서 보세요.
유명한 게 구글웹폰트 그런데 이거 상업적으로 썼다가 걸리면 안 된다. 사서 써야 한다.

링크는 html고 import는 css

복사해서 여기다 가져다가 붙이면 됨

css에 적용하면 이렇게 폰트 적용된 걸 확인할 수 있다.

폰트 사이즈

CSS 폰트 사이즈 입력

폰트는 기본적으로

• 기본 400
• 볼드체 700
• html에서 일반 글씨체는 16px