1. CSS3(Cascading Style Sheets 3)
- HTML5와 함께 웹 표준의 하나로 미리 약속된 스타일 속성을 통해 레이아웃과 스타일을 정의한다.
- 문서 내용과 스타일을 분리하여 내용을 수정해도 디자인을 바꿀 필요가 없고 디자인을 수정해도 글 내용을 바꿀 필요가 없다.
선택자 {
스타일 속성: 속성 값;
스타일 속성: 속성 값;
...
}
2. 스타일 시트
- 웹 문서에서 안에서 사용되는 스타일들을 모아 놓은 것을 스타일 시트라고 한다.
2.1. 내부 스타일 시트
- 웹 문서 안에서 사용할 스타일을 <style> 태그 내부에 작성하는 방법이다.
- 이때 <style> 태그는 <head> 태그 안에서 작성해야 한다.
<head>
<style>
/* p 태그를 선택하여 텍스트를 중앙에 정렬하는 스타일 */
p {
text-align: center;
}
</style>
</head>
2.2. 외부 스타일 시트
- 스타일을 별도의 파일에 작성해 놓는 방법이다. (파일 확장자는 css이다.)
- 웹 문서에서 필요할 때마다 <link> 태그를 이용하여 외부 스타일 시트를 가져와서 사용할 수 있다.
- 이때 <link> 태그는 <head> 태그 안에서 작성해야 한다.
<head>
<link href="css 파일 경로" rel="stylesheet" type="text/css">
</head>
2.3. 인라인 스타일
- 간단한 스타일의 경우 스타일 시트를 사용하지 않고 태그 내부에 직접 스타일을 지정하는 방법이다.
<p style="text-align: center;">
선택자(Selector)
1. 선택자
- 선택자는 스타일을 어느 요소에 적용할 것 인지를 나타낸다.
- 선택자는 요소 하나가 될 수도 있지만 여러 개의 요소를 묶어서 선택자로 지정할 수 있다.
1.1 전체 선택자
- HTML 문서 안의 모든 요소를 선택할 때 전체 선택자를 사용한다.
* {
스타일 속성: 값;
스타일 속성: 값;
...
}
1.2 태그 선택자
- HTML 문서 내에 같은 태그의 요소를 선택할 때 사용한다.
태그명 {
스타일 속성: 값;
스타일 속성: 값;
...
}
1.3 아이디 선택자
- HTML 문서 내에 해당하는 아이디의 속성값을 가진 요소만 선택할 때 사용한다.
#아이디 {
스타일 속성: 값;
스타일 속성: 값;
...
}
1.4 클래스 선택자
- HTML 문서 내에 해당하는 클래스의 속성값을 가진 요소만 선택할 때 사용한다.
.클래스 {
스타일 속성: 값;
스타일 속성: 값;
...
}
1.5 속성 선택자
- 선택자 뒤에 []를 사용하여 속성을 적고 해당 속성을 가진 요소만 선택할 때 사용한다.
선택자[속성] {
스타일 속성: 값;
스타일 속성: 값;
...
}
- 등호(=)를 사용하여 속성과 속성값이 일치하는 요소를 찾아 선택할 수 있다.
선택자[속성=값] {
스타일 속성: 값;
스타일 속성: 값;
...
}
- 틸트(~)와 등호(=)를 함께 사용하여 여러 속성값 중에 지정한 값이 포함되어 있는 요소를 선택할 수 있다. (띄어쓰기로 구분)
선택자[속성~=값] {
스타일 속성: 값;
스타일 속성: 값;
...
}
- 버티컬 바(|)와 등호(=)를 함께 사용하여 여러 속성값 중에 지정한 값이 포함되어 있는 요소를 선택할 수 있다.
- 이때 속성값으로 지정한 값이거나 "속성값-"으로 시작하는 요소에 스타일이 적용된다.
선택자[속성|=값] {
스타일 속성: 값;
스타일 속성: 값;
...
}
- 캐럿(^)과 등호(=)를 함께 사용하여 속성값이 지정한 값으로 시작하는 요소를 선택할 수 있다.
선택자[속성^=값] {
스타일 속성: 값;
스타일 속성: 값;
...
}
- 달러($)와 등호(=)를 함께 사용하여 속성값이 지정한 값으로 끝나는 요소를 선택할 수 있다.
선택자[속성$=값] {
스타일 속성: 값;
스타일 속성: 값;
...
}
- 아스테리스크(*)와 등호(=)를 함께 사용하여 속성값에 지정한 값을 포함하는 요소를 선택할 수 있다.
선택자[속성*=값] {
스타일 속성: 값;
스타일 속성: 값;
...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 선택자 2</title>
<!--
외부 스타일 시트
스타일만 따로 관리하는 .css확장자를 가지는 외부 문서생성 후 <limk>태그를 통해서 연결하는 방법
-->
<link href="./02CSS선택자2.css" rel="stylesheet">
</head>
<body>
<h1>CSS 선택자 2</h1>
<h2>5. 속성 선택자</h2>
<p>
선택자 뒤에 대괄호[]를 써서 요소 선택 시 사용
</p>
<pre>
선택자[속성=값] {
스타일 속성 : 값;
스타일 속성 : 값;
...
}
</pre>
<div class="div-class" name="name1">div1</div>
<div class="div-class" name="name2">div2</div>
<div class="div-class" name="name3 name1">div3</div>
<div class="class-div" name="name4">div4</div>
</body>
</html>
/* * {
color: royalblue;
font-weight: bolder;
fo
} */
/*
div 중 name 속성을 지닌 태그 선택
*/
/* div[name] {
background-color: darkcyan;
} */
/*
div 중에 name 속성값이 name1과 일치하는 태그 선택
*/
div[name=name1] {
background-color: cornflowerblue;
}
/* div 중에 name 속성 안에 name1이 포함되어 있는 태그 선택 */
div[name~=name1] {
background-color: rgb(90, 171, 247);
}
/* div 중에 class 속성에서 class로 시작되는 태그 선택 (단, -로 구분) */
div[class|=class] {
background-color: rgb(116, 214, 181);
}
/*div 중에 name속성이 name으로 시작되는 태그 선택*/
div[class^=div] {
background-color: rgb(107, 124, 128);
}
/* div중에 name 속성이 2로 끝나는 태그 선택*/
div[name$="2"] {
color: rgb(228, 115, 121);
font: bold;
}
/* div 중에 class 속성에 i를 포함하는 태그 선택 */
div[class*=i] {
background-color: rgba(42, 169, 179, 0.308);
color: violet;
font-size: x-large;
}
/* class속성의 값이 div-class인 것 중에 name 속성값에
name3이 포함되어 있는 태그 선택(단, 속성값이 띄어쓰기로 구분) */
.div-class[name~=name3] {
background-color: rgb(253, 202, 251);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS선택자1</title>
<!--
내부 스타일 시트
현재 문서에 스타일 태그를 선언하고 스타일 정보를 저장하는 방법
-->
<style>
/*CSS주석*/
/* 전체 선택자 */
* {
color: rgb(178, 48, 225);
}
/* 태그 선택자 */
p {
color: rgb(104, 149, 127);
text-decoration: underline;
}
/* 아이디 선택자 */
#id1 {
background-color: rgb(188, 237, 140);
color: rgb(227, 32, 32);
}
#id3 {
background-color: rgb(139, 202, 181);
color: rgb(227, 32, 32);
}
/* 클래스 선택자 */
.class1 {
background-color: rgba(114, 147, 115, 0.55);
color: antiquewhite;
}
.class2{
background-color: rgba(252, 71, 255, 0.193);
color: chocolate;
}
.test {
font-size:30px;
}
</style>
</head>
<body>
<h1>CSS 선택자 1</h1>
<p>
선택자란?<br>
특정 HTML 요소를 선택할 때 사용하는 기능으로,
요소를 선택해 원하는 스타일과 기능을 적용할 수 있다.
</p>
<h2>1. 전체 선택자 (*)</h2>
<p>
HTML 문서 안의 모든 태그를 선택할 때 전체 선택자를 사용한다.
</p>
<pre>
* {
스타일 속성: 값;
스타일 속성: 값;
...
}
</pre>
<h2>2. 태그 선택자(태그명)</h2>
<p>
HTML 문서 내부에 같은 태그를 모두 선택 시 사용
</p>
<pre>
태그명 {
스타일 속성: 값;
스타일 속성: 값;
...
}
</pre>
<h2>3. 아이디 선택자 (#아이디)</h2>
<p>
HTML 문서 내부에 해당하는 아이디 속성값을 가진 태그만 선택할 때 사용
</p>
<pre>
#아이디 {
스타일 속성: 값;
스타일 속성: 값;
...
}
</pre>
<!-- ol>li#id$*4 -->
<ol>
<li id="id1">아이디 선택자 테스트1</li>
<li id="id2">아이디 선택자 테스트2</li>
<li id="id3">아이디 선택자 테스트3</li>
<li id="id4">아이디 선택자 테스트4</li>
</ol>
<h4>4. 클래스 선택자(.클래스)</h4>
<p>
HTML 문서 내부에 해당하는 클래스 속성값을 가진 태그들을 선택할 때 사용
</p>
<ul>
<li class="class1">클래스 선택자 테스트1</li>
<li class="class2 test">라떼는 돌체라떼</li>
<li class="class1 test">클래스 선택자 테스트3</li>
<li class="class2">클래스 선택자 테스트4</li>
<li class="class1">클래스 선택자 테스트5</li>
</ul>
</body>
</html>