어제 오늘 내일

[HTML/CSS] CSS 적용하는 3가지 방법, 장단점, 우선순위 본문

IT/HTML&CSS

[HTML/CSS] CSS 적용하는 3가지 방법, 장단점, 우선순위

hi.anna 2022. 4. 29. 16:03

 

 

CSS를 적용하는 3가지 방법

HTML에 CSS를 적용하는 방법은 3가지가 있습니다.

  1. 인라인 (Inline CSS)
  2. 내부 (Embedded CSS)
  3. 외부 (External CSS)

 

인라인 (Inline CSS)

<p style='color:blue;font-style:italic;'> 안녕하세요? </p>

스타일을 적용하고자 하는 HTML 위치에 'style' 속성을 정의하여

HTML에 직접 스타일을 정의할 수 있습니다.

 

 

내부 (Embedded CSS)

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-style: italic;
        }
    </style>
</head>

<body>
    <p> 안녕하세요? </p>
</body>
</html>

CSS 속성을

HTML의 <head></head> 태그 사이에

<style></style>을 배치하는 방법입니다.

이 때는, HTML의 어느 항목에 CSS를 적용해야 하는지를 나타내기 위해

CSS 선택자를 사용해야 합니다.

위 예제에서는 <style></style> 태그 안의 'p'가 선택자(CSS Selector)입니다. 

이것은 HTML의 'p' 태그를 선택하여 스타일을 적용하도록 합니다.

 

 

외부 (External CSS)

/* test_style.css */
p {
    color: blue;
    font-style: italic;
}
<!DOCTYPE html>
<html>

<head>
    <link rel='stylesheet' href='./test_style.css'>
</head>

<body>
    <p> 안녕하세요? </p>
</body>

</html>

이번에는 외부에 'test_style.css' 파일을 따로 작성하였습니다.

그리고, 'test_style.css' 파일을 

HTML에서 <link> 태그를 사용하여 참조하도록 하였습니다.

 

 

 

inline vs embedded vs external (장단점)

위 세 가지 방법 중 어떤 방법을 사용하여 스타일을 정의해야 할까요?

 

inline (인라인)

이 방법은 HTML 태그에 직접 작성하기 때문에

특정 영역에 스타일을 적용하고 싶을 때 가장 빠른 방법입니다.

 

하지만, 이 방법은

HTML 파일의 사이즈를 너무 크게 만들어서,

화면에 웹페이지가 로딩되는 시간을 오래 걸리게 합니다.

또한,

HTML과 CSS가 코드에 뒤섞이게 되어 유지보수를 어렵게 하기도 합니다.

 

 

embedded (내부)

embedded로 적용하는 방법 또한

CSS가 HTML 파일 내부에 정의됩니다.

다만, HTML inline처럼 HTML과 CSS가 완전히 뒤섞여 있지는 않습니다.

 

inline과 embedded의 차이는

inline은 특정 HTML 태그에만 style이 적용되지만,

embedded는 <head> 태그가 로드되는 하위의 모든 HTML 페이지에

스타일이 적용된다는 것입니다.

 

 

external (외부)

일반적으로 가장 권장하는 방법입니다.

이 방법을 사용하면

CSS와 HTML이 물리적 파일로 분리됩니다.

이로써, 유지보수도 편해지게 됩니다.

 

 

 

우선순위

inline > embedded > external

세 가지 방법을 동시에 적용했을 때

우선순위가 가장 높은 것은

inline입니다.

그 다음이 embedded, external 순서입니다.

 

예제

<style>
  p {
    color: blue;
  }
</style>
<body>
    <p style='color:red'> 안녕하세요? </p>
</body>

p {
  color : yellow;
}

위 예제는

inline, embedded, external 3가지 방법으로

글자의 색깔을 바꾸는 CSS가 적용되어 있습니다.

 

inline은 빨간색,

embedded는 파란색,

external에는 노란색이 설정되어 있습니다.

 

최종적으로 반영된 색은 inline에 적용된 빨간색입니다.

inline이 가장 우선 순위가 높기 때문입니다.

inline, embedded의 css를 삭제해보면서 우선순위를 확인해 보세요.

 

 

 

 

반응형

'IT > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] div 안의 배경색 지정하기  (0) 2022.07.23
[CSS] CSS에서 색깔을 지정하는 4가지 방법 (이름, 16진수, RGB(RGBA), HSL(HSLA))  (0) 2022.06.05
[CSS] 텍스트에 취소선 긋기  (0) 2022.03.24
[HTML/CSS] hr 태그로 가로줄 긋기 (굵기, 길이, 색깔, 모양, 정렬 등)  (0) 2022.03.22
[HTML/CSS] div에 마우스 오버시 손가락 아이콘 나타내기  (0) 2022.02.26
공유하기 링크
'IT/HTML&CSS' Related Articles more
Comments