반응형
1. 속성은 ~값이다.
width: 200px;
너비가 200px이다.
2. CSS 선언 방식
- 내장 방식
- <style></style>의 내용(Contents)으로 스타일을 작성하는 방식
- 링크 방식
- <link />로 외부 css 문서를 가져와서 연결하는 방식
- 인라인 방식
- 요소의 style 속성에 직접 스타일을 작성하는 방식
- 선택자 없음
- @import 방식
3. import 방식에서 막혀서 못함. 다시 해보자.
4. 속도가 빨라서 그냥 따라가는 중. 다시 해결함 ;을 붙여주지 않아서 오류가 났음.
5. css 연습
<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>
<link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" rel="stylesheet">
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>
<ul>
<ul>사과</ul>
<ul>딸기</ul>
<ul>배</ul>
</ul>
<div>당근</div>
<p>토마토</p>
<span>오렌지</span>
</div>
</body>
</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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" rel="stylesheet">
<style>
li {
color: red;
}
</style>
</head>
<body>
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li>배</li>
</ul>
<div>당근</div>
<p>토마토</p>
<span>오렌지</span>
</div>
</body>
</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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" rel="stylesheet">
<style>
.orange{
color: rgb(26, 101, 199);
}
</style>
</head>
<body>
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li>배</li>
</ul>
<div>당근</div>
<p>토마토</p>
<span class = "orange">오렌지</span>
</div>
</body>
</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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" rel="stylesheet">
<style>
#orange {
color: brown;
}
</style>
</head>
<body>
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li id="orange" class="orange">오렌지</li>
</ul>
<div>당근</div>
<p>토마토</p>
<span class = "orange">오렌지</span>
</div>
</body>
</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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" rel="stylesheet">
<style>
span.orange {
color:blueviolet;
}
</style>
</head>
<body>
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li class="orange">오렌지</li>
</ul>
<div>당근</div>
<p>토마토</p>
<span class="orange">오렌지</span>
</div>
</body>
</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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" rel="stylesheet">
<style>
ul>.orange {
color: blue;
}
</style>
</head>
<body>
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li class="orange">오렌지</li>
</ul>
<div>당근</div>
<p>토마토</p>
<span class="orange">오렌지</span>
</div>
</body>
</html>
반응형
'CSS' 카테고리의 다른 글
| css 연습 (0) | 2023.03.29 |
|---|---|
| CSS 박스 모델 연습 (0) | 2023.03.28 |
| CSS 기본 문법 ② (0) | 2023.03.27 |
| CSS 복습 (0) | 2023.03.24 |
| CSS 실습 (0) | 2023.03.21 |
