Written by
최태열
on
on
CSS1
CSS 기본
CSS란?
Cascading Style Sheet 의 약자로 HTML의 디자인적 요소를 분리시켜 구조화된 HTML이다.
CSS 기본 문법
선택자 { 속성명 : 속성값; }
-
HTML 요소 선택자
요소 { 속성명: 속성값;}
-
ID 선택자
#ID명 {속성명 : 속성값;}
-
CLASS 선택자
.CLASS명 {속성명 : 속성값;}
-
GROUP 선택자
여러 선택자 함께 사용할 때 사용한다.
요소, #ID명 {속성명 : 속성값;}
우선 순위 : 요소→ID→CLASS
CSS 적용
인라인 스타일
HTML 요소 내부의 style 속성을 사용하여 CSS 스타일 적용
해당 요소에만 스타일을 적용할 수 있다.
<h1 style = "color : green; text-decoration: underline"></h1>
내부 스타일 시트
head에 style 태그를 사용해서 CSS 적용 해당 HTML 문서에만 스타일을 적용할 수 있고 해당 문서의 동일한 요소들에게 동일하게 적용할 수 있다.
<head>
<style>
body { background-color: lightyellow; }
h2 { color: red; text-decoration: underline; }
</style>
</head>
외부 스타일 시트
.css 파일을 로드하여 사용 태그를 사용해 적용
<head>
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>
스타일 적용 우선순위
- 인라인 스타일
- 가장 마지막에 적용된 내부/외부 스타일
- 웹 브라우저 기본 스타일
Discussion and feedback