인라인 스타일(inline style)
인라인 스타일은 HTML 요소의 style 속성을 사용하여 스타일을 지정하는 방법입니다.
이 방법은 다른 스타일 방법보다 우선 순위가 높아, 덮어쓰기가 쉽습니다.
하지만, 스타일을 수정하려면 모든 HTML 요소를 수정해야 하므로 유지 보수가 어려워집니다.
따라서, 인라인 스타일은 가능한 사용하지 않는 것이 좋습니다.
인라인 스타일은 다음과 같이 사용합니다.
<p style="color: red; background-color: yellow">인라인 스타일</p>
위 코드에서 style 속성 안에 스타일을 지정하면 됩니다.
스타일은 속성 : 값; 형태로 지정하며, 여러 개의 스타일을 지정할 때는 세미콜론(;)으로 구분합니다.
위 코드에서는 color 속성을 red로, background-color 속성을 yellow로 지정했습니다.
이렇게 지정한 스타일은 해당 요소에만 적용됩니다.
내부 스타일(internal style)
내부 스타일은 HTML 문서 내부에 <style> 태그를 사용하여 스타일을 지정하는 방법입니다. 이 방법은 인라인 스타일보다는 우선 순위가 낮지만, 외부 스타일보다는 우선 순위가 높습니다.
내부 스타일은 다음과 같이 사용합니다.
<!DOCTYPE html>
<html>
<head>
<title>내부 스타일</title>
<style>
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>내부 스타일</p>
</body>
</html>
위 코드에서는 <style> 태그 안에 스타일을 지정하면 됩니다.
스타일은 선택자 { 속성: 값; } 형태로 지정하며, 여러 개의 스타일을 지정할 때는
줄바꿈이나 세미콜론(;)으로 구분합니다.
위 코드에서는 p 요소에 color 속성을 blue로, background-color 속성을 yellow로 지정했습니다.
이렇게 지정한 스타일은 해당 요소에만 적용됩니다.
외부 스타일(external style)
외부 스타일(external style)은 HTML 문서와는 별개의 파일에서 스타일을 지정하는 방법입니다.
이 방법은 내부 스타일보다는 우선 순위가 낮지만, 인라인 스타일보다는 우선 순위가 높습니다.
또한, 스타일을 한 번만 작성하면 여러 HTML 문서에서 적용할 수 있으므로 유지 보수가 용이합니다.
외부 스타일을 적용하려면, 스타일을 지정한 CSS 파일을 HTML 문서에서 로드해야 합니다.
이때, <link> 태그를 사용하여 CSS 파일을 로드할 수 있습니다.
<link> 태그는 보통 <head> 태그 안에 위치하며, href 속성을 사용하여 CSS 파일의 경로를 지정합니다.
다음은 외부 스타일을 사용하는 예시입니다.
style.css
p {
color: red;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>외부 스타일<title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>외부 스타일</p>
</body>
</html>
위 코드에서는 style.css 파일에서 p 요소에 color 속성을 red로 지정했습니다.
이렇게 지정한 스타일은 index.html 파일에서 <link> 태그를 사용하여 로드하였으므로, p 요소에 적용됩니다.
외부 스타일을 사용하면, 스타일을 중복해서 작성하지 않아도 되므로 코드의 양을 줄일 수 있습니다.
또한, CSS 파일만 따로 관리할 수 있으므로 유지 보수가 용이합니다.
때문에 가능하면 외부 스타일을 사용하는 것이 좋습니다.
'개발공부 > HTMl+CSS+JAS' 카테고리의 다른 글
| [CSS] CSS 주석 처리 (0) | 2023.03.21 |
|---|---|
| [CSS] CSS적용 순서 (0) | 2023.03.21 |
| [CSS] 구성요소 및 적용방법 (0) | 2023.03.21 |
| [HTML] 하이퍼링크 삽입하기_a, href, target (0) | 2023.03.21 |
| [HTML] 삽입 태그_img, embed, object, audio, video (0) | 2023.03.21 |
