원더풀 프로젝트_CSS1
# CSS(Cascading Style Sheet)
- HTML 문서의 색이나 모양 등 외관을 꾸미는 언어.
- CSS로 작성된 코드를 스타일 시트(style sheet)라고 부름
- 기능
- 색상과 배경
- 텍스트
- 폰트
- 박스모델(Box Model)
- 비주얼 포맷 및 효과
- 리스트
- 테이블
- 사용자 인터페이스
* 기본 코드
<html>
<head><title>스타일을 가진 웹페이지</title>
<style>
body{background-color:mistyrose; color:brown;}
h3{color:purple;}
hr{border:5px solid yellowgreen;}
span{color:blue; font-size:20px;}
</style>
</head>
<body>
<h3>CSS 스타일 맛보기</h3>
<hr>
<p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</body>
</html>
- ex) <span> 텍스트를 20픽셀 blue로 출력하는 CSS3 스타일시트
span{color:blue; font-size:20px;}/*span 태그 스타일 선언*/
= 셀렉터 { 프로퍼티 : 값; 프로퍼티 : 값;}
- 셀렉터 : CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름
- 프로퍼티 : 스타일 속성 이름. 약 200개 정도의 프로퍼티 있음.
- 값 : 프로퍼티의 값
- 주석문 : 스타일 시트 내에 붙이는 설명문으로 /*...*/. 여러 줄, 아무 위치나 사용 가능.
- 대소문자 구분 없음.
body {background-color : mistyrose;}
BODY {BACKGROUND-COLOR : MISTYROSE}
* HTML 문서에 CSS3 스타일 시트 만들기
1. <style></style> 태그에 스타일 시트 작성
2. style 속성에 스타일 시트 작성
3. 스타일 시트를 별도 파일로 작성 ( <link> 태그나 @import로 불러 사용)
- <style> 태그에 스타일 시트 만들기
<head>
<style>
body{background-color:mistyrose; color:brown;}
h3{color:purple;}
</style>
<style>
hr{border:5px solid yellowgreen;}
span{color:blue; font-size:20px;}
</style>
</head>
- <style> 태그는 <head> 태그 내에서만 사용
- <style> 태그는 여러 번 작성 가능 : 스타일 시트들이 합쳐 사용
- <style> 태그에 작성된 스타일 시트는 웹 페이지 전체에 적용.
- ex)
<html>
<head><title><style>태그로 스타일 만들기</title>
<style>
body{background-color:linen; color:blueviolet; margin-left:50px; margin-right:50px;}
h3{text-align:center; color:darkred; margin-top:30px;}
</style></head>
<body>
<h3>소연재</h3><hr>
<p>저는 체조 선수 소연재입니다. 음악을 들으면서<br>
책읽기를 좋아합니다. 김치 찌개와 막국수를 무척<br>
좋아합니다.</p>
</body>
</html>
- style 속성에 스타일 시트 만들기
- HTML 태그의 style 속성에 CSS 스타일 시트 작성
<p style= "color:magenta; font-size: 30px">축구를 좋아합니다.
</p>
= <p 스타일 속성(style) = "이 태그에만 적용되는 CSS 스타일 시트(color, font-size..) "></p>
-> 해당 태그에만 스타일 적용.
- ex)
<html>
<head><title><style>속성에 스타일 만들기</title>
<style>
p{color:red;font-size:15px; margin-left:10px;/*모든 p태그에 적용*/}
</style>
</head>
<body>
<h3> 손 홍 민</h3><hr>
<p>오페라를 좋아하고</p>
<p>엘비스 프레슬리를 좋아하고</p>
<p style="color:blue;">김치부침개를 좋아하고</p>
<p style="color:magenta; font-size:30px;">축구를 좋아합니다.</p>
</body>
</html>
- 외부 스타일 시트 파일 불러오기
- CSS 파일에 스타일 시트 저장
- 웹 페이지에서 CSS 스타일 시트 파일을 불러 저장.
- 동일한 스타일 시트를 웹 페이지마다 중복 작성 해소
- 웹 사이트의 전체 웹 페이지 모양의 일관성 확보.
- CSS 스타일 시트 파일을 불러오는 방법 두 가지.
1. <link> 태그 이용(<head> 안에)
<head>
<link href="mystyle.css" type="text/css" rel="stylesheet">
</head>
2. @import 사용(<style> 안에)
<head>
<style>
@import url(mystyle.css);
/*@import url('mystyle.css'로 해도 됨*/
/*@import "mystyle.css";로 해도 됨*/
</style>
</head>
- ex)
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css"
</head>
<body>
<p>저는 체조 선수 소연재입니다.</p>
</body>
</html>
/*
body{
background-color:skyblue;}
p{text-align : center; color : darkred;}
*/
<html>
<head><title></title>
<style>
@import "test.css"
</style>
</head>
<body>
<p>저는 체조 선수 소연재입니다.</p>
</body>
</html>
/*
body{
background-color:skyblue;}
p{text-align : center; color : darkred;}
*/