CSS 소개
CSS란?
Cascading Style Sheet
화면을 구상 할 스타일을 미리 정해 두고 단계적으로 해당 스타일을 적용하는 방식의 코드이다.
CSS 장점
소스의 관리와 수정이 쉬워진다. (문서와 디자인의 분리)
다양한 기기별 디자인 적용이 용이해진다.
웹 문서 제작시간이 줄어든다.
CSS 종류
● Inline Style Sheet (태그 내부에 속성으로 들어가는 것)
형식 : <태그명 style="스타일" 다른속성...></태그명>
1 2 3 4 5 6 7 8 | <html> <head> </head> <body> <h1 style="color:red">Hello World</h1> </body> </html> | cs |
● Inner Style Sheet (Head 영역에서 미리 지정)
형식 : <style type="text/css"><!--스타일 정의--></style>
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <style> h2{color:blue} </style> </head> <body> <h2>Hellow World</h2> </body> </html> | cs |
태그명/class 명/ID명을 기준으로 지정
클래스는 .으로 시작한다.
● Outer Style Sheet (독립적인 파일로)
형식 : <linke rel="stylesheet" type="text/css" herf="스타일 파일.css">
스타일 정의
● 태그 스타일 → 태그 명{속성 : 값 ...}
● 클래스 스타일 → .클래스 명 {속성 : 값 ...}
● 네임드 클래스 스타일 → #클래스(네임드 아이디) 명 {속성 : 값 ...}
● 태그 내부에 있는 태그 스타일 → 태그 명 태그 명 {속성 : 값 ...}
● 여러 태그 스타일 → 태그명, 태그명 {속성 : 값 ...}
'Web Programming > HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] JavaScript란? (4) | 2018.04.08 |
|---|---|
| [CSS] Style 속성 (0) | 2018.04.07 |
| [HTML] 기본태그 두번째 (0) | 2018.04.07 |
| [HTML] TABLE (0) | 2018.04.07 |
| [HTML] 기본태그 (2) | 2018.04.07 |
