< CSS 기초 - html 문서 꾸미기, css 기본 구조 >
1. html 문서의 적용 대상에 font tag 를 직접 사용
<a href="index.html"><font color="red" size="20px">WEB</font></a>
2. html 문서의 적용 대상에 css를 적용하는 3가지 방법
(속성값은 : 로 부여, 속성간 구분은 ; (구분자) 를 사용)
1) html 대상 tag 내에 style 속성의 값으로 css 효과를 넣음 (inline 방식)
<a href="2.html" style="color:red; font-size:30px;">WEB</a>
2) html head tag 안에 style tag 와 선택자 + { } 를 사용, 따옴표(' 나 ")는 불필요함. (internal 방식)
(css 지정 대상 tag 에 직접 넣지 않고 style을 head tag로 별도로 뺐으므로 어떤 tag, id, class 를 대상으로 효과를 적용할 것인지를 나타내는 선택자가 반드시 필요함. 아래 예에서는 'a')
<head>
<title>CSS study</title>
<meta charset="utf-8">
<style>
a {
color: rgb(231, 213, 50);
font-size: 15px;
text-decoration: none;
}
h1 {
font-size: 35px;
text-align : center;
}
</style>
</head>
a, h1 == selector(선택자)
color: red; == declaration(선언)
color == property(속성)
red == property value(속성값)
; == 구분자(separator)
3) 2)번 방식의 css 구문을 별도 파일로 분리하는 방법 (external 방식; 뒤에 별도 정리)
4) 적용 우선 순위
- 특정 tag의 효과는 다르게 적용하려면...
- 2) 방법으로 전체 적용하고 동일 tag 중 특정 tag에만 1) 방법 적용
- 즉, tag에 직접 지정한 1)번 방법이 우선 순위가 높음
- 우선 순위 : inline > internal > external
5) CSS : Cascading Style Sheets
6) CSS 에서 주석 처리 : /* 주석 내용 */
'프로그래밍(Programming) > CSS' 카테고리의 다른 글
| CSS 중급 - 상속, Cascading (0) | 2018.08.22 |
|---|---|
| CSS 중급 - css code의 재사용 (0) | 2018.08.22 |
| CSS 중급 - 그리드 모델 (Grid model) (0) | 2018.08.22 |
| CSS 기초 - 박스 모델 (Box model) (0) | 2018.08.22 |
| CSS 기초 - 선택자(selector), 속성(property), 우선순위(priority) (0) | 2018.08.22 |