Selector

HTML에 CSS를 적용하는 방법

1. head>style에 적용
2. tag에 직접 적용
   두 방법은 가독성이 좋지 않음.
3. CSS파일을 생성 -> head>link로 연결

Cascading

폭포를 생각하면 된다. Cascading Style Sheet의 약자가 CSS일 정도로 중요하다.

Author style > User Style > Browser

selectors

selcetor	CSS	설명
Universal	*	모든 태그를 선택
type	Tag	html tag 기준(부모 자식)
Id	#id	이름. 하나의 속성값을 가짐. 문서 내에 오직 하나만 있어야함.
Class	.class	별명. 여러개의 속성값을 가질 수 있음.(.class_name)
Attribute	[]	[속성="속성값"]
Child combinator	A > B	> 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.
General sibling combinator	A ~ B	~ 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다. p ~ span은 <p> 요소를 뒤따르는 모든 <span> 요소와 일치합니다.
Adjacent sibling combinator	A + B	+ 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다. h2 + p는 <h2> 바로 뒤에 위치하는 <p> 요소와 일치합니다.
pseudo-class	:	The : pseudo allow the selection of elements based on state information that is not contained in the document tree.
pseudo-element	::	The :: pseudo represent entities that are not included in HTML.

pseudo-class example : 요소의 특정 상태에 스타일을 적용할 때 사용합니다.

button:hover {
  color: blue;
}

pseudo-element example : 요소의 특정 부분에 스타일을 적용할 때 사용합니다.

p::first-line {
  color: blue;
  text-transform: uppercase;
}

우선순위

1. 같은 선택자 : 순서상 나중에 적힌 것을 따라감
2. style attribute > id > class > tag 순으로 우선순위를 가짐.
3. 더 디테일할수록/더 태그에 가까울수록 우선순위가 높음.
   원본 코드를 유지한 상태로 새로운 코드를 추가해서 새로운 디자인을 덮어씌우고 싶을 때

font-family : 1순위, 2순위, 3순위,..마지막은 산세리프 여러개의 서체 중에서 브라우저에 적용되는 것 순위로 나열해서 사용하면 된다. (폰트는 head>link에 저장해서 사용)

CSS background-image로 이미지를 넣을 때 VS HTML img tag에 이미지를 넣을 때

1.CSS background로 이미지를 넣으면 액자속에 그림을 넣는 것임으로 액자가 작으면 그림이 작은 부분으로 잘린다. 태그로 넣으면 태그 사이즈에 따라 이미지 비율이 깨질 수 있다.
2.정보를 담고 있는 이미지라면 웹 접근성을 높이기 위해 img 태그의 alt값을 주어야 한다.

Tip
a[href^="naver"] naver로 시작하는 것 선택
a[href$=".com"] .com으로 끝나는 것 선택

Selector Game
https://flukeout.github.io/

<orange class="small" />
=> orange.small 붙여쓰기

후기

CSS를 생각하면 어후 막 막막하고 어려웠는데 강의에서 Cascading 개념부터 차근차근 잘 잡아주셔서 뭔가 구조적인? 안정감을 느꼈다. 다음에 배울 레이아웃에 관련된 내용이 궁금해진다.