- CSS (Cascading Style Sheets)
CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다.
스타일을 HTML 문서로부터 따로 분리하는 것이 가능해진다.
- CSS를 사용하는 이유
HTML만으로 웹 페이지를 제작할 경우 HTML 요소 세부 스타일 하나하나 따로 지정해 주어야 하기 때문에
매우 많은 시간이 걸리며, 완성된 후에도 스타일의 변경 및 유지보수가 매우 힘들어진다.
따라서 이 문제를 해결하기 위해서 W3C에서 만든 스타일 시트 언어가 바로 CSS이고, 웹 페이지의
스타일을 별도 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다.
- CSS 문법
선택자 {
속성명 : 속성값;
속성명 : 속성값;
...
}- CSS는 선택자와 선언부{ }로 구성된다.
- 선택자는 CSS를 적용하고자 하는 HTML 요소를 가리키고 선언부는 중괄호를 사용하여 전체를 둘러싼다.
- 각 선언은 CSS 속성명 : 속성값의 형태로 이루어져 있다.
- CSS 선언은 각 선언마다 마지막에 ;으로 마무리해준다.
- CSS 주석
/* 주석할 내용 */
- CSS 선택자
1. 전체 선택자
스타일을 모든 요소에 적용할 때 사용한다.
주로 모든 하위 요소에게 한꺼번에 스타일을 적용하고자 할 때 사용하고 전체 선택자는 * 기호를 사용한다.
* {
스타일 주기
}
2. 태그 선택자
특정 태그가 쓰인 모든 요소에 스타일을 적용한다.
태그명 {
스타일 주기
}
3. 클래스 선택자
클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다.
HTML에 존재하는 class 속성의 값으로 요소들을 선택해 온다.
같은 클래스 이름을 가지는 요소들을 모두 선택해주고 ". 클래스명"을 사용한다.
/* 클래스 부여 방법 */
<tr class = "p">
/* CSS 에서 사용방법*/
.클래스명 {
스타일 주기
}
전체, 태그, 클래스 선택자 사용해 보기!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1_전체선택자</title>
</head>
<style>
* {
color: red;
}
</style>
<body>
<h1>전체 선택자</h1>
<h2>전체 선택자의 기호 : *</h2>
<p>전체 선택자는 *기호를 사용한다.</p>
<div>
전체 적용 시작!
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2_태그선택자</title>
</head>
<style>
ul {
color: deeppink;
background-color: deepskyblue;
list-style-type: square; /*리스트 앞에 네모 모양의 구분점*/
}
</style>
<body>
<ul>
<li>김사과</li>
<li>반하나</li>
<li>이체리</li>
<li>차두리</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3_클래스선택자</title>
</head>
<style>
.blue {
color : blue;
}
/*선택자1선택자2 : 선택자1이면서 선택자 2 인거를 의미한다.*/
p.blue {
letter-spacing: 5px;
}
/*선택자1 선택자2 : 선택자 1 안에 있는 선택자2 인것을 의미한다. */
/* 여기서는 p태그 안에 red 클래스*/
p .red{
color: red;
}
.big {
font-size: 2em;
}
</style>
<body>
<h2 class = "blue">특정부분에 스타일 적용하기</h2>
<p class="blue"> 태그 선택자를 지정하면 그 태그가 사용된 요소에 스타일이 적용된다. </p>
<p>
같은 태그라도 다른 스타일을 적용하고 싶다면 어떻게 해야할까 <br>
또 다른 태그여도 같은 스타일을 적용하고 싶다면 어떻게 해야할까
<span class="red">특정부분</span>에만 스타일을 지정하고 싶다면 클래스 선택자를 사용한다.<br>
<!--클래스는 띄어쓰기로 구분하여 여러개 부여할 수 있다. -->
<strong class="blue big">클래스 이름은 나중에 기억하기 쉬운이름을 임의로 지정하면 된다.</strong>
</p>
<span class="red">여기는 스타일 적용을 안할예정이다.</span>
</body>
</html>
'WEB > HTML,CSS' 카테고리의 다른 글
| DAY 12 : 상속, 폰트, 배경 (0) | 2022.01.25 |
|---|---|
| DAY 11 : 선택자, 우선순위 ,.. (0) | 2022.01.22 |
| DAY 09 : progress, 시맨틱 태그 (0) | 2022.01.20 |
| DAY 08 : iframe, form 태그, input 태그 (0) | 2022.01.19 |
| DAY 07 : colgroup, 페이지 책갈피, 요소 (0) | 2022.01.17 |