1. CSS3 소개와 구조
[1] CSS3(Cascading Style Sheet) 소개
: HTMl 문서의 색이나 모양 등 외관을 꾸미는 언어로, CSS로 작성된 코드를 '스타일 시트' 라고 부른다.
1) CSS3의 기능
- 색상과 배경
- 텍스트
- 폰트
- 박스 모델(Box Model)
- 비주얼 포맷 및 효과
- 리스트
- 테이블
- 사용자 인터페이스
2) html 파일 내에서의 CSS 구조
2. CSS selector
[1] CSS Syntax and Selectors
1) CSS Syntax
- selector는 HTML element를 사용
- property에 값을 지정할 때는
콜론(:)을 사용 - 여러 개의 property를 사용할 때, 중간에
세미콜론(;)을 사용
2) CSS Selectors
: 스타일을 적용하기 위한 영역(태그) 선택
[2] CSS selectors
: 스타일을 적용하기 위한 영역(태그) 선택
1) html tag
: html 태그명을 사용
2)id
: html tag에 id를 부여하여 사용하며, '#'을 사용하여 css 접근
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>이 단락은 스타일이 적용되지 않음</p>
</body>
</html>
3) class
: html tag에 class를 부여하여 사용하며, '.'을 사용하여 css 접근
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>스타일 미 적용 제목</h1>
<h1 class="center">빨간색, 가운데 정열 제목</h1>
<p>
스타일 미 적용 단락</p>
<p class="center">
빨간색, 가운데 정열 단락</p>
</body>
</html>
4) 여러 개의 Tag에 스타일을 적용하는 방법
: grouping
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
[3] Selector 조합하기
1) 2개 이상의 셀렉터 조합
: 조합에 적합한 HTML 태그에만 적용
2) 자식 셀렉터
: 부모 자식 관계인 두 셀렉터를 '>' 기호로 조합
3) 자손 셀렉터
: 자손 관계인 2개 이상의 태그 나열
4) 전체 셀렉터
: 와일드 문자 (*)를 사용하여 모든 태그에 적용 시키는 셀렉터
5) 속성 셀렉터
: HTML 태그의 특정 속성 (attribute)에 대해 값이 일치하는 태그에만 스타일을 적용하는 셀렉터
6) 가상 클래스 (pseudo-class) 셀렉터
: 어떤 조건이나 상황에서 스타일을 적용하도록 만든 셀렉터
[4] selector 활용 예시
<!DOCTYPE html>
<html>
<head>
<title>셀렉터 만들기</title>
<style>
h3,
li {
/* 태그 이름 셀렉터 */
color: brown;
}
div > div > strong {
/* 자식 셀렉터 */
background: yellow;
}
ul strong {
/* 자손 셀렉터 */
color: dodgerblue;
}
.warning {
/* class 셀렉터 */
color: red;
}
body.main {
/* class 셀렉터 */
background: aliceblue;
}
#list {
/* id 셀렉터 */
background: mistyrose;
}
#list span {
/* 자손 셀렉터 */
color: forestgreen;
}
h3:first-letter {
/* 가상 클래스 셀렉터 */
color: red;
}
li:hover {
/* 가상 클래스 셀렉터 */
background: yellowgreen;
}
</style>
</head>
<body class="main">
<h3>Web Programming</h3>
<hr>
<div>
<div>2학기
<strong>학습 내용</strong>입니다.
</div>
<ul id="list">
<li>
<span>HTML5</span></li>
<li>
<strong>CSS</strong>
</li>
<li>JAVASCRIPT</li>
</ul>
<div class="warning">60점 이하는 F</div>
</div>
</body>
</html>
3. CSS 작성법
[1] CSS comments (주석)
/* 내용 */ 의 형태로 작성한다.
- 주의 : html 주석과 css 주석을 작성하는 방법은 다르다!
[2] CSS 작성 방법 3가지
1) Internal Style Sheet
: html 태그 내에서 head 태그 내의 style 태그에 작성하는 방법
<html>
<head>
<style>
body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>2) Inline Styles
: 태그 내부의 style 속성에 지정하는 방법
<html>
<head></head>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<h1> non style heading</h1>
<p style="background-color:linen;"> This is a paragraph </p>
</body>
</html>3) External style sheet
(1) html 코드
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- link or style(3가지 중 하나)-->
<style>
@import url(mystyle.css);
@import url('mystyle.css');
@import "mystyle.css";
</style>
</head>
<body>
<h1 style="color:blue"> This is a paragraph. </h1>
</body>
</html>(2) css 코드
/* mystyle.css 의 내용 */
body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px; }(3) External style sheet tag
[3] External style sheet 예제
- External_style_sheet_example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> ExCSS </title>
<link type="text/css" rel="stylesheet" href="./External_style_sheet_example.css">
</head>
<body>
<h1> 앱프로그래밍 css에 오신것을 환영 합니다. </h1>
<h2> 외부 css 적용법을 확인하세요. </h2>
<p> 한동대학교 앱프로그래밍 수업에서 수업을 듣고 있습니다 </p>
</html>- External_style_sheet_example.css
h1,
h2 {
font-family: sans=serif;
color: gray;
}
h1 {
border-bottom: 1 px solid black;
}
p {
color: maroon;
}
안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com