스타일 적용 방식

CSS 스타일을 적용하는 방법을 설명합니다.

방식	설명	예시
인라인 스타일	HTML 요소의 style 속성에 직접 스타일을 적용	<p style="color: blue;">텍스트</p>
내부 스타일 시트	HTML 문서 내부에 <style> 태그를 사용하여 정의	<style> p { color: red; } </style>
외부 스타일 시트	별도의 .css 파일을 링크하여 스타일을 정의	<link rel="stylesheet" href="styles.css">

인라인 스타일

HTML 태그의 style 속성 안에 스타일을 지정하는 스타일 속성을 작성하는 방법

항목	설명
장점	- 특정 요소에만 빠르게 스타일을 적용할 수 있음.
	- 별도의 CSS 파일을 작성하지 않고, 태그 내에서 바로 스타일을 지정할 수 있음.
단점	- 유지보수가 어렵고, 동일한 스타일을 여러 곳에 적용할 때 비효율적임.
	- 코드가 복잡해지고, HTML 파일의 가독성을 해침.
	- 여러 요소에 스타일을 적용할 때, 동일한 스타일을 여러 번 반복해서 작성해야 하므로 수정 시 작업이 많아짐.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=">
    <title>스타일 적용 방법 - 인라인 스타일</title>
</head>
<body>
    <h1>인라인 스타일</h1>
    <h2 style="color: red;">인라인 스타일 방식입니다.</h2> 
    <h3 style="font-style: italic;">
        태그 내부의 style 속성을 지정해서 적용합니다.
    </h3>
    <h5 style="font-weight: lighter;">
        단점 : <br>
        - 수정 작업 위해서, 스타일을 적용한 모든 요소를 수정해야한다. <br>
        - 유지보수하기 어렵다.
    </h5>
</body>
</html>
HTML
복사

내부 스타일

HTML 문서 내에서 <style> 태그를 이용해 CSS를 적용하는 방식

항목	설명
장점	- HTML 문서 내에서 스타일을 한 곳에서 관리할 수 있어 인라인 스타일보다 가독성이 좋음.
	- 여러 요소에 공통된 스타일을 지정할 수 있어 코드 중복을 줄일 수 있음.
	- 외부 CSS 파일을 만들지 않아도 되어 간단한 웹 페이지 제작에 유용함.
단점	- 외부 스타일시트처럼 여러 페이지에 걸쳐 동일한 스타일을 적용할 수 없기 때문에, 여러 페이지에서 코드 중복이 발생.
	- HTML과 CSS가 분리되지 않아 유지보수가 어려워질 수 있음.
	- 대규모 프로젝트에서는 내부 스타일보다 외부 스타일시트를 사용하는 것이 더 효율적임.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스타일 적용 방법 - 내부 스타일</title>
    <style>
        h1 { color: red; }
        h2 { font-style: italic; }
        h3 { font-weight: lighter; }
    </style>
</head>
<body>
    <h1>내부 스타일</h1>
    <h2>&lt;head&gt; 태그에 &lt;style&gt; 태그를 작성하여
        선택자와 CSS 속성을 적용하여 스타일을 지정하는 방식입니다.
    </h2>
    <h3>HTML 파일 안에서, CSS와 HTML 코드를 분리할 수 있다.</h3>
</body>
</html>
HTML
복사

외부 스타일

항목	설명
장점	- HTML과 CSS 파일이 분리되어 가독성이 높아지고, 유지보수가 쉬움.
	- 스타일을 재사용할 수 있어 여러 페이지에 동일한 스타일을 적용 가능.
	- 여러 페이지에 걸쳐 일관된 디자인을 적용할 수 있음.
	- 스타일 파일을 캐싱하여 웹 페이지 로딩 속도가 향상될 수 있음.
단점	- HTML 파일 외부에 추가된 CSS 파일을 불러오기 때문에 서버 요청이 증가하여 페이지 로딩 속도에 영향을 줄 수 있음.
	- 외부 파일에 의존하므로, 인터넷 연결이 끊긴 경우나 외부 파일을 불러오지 못하는 상황에서 스타일이 적용되지 않을 수 있음.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스타일 적용 방법 - 외부 스타일</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>외부 스타일</h1>
    <h2>외부에서 작성한 CSS 파일을 &lt;link&gt; 태그를
        이용하여 해당 파일을 불러와서 적용하는 방식
    </h2>
    <ul>
        <li>HTML 코드와 CSS 코드를 파일 단위로 분리</li>
        <li>HTML 작업과 CSS 작업을 동시에 할 수 있음</li>
        <li>코드가 간결해지고, 유지보수에도 편리함</li>
        <li>CSS 스타일을 재사용할 수 있음</li>
    </ul>
</body>
</html>
HTML
복사

style.css

h1 { color: red; }
h2 { font-style: italic; }
h3 { font-weight: lighter; }
CSS
복사