[CSS] CSS(Cascading Style Sheets), 3가지 적용 방법, 상속 개념
1. HTML로 구조를, CSS로 디자인을 표현하자
2. CSS를 입히는 3가지 방법
2-1. 인라인 스타일(Inline Style)
- 태그 안에서 직접 스타일 지정하는 방법
<p style='background-color: yellow; color:#ff0000'>스타일</p>
- 해당하는 태그 스타일만 적용됨
- 태그마다 스타일 지정해서 유지, 보수하기에는 불편한 점이 있음
2-2. 내부 스타일 시트(Internal Style Sheet)
- HTML 문서 안에 별도 영역으로 스타일 정의하는 방법
- 주로 <head></head> 태그 사이에 정의
<style type='text/css'>
span {
border: 1px solid black;
background-color: green;
}
</style>
- <style> 태그 사용
- HTML 문서 하나에 CSS 스타일 포함
- HTML 문서 안에 있는 모든 태그가 스타일 적용됨
2-3. 외부 스타일 시트(External Style Sheet)
- CSS 페이지를 별도로 만들어 HTML 문서에 연결하는 방법
- <head></head> 태그 사이에 연결
<link rel='stylesheet' type='text/css' href='style.css' />
- 같은 스타일을 여러 페이지에 적용할 때 가장 좋은 방법
- 유지, 보수하기 편함
3. 상속 개념
3-1. HTML DOM(Document Object Model)
- 트리 형태로 태그와 특성 간의 관계를 구조적으로 표현한 것
- 상속 관계가 나타남
image from w3schools.com
3-2. CSS의 상속
- CSS에서는 상속 개념이 있는데, 글꼴의 종류(Font-family), 크기(font-size), 효과(굵게: font-weight) 등이 상속될 수 있는 선택자가 있음
<body>
<h1>h1 tag Title</h1>
<h2>h2 tag Title</h2>
<p>p tag</p>
<p>p tag
<em>Hello World!</em>
</p>
</body>
<style type="text/css">
p {
color: lime;
font-family: "Times New Roman", Times, serif;
}
</style>
- 위 CSS는 p 태그에만 적용이 됨
- Result
h1 tag Title
h2 tag Title
p tag
p tag Hello World!
<style type="text/css">
p {
color: maroon;
}
body {
font-family: "Times New Roman", Times, serif;
}
</style>
- 하지만 위 CSS는 body 태그에 있는 스타일이 body 태그 안에 있는 모든 태그에 스타일이 적용됨
- Result
h1 tag Title
h2 tag Title
p tag
p tag Hello World!
출처 및 참고
- 쉽게 배우는 웹앱&하이브리드앱, 김응석 저, 이지스퍼블리싱
'Web Development > HTML & CSS' 카테고리의 다른 글
| [HTML] 시맨틱 마크업, 엘리먼트 & 태그, 기본적인 & 구조적인 시맨틱 마크업, DOCTYPE (0) | 2017.01.31 |
|---|