CSS (Cascading Style Sheet)
HTML 문서의 색이나 모양 등 외관을 꾸미는 언어
CSS로 작성된 코드를 스타일 시트(style sheet)라고 부른다.
현재 CSS3 : CSS level 3
CSS3의 기능
- 색상, 배경
- 텍스트
- 폰트
- 박스 모델(Box Model)
- 비주얼 포맷 및 효과
- 리스트
- 테이블
- 사용자 인터페이스
CSS3 스타일 시트 구성
셀렉터 { 프로퍼티 : 값 ; }
셀렉터 : CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름(태그 이름)
프로퍼티 : 스타일 속성 이름, 약 200개정도의 프로퍼티가 있음.
값 : 프로퍼티의 값
ex) <span>텍스트를 20픽셀 blue로 출력하는 CSS3 스타일 시트 정의
span { font-size : 20px; color : blue; }
+) 기타 CSS 특징
대소문자 구분 안함.
/* 주석문 */ : 스타일 시트 내에 붙이는 설명문. <style>태그 내에서 사용.
HTML 문서에 CSS3 스타일 시트 작성
방법 1. <style></style> 태그에 스타일시트 작성
방법 2. style 속성에 스타일 시트 작성
방법 3. 스타일 시트를 별도에 파일로 작성 ( <link>태그나 @import로 불러서 사용함 )
1. <style>태그에 스타일 시트 만들기
전형적인 형태
<head>
<style>
body{ background-color : mistyrose; }
</style>
<style>
h3{ color : purple; }
</style>
</head>
<style>태그는 <head> 태그 내에서만 사용되며, 여러번 작성이 가능하다.
<style>태그에 작성된 스타일 시트는 웹 페이지 전체에 적용됨
2. style 속성에 스타일 시트 만들기
HTML 태그의 style 속성에 CSS3 스타일 시트를 작성.
단, 해당 태그에만 적용된다.
ex) 폰트 사이즈는 30px, 글자색은 마젠타
<p style="font-size : 30px; color:magenta">축구좋아</p>
3. 외부 스타일 시트 파일 불러오기
웹 페이지에서 CSS3 스타일 시트 파일을 불러 사용
- 동일한 스타일 시트를 웹 페이지마다 중복 작성 하지 않도록
- 웹 사이트의 전체 웹 페이지 모양의 일관성 확보
외부 CSS3 스타일 시트 파일을 불러오는 2가지 방법
1. <link>태그 이용
<head>
<link href = "mystyle.css" type = "text/css" rel = "stylesheet">
</head>
2. @import 이용
<style>
/* 세 가지 방법 모두 가능*/
@import url(mystyle.css);
@import url('mystyle.css');
@import "mystyle.css";
</style>CSS3 규칙
스타일 상속
CSS스타일은 '부모 태그'로부터 상속
- 부모 태그(부모 요소) : 자식을 둘러싸고 있는 태그
<p style = "color:green"> 안녕하세요.
<em style = "font-size:25px">자식입니다.</em>
</p><p>태그는 <em>의 부모태그
스타일 합치기와 오버라이딩
태그에 적용 가능한 스타일
(우선순위 : 4-3-2-1)
1. 브라우저의 디폴트 스타일
2. 스타일 시트 파일에 선언된 스타일(외부파일)
3. <style></style>태그에 선언된 스타일(<head>에 선언된 스타일 태그)
4. 태그에 선언된 style 속성(<p style = "color:green">)
예제
스타일 합치기(cascading)와 오버라이딩(overriding)
1. 브라우저 스타일 p{ color : black; font-size : 16px; }
2. external.css p{ background : mistyrose; }
3. <head><style> p{color:blue; font-size:12px;}
4. style 속성 <p style="font-size:25px"> 안녕 </p>
Q. 안녕이 어떻게 출력되는가?
'Front-end' 카테고리의 다른 글
| CSS 배치, 블록/인라인/인라인블록박스(display, position), 리스트/표/폼 꾸미기 (0) | 2024.08.01 |
|---|---|
| CSS 기본_ 셀렉터, 색/텍스트/폰트/박스/배경/커서 (0) | 2024.07.31 |
| [HTML5] 웹 폼 (0) | 2024.07.31 |
| [HTML5] 시맨틱 웹 _ 문서 구조화 (1) | 2024.07.31 |
| [HTML5] <a>태그, <iframe>태그, 미디어 삽입 (1) | 2024.07.31 |