CSS(Cascading Style Sheet)란?
HTML 문서의 색이나 모양 등 외관을 꾸미는 언어이다.
CSS로 작성된 코드를 스타일 시트(style sheet)라고 부른다.
1.CSS3의 기능
- 색상과 배경
- 텍스트
- 폰트
- 박스 모델(Box Model)
- 비주얼 포맷 및 효과
- 리스트
- 테이블
- 사용자 인터페이스
2. CSS 스타일 시트 구성
예) <span> 텍스트를 20픽셀 blue로 출력하는 CSS3 스타일시트
- 셀렉터 : CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름이다.
- 프로퍼티 : 스타일 속성 이름. 약 200개 정도의 프로퍼티가 있다.
- 값 :프로퍼티의 값이다.
- 주석문 : 스타일 시트 내에 붙이는 설명문으로 /* ... */. 여러 줄, 아무 위치에나 사용 가능하다.
- 대소문자를 구분하지 않는다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{background-color: mistyrose;}
h3{color: coral;}
hr{border: 1px solid yellowgreen;}
span{color: teal; font-size: 20px;} /*style 주석문*/
</style>
</head>
<body>
<h3>CSS스타일 맛보기</h3>
<hr>
<p>나는 <span>웹프로그래밍</span>을 좋아합니다.</p>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
3. HTML 문서에 CSS3 스타일 시트 만드는 방법 3 가지
- <style></style> 태그에 스타일 시트 작성
- style 속성에 스타일 시트 작성
- 스타일 시트를 별도 파일로 작성(<link> 태그나 @import로 불러 사용)
* <style> 태그에 작성하기.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {background-color: darkslategrey;
color: floralwhite;
margin-left: 30px;
margin-right: 30px;}
h3 {text-align: center;
color: gray;}
</style>
</head>
<body>
<h3>손연재</h3>
<hr>
저는 체조 선수 손연재입니다. 음악을 들으면서
책읽기를 좋아합니다. 김치 찌개와 막국수 무척
좋아합니다.
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
* <style> 태그로 작성하고 <body>부분에 중첩해서 태그를 사용 할 수 있다.
이 경우 <body> 부분의 <style> 태그가 우선시된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{ color: lightslategrey; font-size: 15px;}
</style>
</head>
<body>
<h3>손흥민</h3>
<hr>
<p>오페라를 좋아하고</p>
<p>엘비스 프레슬리를 좋아하고</p>
<p style="color: teal;">김치부침개를 좋아하고</p>
<p style="color: steelblue; font-size: 20px;">축구를 좋아합니다.</p>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
4. style 시트를 별도 파일로 작성 (link 태그 이용)
* 별도의 css파일을 만들어 준다.
|
1
2
3
4
5
6
7
8
9
|
/*my style.css*/
body {background-color: linen;
color: salmon;
margin-left: 30px;
margin-right: 30px;
text-align: center;}
h3 {text-align: center;
color: seagreen;}
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
5. CSS 규칙
CSS3 스타일은 부모 태그로부터 상속된다.
- 부모 태그(부모 요소) :자신을 둘러싸는 태그
예)
- <p> 태그는 <em>의 부모 태그 이다.
- <em> 태그의 출력 : 글자 크기는 25px, 글자 색은 부모 <p> 태그를 상속받아 green이 된다.
'화면구현' 카테고리의 다른 글
| CSS3에서 색 표현하기, 텍스트 꾸미기, 폰트 (0) | 2020.03.05 |
|---|---|
| 셀렉터 (0) | 2020.03.05 |
| HTML 날짜 입력하기, (0) | 2020.03.05 |
| 텍스트 상자, datalist, 텍스트 버튼 만들기 (0) | 2020.03.04 |
| 검색창 만들기 (0) | 2020.03.04 |
rss