안녕하세요, 여행벌입니다.
오늘은 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 속성이 적용이 됩니다.
