본문 바로가기
웹코딩 배우기/· CSS

CSS 외부, 내부, 인라인

by 닐기 2019. 10. 26.

html에 css를 적용하는 방법은 3가지가 있다.

외부 css 파일을 링크걸어 불러와 적용하는 방법.

html 문서의 head 내부에 넣는 방법.

html 요소 자체에 넣는 방법이 있다. 조금 더 자세하게 알아보자.

 

 

 

외부 css

외부 css 파일만 변경하면 html 문서 전체에 적용이 된다.  티스토리 스킨 편집이 이러한 경우다.

 

 

이렇게 외부 파일이 연결되 있다. 외부 파일은 "이름.css" 확장자 css로 저장해야 한다.

내부 css

내부 css는 <head>~<head> 사이에 style 태그로 넣는다.

 

<head>

<style>

#ng {

        backgrounf-color: gold;

        font-size: 400%;

}

.top_ad {

            height: 150px;

}

</style>

</head>

<doby>

<div id="ng>

<p>alkdkjlajfkjalkdjlajdklajflkjaldjlk</p>

</div>

<div class="top_ad">

<pre>

alkd;lkal;dkl;afjnvnvnvnvnvvnopeqopejkljdalkjdklasdj

</pre>

</body>

 

인라인

<div style="font-size: 50px; color: #f1f1f1; border: 2px solid tomota;">

<p>하쿠나마타타</p>

</div>

 

이렇게 요소 자체에 스타일을 지정하는 방법이 있다.

css는 마지막에 선언한 값이 적용된다.

외부 css에

h1 {color: red;}

내부 css에

h1 {color: blue;} 라면 최종 값은 blue가 된다.

 

css가 적용되는 순서.

1. 인라인 스타일

2. 외부, 내부 css

3. 브라우저 기본 값.