# CSS 파일 만들고 첨부하는 법

style 속성 안에 들어갈 코드가 매우 길어지면&#x20;

HTML이 더러워지기 때문에 이걸 다른 파일로 빼서 작성할 수 있습니다.

CSS 파일로 빼면 됩니다.&#x20;



**0. CSS를 사용하시려면 CSS파일을 만든 후 HTML에 첨부해야합니다.**&#x20;

우선 작업폴더에 .css로 끝나는 파일 아무거나 하나 만드시고&#x20;

HTML 파일로 돌아와서&#x20;

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

\<head>태그 안에 \<link>태그를 넣으시고

href라는 속성에 여러분의 .css 파일 경로를 지정해놓으면 css 파일 이용가능합니다.&#x20;

저는 css 폴더 안에 main.css 파일을 만들었기 때문에&#x20;

css/main.css 이렇게 경로를 적었습니다.

"현재 html파일과 같은 경로에 있는 css 폴더 내부의 main.css 파일을 첨부하라"는 뜻입니다.&#x20;



그럼 이제 css 파일에서 스타일 작성이 가능한데 정확한 방법은&#x20;

**1. CSS파일에 스타일을 집어넣고 .**<mark style="color:green;">**이름**</mark>**&#x20;작명해줍니다**

```css
.profile {
    width: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
```

스타일을 적고 .어쩌구 이렇게 아무렇게나 작명하고 { } 중괄호로 묶어줍니다.

위의 코드는 3줄의 스타일을 .profile 이렇게 하나의 단어로 묶은겁니다.

그 단어를 **클래스**라고 부릅니다.

&#x20;

**2. HTML에 클래스 명을 첨부해서 스타일을 넣을 수 있습니다.**&#x20;

```html
<img src="v.jpg" class="profile">
```

class 속성을 열고 클래스명을 집어넣으면&#x20;

css 파일에서 묶어놨던 스타일들이 다 적용됩니다.&#x20;

&#x20;

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

CSS selector 라고 칭하는 것들입니다.&#x20;

&#x20;

클래스 selector는 **.클래스명{ }** 이렇게 적을 수 있고 모든 class="클래스명"을 가진 요소에 스타일을 적용가능합니다.

아이디 selector는 **#아이디명 { }** 이렇게 적을 수 있고 모든 id="아이디명" 속성을 가진 요소에 스타일을 적용가능합니다.

태그 selector는 p { 스타일\~\~ } 이렇게 적을 수 있고 모든 \<p> 태그에 스타일을 적용가능합니다.

점과 샵 기호를 잘 외워두도록 합시다.



**셀렉터의 우선순위**

물론 class, id를 동시에 가지는 html 요소라면

스타일이 겹칠 수 있습니다. 그럴 경우 우선순위가 존재합니다.

&#x20;

style="" \
\#id \
.class \
p&#x20;

&#x20;위에서부터 우선적으로 적용



## CSS (Cascading Style Sheet) <a href="#css" id="css"></a>
