-
6. 외부 스타일 시트 external style sheet공부/HTML5 + CSS 2018. 6. 6. 21:32
외부 스타일 시트(External Style Sheet) : 스타일 내용을 별도의 페이지로 빼서 사용
- 하나의 스타일로 여러 개의 HTML 페이지에 적용하여 사용하고자 할 때 바람직
- 하나의 스타일 페이지만 바꾸면 연결된 전체 HTML 페이지가 바뀌므로 유지, 보수에 편리
- 각각의 HTML 페이지 문서는 <head> 섹션 안에 <link> 태그를 사용하여 스타일 페이지와 연결
- 스타일 시트 파일의 확장자는 css
- 실제로 사용할 페이지 제작
시맨틱 마크업 작업까지만 하고 내부 스타일 작업은 진행하지 않음
- 외부 스타일 파일 만들기
확장자가 css인 별도의 파일을 생성해서 그 안에 스타일 정의
- HTML 페이지와 CSS 페이지 연결
HTML 페이지 안의 <head> … </head> 태그 안에 <link> 태그를 사용하여 CSS 페이지의 경로를 지정하여 연결
- 추가로 HTML 문서 페이지를 작성하여 1~3단계 반복
HTML DOM : 트리 형태로 태그와 특성간의 관계를 구조적으로 표현한 것
상속관계를 표현
HTML에서도 CSS의 특성을 하위태그에 물려줄 수 있음
CSS의 내용중에 문자가 화면에 시각적으로 표현되는 것만 상속대상
(ex. 글꼴의 종류(font-family), 글꼴의 크기(font-size), 효과(굵게 : font-weight) 등)
inheritance.html
<!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><link rel="stylesheet" href="text/css" href="pp.css"></head><body><h1>h1 tag Title</h1><h2>h2 tag Title</h2><p>p tag hello!</p><p>p tag<em>hello!</em></p></body></html>pp.css
p{color: maroon;}body{font-family: sans-serif;}'공부 > HTML5 + CSS' 카테고리의 다른 글
8. 자주 쓰는 태그 (0) 2018.06.06 7. 선택자 Selector (0) 2018.06.06 5. 내부 스타일 시트 internal style sheet (0) 2018.06.06 4.인라인 스타일 inline style (0) 2018.06.06 3. Hello World! (0) 2018.06.06