CSS 사용 방법 완벽 가이드

CSS 사용법

CSS 사용 방법 완벽 가이드

CSS를 사용하는 방법에는 3가지 방법이 있습니다.

HTML 파일 내에서 사용하는 인라인스타일, 내부스타일 방법과 별도의 CSS 확장자를 가진 파일을 만들어 링크를 시켜 사용하는 외부 스타일 방법 입니다.

첫째. 인라인 스타일(Inline Styles)

▶ HTML 태그 요소에 스타일을 지정하는 방법

<!DOCTYPE html>
<html>
<head>
<title>CSS사용방법</title>
</head>
<h1 style="color:blue; font-size:20px;">인라인 스타일 적용 예제</h1>
</html>

- 인라인 스타일 방법은 HTML 태그 요소에 스타일을 정의하는 방법입니다.

- 단점은 CSS의 최대 장점인 일괄적용의 이점을 살리지 못한다는 것 입니다.

- 장점은 한 부분(단건)의 스타일을 입력 또는 수정 할 경우 보다 빠르고 쉽게 적용 할 수 있다는 것입니다.

- 따라서 인라인 스타일의 경우 유니크한 태그에 대한 고유한 스타일을 적용 할 때 사용할 것을 추천 드립니다.

둘째. 내부 스타일(Internal Styles)

▶ HTML 파일 <head>태그 사이에 <style> 태그를 삽입하여 사용하는 방법

<!DOCTYPE html>
<html>
<head>
<title>CSS사용방법</title>

<style>

h1 {

color:blue;

font-size:20px;

}

</style>
</head>
<h1>내부 스타일 적용 예제</h1>
</html>

- 내부 스타일 방법은 HTML 파일 내 <head> 태그 안에 <style>태그를 정의하여 사용하는 방법입니다.

- 정의 된 파일 내에서 사용이 가능함으로, 한 페이지에 고유한 스타일이 있는 경우 사용 하면 좋습니다.

셋째. 외부 스타일(External Styles)

▶ 스타일시트 용도로 외부 파일을 하나 만들어서 사용하는 방법

<!DOCTYPE html>
<html>
<head>

style.css파일

@charset "utf-8";

h1 {

color:blue;

font-size:20px;

}

- 확장자가 css인 파일을 하나 만들어 스타일을 정의하고, 그 파일을 참조가능하도록 링크(link)태그를 이용하여 연결 한 후 사용하는 방법 입니다.

- 해당 스타일시트를 참조하는 모든 html 페이지들이 적용됩니다. 따라서 일괄적용의 장점을 가장 잘 살리는 방법 입니다.

다중 정의 된 경우 적용순서

▶ 해당 태그와 가장 가까운 곳에 정의 된 스타일이 적용

해당 태그와 가장 가까운 곳에 정의 된 스타일은 인라인스타일 입니다.

따라서 1순위는 인라인 스타일로 정의 된 CSS가 적용 됩니다.

그리고 2순위는 외부스타일 링크선언 소스와 파일 내부 <style>태그 정의 소스중 가까운 것에 영향을 받게 됩니다.