CSS 설명 및 셀렉터
CSS(Cascading Style Sheet)에 대해서
- 스타일을 정의해 주는 언어이다.
- HTML에 디자인적 요소를 추가해 준다
- 다양한 셀렉터를 만들어서 HTML요소에 선별적인 적용이 가능하다.
CSS에서의 주석
- css에서 주석은 /*로 시작해서 */로 끝난다
- 단일 행 또는 멀치 행 주석이 가능하다
| /* 단일 행 주석 */ /* 주석 행1 주석 행2 */ |
- 참고로 HTML에서의 주석 표기방법<!-- 주석-->과 비교해본다.
CSS 적용하기
1. Inline style: 개별 태그 안에서 정의하고 적용할 수 있다.
예)
<h2 style = "color:red;">~~</h2>
<= color 속성의 값 = red. 세미콜론으로 종료.
예)
<h2 style="color:red;font-weight:normal;>"~~<h2?\>
<= 한가지 이상의 속성을 정해 줄 수 있다. 세미콜론으로 구별
2. Embedded style:문서의 head 부분에 위치한<style>~~</style>태그 안에 CSS를 작성해서 적용할 수 있다.
예). 앞으로 다루게 되는 CSS셀렉터를 사용한다.
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
font-weigth: normal;
}
</style>
3. Exermal file: "css"를 확장자로 하는 텍스트 파일에 CSS를 저장해 놓고 불러서 사용할 수도 있다.
<head>
<link rel="stylesheet"type="text/css"href="파일경로/파일이름.css">
</head>
예). 파일 내용. 앞으로 다루게 되는 CSS셀렉터를 사용한다.
body {
background-color:lightblue;
}
h1 {
color:navy;
font-weight: normal;
}
CSS 설렉터에 대해서
- Univaersal selector: 모든 태그에 일괄적으로 적용.
예)
<style>
*{
padding:20px;
color:red;
</style>
- Element selector: 특정 유형의 태그에 적용
예) <h2>유형의 태그에 적용
<style>
h2{
color:red;
font-weight:normal;
}
</style>
- Class selector: 특정 클래스의 태그에 적용.
예) Class가 "my Class"인 모든 태그에 적용: 주의: 종류가 서로 다른 태그도 같은 class가 될 수 있다.
<style>
.myClass{
color:red;
}
</style>
-> 그리고, HTML에서는 다음과 같이 클래스를 정의할 수 있다.
- Element+Class selector: 태그의 유형과 클래스가 일치하는 경우 적용.
예) <h2>태그이면서 class가 "my Class"인 경우 적용.
<style>
h2.myClass {
color:red;
}
</style>
-> HTML에서는 다음과 같은 태그에 선별적으로 적용된다.
- ID selector: 아이디가 일치하는 태그에 적용(페이지에서 단 한 곳)
예). ID가 "my ID"인 단 한 곳에 적용.
<style>
# myID {
color:blue;
font-size:40px;
}
</style>
-> 그리고, HTML에서는 다음과 같이 태그의 id를 정의할 수 있다.
<h1 id = "my ID"> ~~~</h1>
- Element+ID selector: 태그인 유형과 ID가 일치하는 경우 적용.
예) <h2>태그이면서 id가 "my ID"가 일치하는 경우 적용.
<style>
h2#myID{
padding:30px;
}
</style>
-> HTML에서 다음과 같은 태그에 선별적으로 적용됨.
<h2 id = "my ID"> ~~~</h2>
- Group selector: 여러 유형의 태그에 동일하게 적용.
예) 모든 <h1>, <h2>, <p> 태그에 동일하게 적용.
<style>
h1, h2, p {
color:red;
font-weight:normal;
}
</style>
- Descender selector: 위계에 의한 선택적 적용. 상위 부터 하위로 좁혀가는 방법
예) <div> 아래에 있는 모든 <p> 태그에 동일하게 적용. 바로 아래에 있지 않아도 됨.
<style>
div p {
color:red;
font-weight:normal;
}
</style>
- Children selector: 위계에 의한 선택적 적용. 바로 아래 "자식"에게만 적용.
예) <div> 바로 아래에 있는 모든 <p> 태그에 동일하게 적용.
<style>
div > p {
color:red;
font-weight:normal;
}
</style>
- Attribute selector: 속성에 대한 조건이 맞으면 적용.
예) <a> 태그이면서 속성 target="_blank"인 경우 적용.
<style>
a[target="_blank"] {
color:green;
font-weight:normal;
}
</style>
- Active selector : link, active, hover, visited 등 태그의 상태에 따라서 적용. "Pseudo-class"라고도 불리운다.
예) <a> 태그이면서 마우스 포인터가 위에 있는 경우 적용.
<style>
a:hover{
color:red;
font-style: italic;
}
</style>
예제1)
<!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 정의. -->
<!--Element selector를 정의해 본다. -->
<style>
h1{
color: blue;
background-color: gray;
font-weight: bolder;
}
h2{
color: red;
background-color: yellow;
font-weight: lighter;
}
p{
color: green;
background-color: orange;
font-weight: normal;
}
div{
color: white;
background-color: red;
font-weight: normal;
}
ol{
color: white;
background-color: darkgreen;
font-weight: normal;
}
</style>
</head>
<!-- 여기까지가 헤드. -->
<body>
<h1> 헤더 1.1 </h1>
<h1> 헤더 1.2 </h1>
<h1> 헤더 1.3 </h1>
<h2> 헤더 1.1 </h2>
<h2> 헤더 1.2 </h2>
<h2> 헤더 1.3 </h2>
<p> Paragraph 1. </p>
<p> Paragraph 2. </p>
<p> Paragraph 3. </p>
<div>
<br>
<span> A Single line within a div tag. </span>
<br>
<p> Paragraph 4. </p>
<p> Paragraph 5. </p>
<p> Paragraph 6. </p>
<br>
</div>
<br>
<div>
<br>
다음은 ordered list이다:
<ol>
<li> 아이템 하나. </li>
<li> 아이템 둘. </li>
<li> 아이템 셋. </li>
<li> 아이템 넷. </li>
<li> 아이템 다섯. </li>
</ol>
<br>
</div>
</body>
<!-- 여기까지가 몸통. -->
</html>
예제2)
<!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>
<!-- style 정의. -->
<!-- Class selector와 ID Selector를 정의해 본다. -->
<style>
.myClass1{
color:blue;
background-color: gray;
font-weight: bolder;
}
.myClass2{
color:red;
background-color: yellow;
font-weight: lighter;
}
.myClass3{
color:green;
background-color: orange;
font-weight: normal;
}
div.myClass3{
color:white;
background-color: black;
font-weight: normal;
}
li.myClass3{
color:gray;
background-color: red;
font-weight: bolder;
}
#myID1{
color:yellow;
background-color: violet;
font-weight: bolder;
}
#myID2{
color:yellow;
background-color: blue;
font-weight: bolder;
}
</style>
</head>
<!-- 여기까지가 헤드. -->
<body>
<h1 class="myClass1">헤더 1.1 </h1>
<h1 class="myClass2">헤더 1.2 </h1>
<h1 class="myClass3">헤더 1.3 </h1>
<h2 class="myClass1">헤더 1.1 </h2>
<h2 class="myClass2">헤더 1.2 </h2>
<h2 class="myClass3">헤더 1.3 </h2>
<p class="myClass1"> Paragraph 1. </p>
<p class="myClass2" id="myID1"> Paragraph 2. </p>
<p class="myClass3"> Paragraph 3. </p>
<div class="myClass3">
<br>
<span> A Single line within a div tag. </span>
<br>
<p class="myClass1"> Paragraph 4. </p>
<p class="myClass2"> Paragraph 5. </p>
<p class="myClass3"> Paragraph 6. </p>
<br>
</div>
<br>
<div>
<br>
다음은 ordered list이다:
<ol>
<li class="myClass1"> 아이템 하나. </li>
<li class="myClass2"> 아이템 둘. </li>
<li class="myClass3" id="myID2"> 아이템 셋. </li>
<li class="myClass1"> 아이템 넷. </li>
<li class="myClass2"> 아이템 다섯. </li>
<li class="myClass3"> 아이템 여섯. </li>
</ol>
<br>
</div>
</body>
<!-- 여기까지가 몸통. -->
</html>
예제3)
<!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>
<!-- Style 정의. -->
<!-- 다양한 셀렉터를 정의해 본다. -->
<style>
#myOD1.myClass2{
color:red;
background-color: yellow;
font-weight:lighter;
}
h1, p{
padding: 10px;
}
/*
div li{
color:oranger;
}
*/
/* 작동하지 않음!
div > li {
color:red;
}
*/
ol > li {
color: navy;
font-weight: bold;
}
a[href="http://www.naver.com"]{
color:white;
background-color: yellow;
}
p:hover{
font-style:italic;
color: red;
}
a:hover{
font-style:italic;
color: green;
}
/*아직 방문하지 않은 링크*/
a:link{
font-style:normal;
color: blue;
}
/* 클리어 하려면 브라우저의 방문 기록을 삭제해야 한다 */
a:visited{
font-style: bold;
color: hotpink;
}
</style>
</head>
<!-- 여기까지가 헤드. -->
<body>
<h1 class="myClass1"> 헤더 1.1 </h1>
<h1 class="myClass2"> 헤더 1.2 </h1>
<h1 class="myClass3"> 헤더 1.3 </h1>
<h2 class="myClass1"> 헤더 1.1 </h2>
<h2 class="myClass2"> 헤더 1.2 </h2>
<h2 class="myClass3"> 헤더 1.3 </h2>
<p class="myClass1"> Paragraph 1. </p>
<p class="myClass2" id="myID1"> Paragraph 2. </p>
<p class="myClass3"> Paragraph 3.</p>
<div class="myClass3">
<br>
<span> A Sigle line within a div tag. </span>
<br>
<p class="myClass1"> Paragraph 4. </p>
<p class="myClass1"> Paragraph 5. </p>
<p class="myClass1"> Paragraph 6. </p>
<br>
</div>
<br>
<div>
<br>
다음은 ordered list이다:
<ol>
<li class="myClass1"> <a href="#1">아이템 하나. </a></li>
<li class="myClass2"> <a href="#2">아이템 둘. </a></li>
<li class="myClass3"> <a href="#3" id = "myID2">아이템 셋. </a></li>
<li class="myClass1"> <a href="#4">아이템 넷. </a></li>
<li class="myClass2"> <a href="http://www.naver.com">아이템 다셋. </a></li>
<li class="myClass3"> <a href="#5">아이템 여섯. </a></li>
</ol>
<br>
</div>
</body>
<!-- 여기까지가 몸통.-->
</html>