CSS

HTML파일에 CSS 적용하는 방법 3가지

행복주의자 2023. 7. 10. 00:14

HTML 파일(문서)에 CSS 스타일을 적용하는 방법은 3가지가 있다.

바로,

  1. 인라인 스타일(Inline style)
  2. 내부 스타일 시트(Internal style sheet)
  3. 외부 스타일 시트(External style sheet)

 

 

1. 인라인 스타일(Inline style)

: HTML 요소 내부에 style속성을 사용하여 CSS스타일을 적용하는 방법.

해당 요소에만 스타일을 적용할 수 있다.

<h2 style="color:green; text-decoration:underline">인라인스타일</h2>

위 예시에서는 해당 h2 요소에만 color:green, text-decoration:underline 스타일을 적용할 수 있다.

 

인라인스타일 방식은 한번 설정된 스타일을 변경하기 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 된다. 따라서 이 방식은 될 수 있으면 꼭 필요한 경우에만 사용해야한다.

 

 

 

2. 내부스타일 시트(Internal Style Sheet)

: HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS스타일을 적용.

해당 HTML 문서에만 스타일을 적용할 수 있다.

<!DOCTYPE html>
<html lang="en-US">
<head>
 <style>
  body { background-color: lightyellow;}
  h2 { color: red; text-decoration: underline;}
 </style>
</head>

 

 

3. 외부 스타일 시트(External Style Sheet)

: 웹사이트 전체의 스타일을 하나의 파일에 따로 작성하여 쉽게 변경할 수 있도록 해준다.

외부에 작성된 이러한 style sheet는 .css 확장자를 사용하여 저장된다.

스타일을 적용할 웹 페이지의 <head> 태그에 <link>태그를 사용하여 외부 style sheet를 연결해야만 스타일이 적용된다.

 

index.html

<!DOCTYPE html>
<html lang="en-US">
<head>
 <link rel="stylesheet" href="/examples/media/expand_style.css"> <!--외부스타일시트 연결-->
</head>

 

expand_style.css

body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }

 

 

# 스타일 적용의 우선순위

위 3가지 스타일 적용방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 우선순위에 따라 결정된다.

 

1. 인라인 스타일 : 인라인스타일이 최우선 적용된다.

2.  - 내부 스타일시트 / 외부 스타일시트

내부 스타일시트& 외부 스타일시트 둘 다 있는 경우, 더 아래쪽에 적혀있는 스타일시트가 적용된다.

아래 예시의 경우, 외부 스타일시트가 더 아래쪽에 적혀있으므로 외부 스타일시트가 적용된다.

<!DOCTYPE html>
<html lang="en-US">
<head>
<!--내부 스타일시트-->
    <style>
    .testp {
        color: #0000FF;
    }
    p {
        color: #00FF00;
    }
    </style>

<!--외부 스타일시트-->
    <link rel="stylesheet" href="test.css">
</head>
</html>

- 동일레벨(ex: 같은 내부스타일시트)에서 class 스타일/ 태그 스타일이 공존하는 경우

: class 스타일이 우선적용된다.

 

- 여러 개의 외부 스타일인 있는 경우

: 가장 마지막 외부 스타일이 우선 적용된다.

 

 

한번 예시를 통해 확인해보자.

/* test.css */
p {
    color: #FFFF00;
}
.testp {
    color: #00FFFF;
}
div {
    color: #FFFF00;
}
.testdiv {
    color: #00FFFF;
}
/* test2.css */
.testdiv {
    color: #000000;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--내부 스타일 시트-->
    <style>
    .testp {
        color: #0000FF;
    }
    p {
        color: #00FF00;
    }
    </style>

<!--외부 스타일 시트-->
    <link rel="stylesheet" href="test.css">
    <link rel="stylesheet" href="test2.css">
</head>
<body>
    <!--인라인스타일이 최우선 적용된다.-->
    <p style="color: #FF0000;">
       #FF0000
    </p>

    <!--내부 스타일시트 & 외부 스타일시트 둘 다 있는 경우, 더 아래쪽에 적혀있는 스타일시트가 적용-->
    <p><!--p태그에 관하여 내부스타일시트vs외부스타일시트 test.css, 아래에 적혀있는 test.css 승!-->
       #FFFF00 <!--test.css파일에 있는 p태그 color 적용!-->
    </p>

    <!--동일레벨에서 class 스타일/ 태그 스타일이 공존하는 경우, class 스타일이 우선적용-->
    <p class="testp"><!--test.css내에서 p태그, testp class스타일 둘다있다. class스타일 승!-->
       #00FFFF
    </p>

    <!-- 여러개의 외부 스타일이 있는 경우, 가장 마지막 외부 스타일이 우선 적용 -->
    <div class="testdiv"> <!--마지막 외부스타일시트인 test2.css 우선 적용-->
       #000000
    </div>
</body>
</html>

 

참고

http://www.tcpschool.com/css/css_intro_apply

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

https://www.skyer9.pe.kr/wordpress/?p=1433 

 

CSS 적용 우선순위 – 상구리의 기술 블로그

CSS 적용 우선순위 인라인 스타일(inline style) 인라인 스타일(inline style) 이 최우선 적용됩니다. 내부 스타일(internal style) 과 외부 스타일(external sytle) 내부 스타일(internal style) 과 외부 스타일(external

www.skyer9.pe.kr