-
5. 내부 스타일 시트 internal style sheet공부/HTML5 + CSS 2018. 6. 6. 21:28<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style type="text/css">h1{color: #808000;margin-left: 20px;}</style></head><body><h1>내부 스타일 시트가 적용된 문장입니다.</h1><h1>모든 h1에 적용됩니다.</h1></body></html>
내부 스타일 시트(Internal Style Sheet) : HTML 파일 안에 별도 영역으로 스타일 정의를 해놓음
일반적으로 <head> … </head> 안에 style 엘리먼트를 사용
<style type="text/css">
h1
{
font-family: '돋움체';
font-size: 25px;
}
</style>
위는 <h1>태그에 글꼴 종류를 돋움체로 크기를 25px로 지정한 경우.
내부 스타일 시트는 다음과 같은 특징
- HTML 문서 하나가 고유한 CSS내용을 가진다고 생각될 때 사용
- <style> 태그를 사용하여 지정
- HTML 페이지 안에 위치하므로 영향을 주는 범위는 페이지 안의 전체 태그. (위 예는 페이지의 모든 h1태그에 적용)
- 페이지가 바뀌면 영향을 주지 않으므로 만약 다른페이지에서 사용하고싶으면 복사
'공부 > HTML5 + CSS' 카테고리의 다른 글
7. 선택자 Selector (0) 2018.06.06 6. 외부 스타일 시트 external style sheet (0) 2018.06.06 4.인라인 스타일 inline style (0) 2018.06.06 3. Hello World! (0) 2018.06.06 2. article, section, 특수문자 (0) 2018.06.06