html파일과 css파일 연결하기

// head tag안에 작성
<link rel="stylesheet" href="main.css" />

---

css적용

p {
  text-align: center;
}

• 모든 p tag에 css를 적용한다.

---

class를 이용하여 css적용

.profile {
  width: 250px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

• css 문법
  .이름{
  속성: 값;
  }
• 반드시 이름 옆에 .(점)을 붙여라 안붙이면 모든 tag에 css를 적용하게 된다.

• class를 적용하기 위한 방법
  1. tag에다가 class="" 속성을 만들
  2. 속성안에다가 이름을 복붙한다. class="profile"

<img src="img/lion.png" class="profile" />

---

id를 이용하요 css적용

#profile {
  width: 250px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

• css 문법
  #이름{
  속성: 값;
  }
• 반드시 이름 옆에 #을 붙여라 안붙이면 모든 tag에 css를 적용하게 된다.

• id를 적용하기 위한 방법
  1. tag에다가 id="" 속성을 만들
  2. 속성안에다가 이름을 복붙한다. id="profile"

<img src="img/lion.png" id="profile" />

---

css 적용 우선순위

• class css, id css, tag css, style 속성모두 색깔을 다르게 바꾸고 있다. 이때 글자는 어떤 색으로 바뀔까?
  • 결론 : style 속성에 의해서 색이 바뀐다.
  • 우선순위 : style 속성 > id css > class css > tag css