CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다.
자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다.
CSS란? Cascading Sytle Sheets의 약자
HTML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다.
- 우리가 작성하는 스타일
- 사용자의 취향에 맞게 하는 스타일
- 브라우저 상에서 기본적으로 지정된 스타일
Selectors
- 전체를 선택하는 경우 *
- type을 선택하는 경우 Tag
- ID를 선택하는 경우 #id
- Class를 선택하는 경우 .class
- State를 사용하는 경우 :
- Attribute를 이용하는 경우 [ ]
CSS 설정 연습해 보기
- index.html
<!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" />
<link rel="stylesheet" href="index.css" />
<title>Document</title>
</head>
<body>
<ol>
<li id="special">First</li>
<li>Second</li>
</ol>
<button>Button 1</button>
<button>Button 2</button>
<div class="red"></div>
<div class="blue"></div>
<a href="naver.com">Naver</a>
<a href="google.naver.com">Google</a>
<a>Empty</a>
</body>
</html>
- index.css
* {
color: green;
}
li {
color: blue;
}
li#special {
color: pink;
}
.red {
width: 100px;
height: 100px;
padding: 20px;
margin: 20px;
border: 2px dashed red;
background-color: yellow;
}
button:hover {
color: red;
background: beige;
}
a[href='naver'] {
color: purple;
}
'Coding > HTML & CSS' 카테고리의 다른 글
| [클론 코딩] 유튜브 사이트 만들기 (0) | 2021.07.14 |
|---|---|
| [CSS] 반응형 CSS em과 rem (0) | 2021.07.13 |
| [CSS] 반응형 CSS 단위 정리 1 (0) | 2021.07.13 |
| [CSS] CSS 정리3 (Flexbox) (0) | 2021.07.11 |
| [CSS] CSS 정리 2 (display, position) (0) | 2021.07.11 |