CSS
Cascading Style Sheet
HTML 문서의 스타일을 꾸밀 떄 사용하는 스타일시트 언어
head 안에 작성, body X
<!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>Document</title>
/* --------------------------------------------------------------- */
<style>
/* 스타일은 설정을 잡아주는 것, head태그 안에 작성
html과 다른 언어이기 때문에 style이라는 태그 내에서만 작성 */
/*
디자인 할거다
- 무엇을? "선택자 (Selector)"
- 어떻게? "선언"
*/
h1 { /* 선택자 */
color: darkgray; /* 선언 */
background-color: aqua;
}
h2 {
font-family: '나눔고딕', '궁서체';
/* font-family 글꼴의 집합
없다면 뒤에있는 폰트로 */
font-size: 50px;
/* 글꼴 크기 조절 */
font-weight: bold;
/* 글꼴 두께 조절 */
font-style: italic;
/* 글꼴 기울기같은 스타일 */
}
body {
background-color: rgb(184, 168, 31);
}
</style>
</head>
<body>
</body>
</html>
선택자
<head>
<style>
/* 선택자의 종류
1. 전체 선택자 : * (Asterisk)
- 모든 요소 선택
*/
* {
color: chocolate;
}
/*
2. 태그 선택자 : 태그이름 */
h1 {
background-color: blanchedalmond;
}
/* 선택자들을 구분해서 지정해줘야 하는 경우
클래스/ 아이디 사용
클래스 -> 중복 가능
아이디 -> 중복 불가 */
/*
3. 클래스 선택자 : .클래스명 */
.info {
color: black;
}
/*
4. 아이디 선택자 : #아이디이름 */
#title {
color: rgb(155, 155, 105);
}
</style>
</head>
<body>
<h1 id="title">오늘점심은</h1>
<h1>엄마주방</h1>
<p class="info">손님이없던데</p>
<p class="info">과연맛있을까</p>
<p>걱정된다</p>
</body>* id 중복정의하면 웹 표준 오류테스트에서 오류남!!
계층 선택자
<head>
<style>
/* 계층 선택자 */
/* 1. 자손 선택자 : 기호 (띄어쓰기) */
div span {
color: tomato;
}
div li {
color: blue;
}
/* 2. 자식 선택자 : 기호 (>) */
ol > span {
color: hotpink;
}
/* 3. 인접형제 선택자 : 기호 (+) */
li + li {
color: green;
}
/* 4. 일반형제 선택자 : 기호 (~) */
li ~ li {
color: lime;
}
/* li태그중에서 rule 클래스만 바꾸기 */
li.rule {
color: red;
}
/* 5. 그룹 선택자 : 기호 (,) */
li, span {
color: coral;
}
/* 가중치 낮아서 안바뀜 */
/* 6. 반응 선택자 */
strong:hover { /* 마우스 올렸을때 */
background-color: yellowgreen;
}
span:active { /* 클릭 했을때 */
background-color: blueviolet;
}
</style>
</head>
<body>
<div>
<strong>우리반 규칙</strong>
<ol>
<li >지각하지 않기</li>
<li >결석하지 않기</li>
<span >불가피할땐 미리 연락하기!</span>
<li >복습 꼭 하기</li>
<li class="rule">클래스 테스트1</li>
<li class="rule">클래스 테스트2</li>
</ol>
</div>
</body>
'학습 기록 > HTML, CSS' 카테고리의 다른 글
| CSS TIP 모음 (0) | 2023.11.21 |
|---|---|
| 23.06.03 / HTML / 이미지, 테이블, 입력양식 (0) | 2023.06.03 |
| 23.06.02 / HTML / 제목, 본문, 리스트, a태그 (0) | 2023.06.02 |