CSS 파일 만들고 첨부하는 법

style 속성이 너무 길어지면 HTML이 매우 더러워지기 때문에 따로 파일을 빼서 작성을 할 수 있다.

1. CSS를 이용하려면 CSS 파일을 만든 후 HTML에 첨부해야한다.

우선 작업폴더에 .css로 끝나는 파일을 만들고 HTML의 head 태그 안에 link 태그를 만든다.

 <link href="님들의css파일경로~~" rel="stylesheet">

href 속성 안에 CSS파일의 경로를 지정해주자. ./main.css 와 같이 경로를 지정해주면 연동이 된다.

CSS 파일 안에서 스타일 작성하는 방법에 알아보자.

1. CSS 파일에 스타일을 집어넣고 .~~ 으로 작명하자.

.profile { 
  width : 200px;
  display : block;
  margin : auto;
}

스타일을 적고 .스타일명으로 정한 뒤 {}으로 묶어주자. 위의 코드는 3줄의 스타일을 .profile인 한 단어 안에 묶어둔 것이다. .~~를 클래스라 한다.

2. HTML에 클래스 명을 첨부해서 스타일을 넣을 수 있다.

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

class 속성에서 CSS 파일에 지정한 클래스 명을 넣으면 묶어놨던 스타일이 전부 적용된다.

---

class 말고도 다른 식으로 스타일을 묶을 수도 있는데

.profile 
  { font-size : 20px }  /*클래스*/
#special 
  { font-size : 30px } /*아이디*/
p 
  { font-size : 16px } /*태그*/

이 것들을 CSS selector라고 한다.

클래스 selector는 .클래스명 {}, 아이디 selector는 #아이디명 {}, 태그 selector는 p {}로 작성한다. 점과 샵의 기호를 잘 기억하자.

셀렉터 우선순위

class와 id를 동시에 가지고 있는 태그가 있다면 당연히 중복이 된다. 그럴 경우에는 우선순위가 존재한다.

style="" (1000점)
#id (100점)
.class (10점)
p (1점)

정확한 카운트는 아니지만 우선순위가 저렇게 분배된다는 것을 알아두자. 점수가 더 높은 것을 우선으로 적용한다.