[HTML+CSS] CSS 스타일 적용 방법과 우선 순위

[HTML+CSS] CSS 스타일 적용 방법과 우선 순위 - travelbeeee

2020. 3. 25. 16:08

안녕하세요, 여행벌입니다.

오늘은 CSS 속성을 적용하는 3가지 방법과 우선순위에 대해서 포스팅해보겠습니다.

CSS 속성 적용 방법

CSS 속성을 적용하는 방법은 3가지로 인라인 스타일 / 내부 적용 스타일 / 외부 적용 스타일이 있습니다. 인라인 스타일로 구현하다 보면, 나중에 CSS를 수정해야 할 때, 하나하나 다 찾아야 되기 때문에 관리하기가 어려워 보통은 내부 적용 스타일이나 외부 적용 스타일을 이용하고 특히 CSS를 부분 부분 따로 관리할 수 있는 외부 적용 스타일을 많이 이용합니다.

스타일 적용 우선순위

스타일 적용 우선순위는 다음과 같습니다.

인라인 스타일 ( inline style ) >> 내부 적용 스타일 ( internal style ) >> 외부 적용 스타일 ( external style )

인라인 스타일이 가장 우선순위가 강합니다. 따라서, 같은 HTML 태그에 인라인 스타일과 내부 적용 스타일에서 각기 다른 CSS 속성을 적용한다면, 인라인 스타일에게 우선권이 부여됩니다.

인라인 스타일 ( inline Style )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body style="background-color: black;">
    <p style="color : red; font-size : 5em;"> 인라인 스타일로 구현하기. </p>
</body>
</html>

인라인 스타일은 다음과 같이 HTML 태그 안에서 스타일을 적용하는 방법입니다.

결과는 다음과 같습니다.

내부 적용 스타일 ( internal Style )

내부 적용 스타일은 <head> 태그 안에서 스타일을 적용하는 방법입니다. 인라인 스타일과는 달리 내가 적용한 스타일들이 한 곳에 모여있어 수정이나 관리하기 용이합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    	body{
        	background-color : black;
        }
        p{
            color : red; 
            font-size : 5em;
        }
    </style>
</head>
<body>
    <p> 내부 적용 스타일로 구현하기. </p>
</body>
</html>

결과는 같습니다.

외부 적용 스타일 ( external Style )

외부 적용 스타일은 HTML과 CSS 파일을 분리해서 관리하는 방법으로 개발할 때 가장 많이 사용됩니다.

<!-- HTML 파일 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="externalStyle.css">
</head>
<body>
    <p> 외부 적용 스타일로 구현하기. </p>
</body>
</html>

HTML 코드에는 externalStyle.css 파일을 불러온다는 코드 이외에 CSS와 관련된 코드가 없어집니다.

/* CSS 파일입니다. */
body{
	background-color : black;
}
p{
    color : red;
    font-size : 5em;
}

따라서 나중에 수정하고 관리하기가 용이합니다.

우선순위 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="externalStyle.css">
    <style>
        p{
            color : green;
        }
    </style>
</head>
<body>
    <p style="color : blue"> 인라인 스타일이 가장 우선 순위가 강합니다. </p>
</body>
</html>

/* CSS 파일입니다. */
p{
    color : red;
    font-size : 5em;
}

위와 같이 인라인 스타일로는 글씨에 파란색을 적용하고, 내부 적용 스타일로는 초록색, 외부 적용 스타일로는 빨간색을 적용해보겠습니다.

우선순위가 인라인 스타일이 가장 강하므로 인라인 스타일 속성 값이 먼저 적용돼서 color : blue 가 됩니다. 그 후, font-size 속성은 인라인 스타일과 내부 적용 스타일에서 값을 주고 있지 않으므로, 외부 적용 스타일에서 font-size : 5em 속성이 적용이 됩니다.

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 블록 레벨 요소 vs 인라인 레벨 요소 - travelbeeee (0)	2020.04.02
[HTML+CSS] HTML의 요소 구조 - travelbeeee (0)	2020.04.02
[HTML+CSS] 사용자의 입력을 받는 <form> <label> <fieldset> <legend> 태그 (0)	2020.01.20
[HTML+CSS] 링크를 만들어 주는 <a> 태그 (0)	2020.01.20
[HTML+CSS] 이미지를 삽입하는 <img> 태그 (1)	2020.01.20

굳건하게