```

Id, '#'

• HTML <id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 합니다.>

<h4 id="navigation-title">This is the navigation section.</h4>

• CSS <id가 있는 요소를 선택할 때에는 #기호를 이용합니다.>

#navigation-title {
  color: red;
}

Class , '.'

• 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서 class를 사용합니다

• HTML< 같은 이름 여러개 사용할때는 class = "같은이름">

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

• CSS <class는 .을 이용해 선택합니다.>

.menu-item {
  text-decoration: underline;
}

Id 와 css 차이점

Id	Class
#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소많음
특정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용

Q & A

• 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
• 글자 색을 바꾸기 위한 속성은 무엇인가요?
• 배경 색을 바꾸기 위한 속성은 무엇인가요?
• background 속성과 background-color 속성은 어떻게 다른가요?
• px,% 의 차이?
  👉 px: 화면에 크기를 고정하는 단위
  👉 % : 부모 요소의 영향을 받아서 %을 쓸 수 있다.
• em의 의미는 무엇인가요?
  👉 자기자신(넓이) font-size 영향을 받는다.
  👉 font-size는 상속영향을 받는다.
  👉 상속에 영향을 받기때문에 유지보수가 힘들다.
• rem은 무엇인가요?
  👉 최상단의 부모의 font-size에 영향을 받는다.
• vw / vh는 무엇인가요?
  👉 veiw width / veiw heigth
  👉 화면에 보이는 전체 사이즈이다.
  👉100이 최대 사이즈(화면전체 사용한다)
  👉화면 축소하면 축소하는 만큼 유동적으로 바뀜
  -vmin / vmax
  👉사이즈가 유동적으로 변할때 최소 or 최댓값을 백분율로 나눠서 화면에 보여줌