1. CSS (Style)

1. CSS (Style)

2021. 8. 14. 20:17ㆍWEB/CSS

CSS 적용 방법

HTML 문서에 CSS 스타일을 적용할 때에는 다음과 같이 세 가지 방법을 사용할 수 있습니다.

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

2. 내부 스타일 시트(Internal style sheet)

3. 외부 스타일 시트(External style sheet)

인라인 스타일(Inline style)

인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다

인라인 스타일은 해당 태그의 요소에만 스타일을 적용할 수 있다

<div>
    <p style="color: blue"> Change text color </p>
</div>

해당 방식은 한 번 스타일을 설정하고나면 이후 변경이 어렵다

또한 스타일 시트의 이점이 사라지기 때문에, 꼭 필요한 경우에만 사용해야 한다

내부 스타일 시트(Internal style sheet)

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

내부 스타일 시트는 해당 HTML 문서에만 설정한 스타일을 적용할 수 있다

<head>
    <style>
        h1 {
          color: blue;
        }
    </style>
</head>
<body>
    <h1> Style CSS </h1>
</body>

외부 스타일 시트(External style sheet)

웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 한다

외부에 작성된 스타일 시트 파일을 .css 확장자를 사용하여 저장하고 import해서 사용한다

스타일을 적용할 웹 페이지의 <head>태그에 <link>태그를 사용하여

외부 스타일 시트를 포함해야만 스타일이 적용된다

<head>
    <link rel="stylesheet" href="./style.css">
</head>

스타일 적용의 우선순위

위 스타일 적용의 우선순위는 아래와 같다

1. 인라인 스타일 (HTML 요소 내부)

2. 내부 / 외부 스타일 시트 (HTML 문서의 head 요소 내부)

3. 웹 브라우저 기본 스타일

인라인 스타일이 적용된 태그에 내 · 외부 스타일 시트를 설정해도 무조건 인라인이 적용된다

만약 외부 스타일, 내부 스타일 시트가 같은 태그에 적용되었다면 마지막에 적용된 순서로 적용된다

* 스타일 적용은 외부 스타일 시트를 사용하는 것이 유지 보수 및 안정성에서 가장 좋은 방법이다

JUST DO IT