CSS

✔ HTML, CSS, JavaScript를 마치고 westagram 프로젝트에 들어가게 되었다. 프로젝트에 들어가기 전, HTML & CSS replit을 진행하면서 사전 스터디때 간과한, 미숙했던 CSS 내용을 보충하고자 간단하게 정리해보았다.

font

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

• 폰트 적용 순서는 위처럼 적힌 순서대로 적용된다. (Georgia가 없으면, Times New Roman, 이 또한 없으면 Times, 이 또한 없으면 serif 계열의 폰트를 사용한다.)

• 폰트 이름에 띄어쓰기(공백)이 있으면 ""(큰따옴표)를 사용해야 한다.

font-style(italic vs oblique)

• italic: 서체 자체가 흘려 쓰인 글자이다.

• oblique: 기본 글자에서 기울기만 기울어진 글자이다.

CSS Selector Specificity (선택자 우선순위)

• 선택자의 우선순위는 다음 순서와 같이 inline styling이 가장 우선적으로 선택되며, 그 다음 차례로 이어진다.

• 일반적으로 중복 사용이 가능한 class를 자주 사용한다.

1. inline styling

<p style = "color = blue"> 안녕하세요 </p> 
<!-- 태그 내부에 직접 스타일 요소를 넣는다. --!>

2. id selector

<p id="text"> 안녕하세요 </p> 

#text{
	color: blue;
}

3. class selector

<p class = "text"> 안녕하세요 </p> 

.text{
	color: blue;
}

4. tag selector

<p> 안녕하세요 </p> 

 p {
	color: blue;
}

이미지 넣기 (img tag vs background-image)

• img tag: 표현하고자 하는 이미지가 실제 내용, 즉 필요한 정보를 담고 있을 때 사용

• background-image: 실제 내용이 담기지 않는, 불필요한 정보를 갖고 있을 때, 순수히 디자인만을 위할 경우 사용한다.