[HTML] HTML 문서에 CSS를 적용하는 3가지 방법
페이지 정보
작성자 다미소프트 조회 14,025회 작성일 18-10-16 13:30 댓글 0건본문
1) Inline Styles - HTML 태그의 style 속성에 CSS 코드를 넣는 방법
인라인 스타일은 단일 요소에 고유한 스타일을 적용하는 데 사용될 수 있습니다. HTML 태그에 style 속성을 추가하여 간단하게 CSS를 추가할 수 있습니다. 아래 예제는 div 태그에 배경을 파란색으로 채우는 예제입니다. Inline Style은 style sheet의 다양한 장점을 살리지 못하므로 가급적 사용하지 않는 것이 좋습니다.
<div style="background-color:#00f">내용</div>
2) Internal Style Sheet - HTML 문서의 <head> 섹션 내에 <style> 요소를 추가하여 CSS 코드를 넣는 방법
하나의 HTML 문서 내에서 적용되는 고유한 스타일을 작성할 경우 사용합니다. 작성된 CSS는 해당 HTML 문서 내에서만 영향을 끼칩니다.
아래 예제를 HTML 문서의 <head> 섹션 내에 작성하면 해당 HTML 문서의 <div> 태그의 글자색은 전부 파란색이 됩니다.
<style>
div {color: blue;}
</style>
3) External Style Sheet - 외부 스타일시트를 작성하고 HTML 문서의 <head> 섹션내에서 <link> 요소로 스타일을 적용
별도의 CSS 파일을 만들고 HTML 문서의 <head> 섹션 내에 <link> 요소로 style sheet를 참조합니다.
하나의 style sheet 파일을 작성하면 해당 style sheet 링크를 포함하는 모든 HTML 문서에 적용할 수 있습니다.
아래의 예제처럼 <h1> 태그에 글자색을 붉은색으로 변경하는 스타일을 작성하였다면, style.css 파일을 링크하고 있는 모든 HTML 문서의 <h1> 태그의 글자색은 붉은색으로 변경됩니다.
> style.css 파일에 아래 코드 작성
h1 {
color: red;
}
> HTML 파일에 style.css 파일 include
<link rel="stylesheet" href="style.css">
인라인 스타일은 단일 요소에 고유한 스타일을 적용하는 데 사용될 수 있습니다. HTML 태그에 style 속성을 추가하여 간단하게 CSS를 추가할 수 있습니다. 아래 예제는 div 태그에 배경을 파란색으로 채우는 예제입니다. Inline Style은 style sheet의 다양한 장점을 살리지 못하므로 가급적 사용하지 않는 것이 좋습니다.
<div style="background-color:#00f">내용</div>
2) Internal Style Sheet - HTML 문서의 <head> 섹션 내에 <style> 요소를 추가하여 CSS 코드를 넣는 방법
하나의 HTML 문서 내에서 적용되는 고유한 스타일을 작성할 경우 사용합니다. 작성된 CSS는 해당 HTML 문서 내에서만 영향을 끼칩니다.
아래 예제를 HTML 문서의 <head> 섹션 내에 작성하면 해당 HTML 문서의 <div> 태그의 글자색은 전부 파란색이 됩니다.
<style>
div {color: blue;}
</style>
3) External Style Sheet - 외부 스타일시트를 작성하고 HTML 문서의 <head> 섹션내에서 <link> 요소로 스타일을 적용
별도의 CSS 파일을 만들고 HTML 문서의 <head> 섹션 내에 <link> 요소로 style sheet를 참조합니다.
하나의 style sheet 파일을 작성하면 해당 style sheet 링크를 포함하는 모든 HTML 문서에 적용할 수 있습니다.
아래의 예제처럼 <h1> 태그에 글자색을 붉은색으로 변경하는 스타일을 작성하였다면, style.css 파일을 링크하고 있는 모든 HTML 문서의 <h1> 태그의 글자색은 붉은색으로 변경됩니다.
> style.css 파일에 아래 코드 작성
h1 {
color: red;
}
> HTML 파일에 style.css 파일 include
<link rel="stylesheet" href="style.css">
- 이전글CSS로 마우스 커서 모양 변경하기 19.03.15
- 현재글 HTML 문서에 CSS를 적용하는 3가지 방법
댓글목록
등록된 댓글이 없습니다.