Browser Default Styling
- 같은 html 파일도 다른 브라우저에 보여질 때 다르게 보인다.
- 일부 태그는 지원이 안됨
- 브라우저는 서로 다른 default style을 가지고 있다.
- 일반적으로 dafault는 plain
Adding Style
- 스타일 태그가 점차 html에 제외되서, 스타일은 style attribute 가 됨
- css 사용하는 것이 올바른 방법
<h1 style = "color:blue"> heading </h1>
Cascading Style Sheet
- CSS는 다양한 element에 적용할 수 있는 포괄적인 규칙으로 정의됨

h1{
color:blue;
}
Rule Syntax
- {}, ; 은 매우 중요
- 좋은 에디터는 큰 차이를 만듬
Internal Style Sheet
- Styling은 <head> 안에 정의되어 있음.
- Rule은 <style> 안에 정의
- 스타일은 해당 파일안에 모든 element에게 적용됨
<head>
<meta charset="UTF-8">
<title> title </title>
<style>
h1{
color:blue;
}
</style>
</head>
External Style Sheets
- 외부 파일안에 rule을 적을 수 있다 (<style> 태그 사용하지 않음)
- .css 파일
- 스타일 시트 링크는 head section에 놓는다.
<link rel="stylesheet" href="style.css">
The “Cascading” part of CSS
Cascading 의미
아래 순서로 덮어 씀
- Browser default
- External style sheets
- Internal style (head section)
- Inline style (HTML element 에 있는 것)
Rule 우선 순위
- 2개의 external files 가 정의되있다면 어떤 것을 선택?
- 가장 최근 파일을 선택 (리스트 마지막에 있는 것)
- 같은 파일에 1개 이상 rule 이 있으면?
- 파일 마지막에 있는 것을 적용
h1{
font-family: Arial;
}
h1{
font-family: Times;
}
!Important
h1{
font-family: Arial !important;
}
h1{
font-family: Times;
}
Review
- content를 포멧으로부터 왜 분리?
- external/internal style sheet이 어떻게 연관되어 있나?
- CSS 예제 – http://csszengarden.com/
공부 위치 – https://www.coursera.org/learn/introcss/lecture/pf413/01-02-cascading-style-sheets
Leave A Comment