CSS 파일 만들고 첨부하는 법

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

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

CSS 파일로 빼면 됩니다.

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

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

HTML 파일로 돌아와서

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

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

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

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

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

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

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

1. CSS파일에 스타일을 집어넣고 .이름 작명해줍니다

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

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

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

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

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

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

class 속성을 열고 클래스명을 집어넣으면

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

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

CSS selector 라고 칭하는 것들입니다.

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

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

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

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

셀렉터의 우선순위

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

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

style="" #id .class p

위에서부터 우선적으로 적용

CSS (Cascading Style Sheet)

Last updated