www.tutorialrepublic.com/css-tutorial/
CSS3 Tutorial - An Ultimate Guide for Beginners
CSS Tutorial CSS is the key presentational technology that is used in website design. CSS stands for Cascading Style Sheets. CSS is a standard style sheet language used for describing the presentation (i.e. the layout and formatting) of the web pages. Prio
www.tutorialrepublic.com
1. CSS를 HTML에 포함시키는 방법
-
인라인 스타일
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>- 포함된 스타일 시트
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>- 외부 스타일 시트
/* stlye.css */
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}
2. CSS Selector
- CSS property와 value는 대소문자를 구분하지 않지만 선택자는 대소문자를 구분한다.
- CSS 선택자란 웹 페이지의 요소와 일치하는 패턴.
2.1Univalsal Selector
- (*)로 표시된 범용 선택자는 모든 요소와 일치.- (*) 선택자 내부의 스타일 규칙은 문서의 모든 요소에 적용된다.
* {
margin: 0;
padding: 0;
}
2.2 Element Type Slector
- 문서에 있는 요소의 모든 인스턴스를 해당 요소 유형 이름과 일치시킨다
- 아래의 예에서는 <p>은 문서 트리에서 위치에 관계없이 문서의 모든 요소에 파란색으로 적용된다.
p {
color: blue;
}
2.3 ID Selector
- (#) 바로 뒤에 오는 id 값을 통해 문서 내 id에 해당되는요소의 스타일 규칙을 정한다.
#error {
color: red;
}
2.4 Class Selector
- Class 속성이 있는 HTML 요소를 선택하는 데 사용할 수 있다.
- 마침표(.) 바로 뒤에 클래스 명으로 정의된다.
.className {
color: blue;
}- 위 Class 선택자는 좀 더 구체적으로 코드를 작성할 수 있다.
- 아래의 예는 className='blue'로 설정된 <p>에 대해서만 스타일 규칙을 적용한다.
- <p>가 아닌 다른 className='blue'에는 영향을 주지않는다.
p.blue {
color: blue;
}
2.5 Descendant Selector (하위 선택자)
- 모든 Anchor 요소를 대상으로 지정하지 않거나 다른 요소의 하위 요소를 선택하야 하는 경우 아래와 같이 사용할 수 있다.
- 아래의 예 중 h1 em 의 경우 <h1> 내에 있는 <em>에 대해서만 스타일이 적용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Descendant Selectors</title>
<style>
h1 em {
color: green;
}
ul.menu {
padding: 0;
list-style: none;
}
ul.menu li{
display: inline;
}
ul.menu li a {
margin: 10px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>This is a <em>heading</em></h1>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
2.6 Child Selector
- (>)를 사용해서 일부 요소의 하위 요소만을 선택할 수 있다.
ul > li {
list-style: square;
}
ul > li ol {
list-style: none;
}
2.7 Adjacent Sibling Selector (인접 형제 선택자)
- 형제 요소(동일한 수준의 요소)를 선택할 때 (+)를 이용해 사용한다.
- 아래의 예에서 ul.task + p는 ul과 동일 수준의 바로 옆 <p> 하나에만 적용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Adjacent Sibling Selectors</title>
<style>
h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: Red;
text-indent: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ul class="task">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<p>This is one more paragraph.</p>
<p>This is also a paragraph.</p>
</body>
</html>
2.8General Sibling Selector (일반 형제 선택자)
- (~)를 사용해 사용하며 인접 형제 선택자와 유사하지만 덜 엄격하다.
- 인접 형제 선택자와는 달리 같은 부모를 공유하는 모든 요소에 대해 스타일 규칙을 적용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS General Sibling Selectors</title>
<style>
h1 ~ p {
color: blue;
font-size: 18px;
}
ul.task ~ p {
color: #f0f;
text-indent: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ul class="task">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<p>This is one more paragraph.</p>
<p>This is also a paragraph.</p>
</body>
</html>
3. Grouping Selector
- 스타일 시트의 여러 선택자들은 동일한 스타일 규칙 선언을 공유하는 경우가 많다.
- 스타일 시트 코드를 최소화하기 위해 쉼표로 구분 된 목록으로 그룹화할 수 있다.
- 또한, 동일한 스타일 규칙을 반복해서 사용하는 것을 방지할 수 있다.
| 그룹화 X (Before) |  |
| 그룹화 O (After) |
 |
'Language > CSS' 카테고리의 다른 글
| [CSS] CSS 링크 (0) | 2021.02.03 |
|---|---|
| [CSS] CSS 텍스트 (0) | 2021.02.03 |
| [CSS] CSS 글꼴 (0) | 2021.02.03 |
| [CSS] CSS 배경 (0) | 2021.02.03 |
| [CSS] CSS 색상 (0) | 2021.02.03 |