![[2021/12/17]국비지원 CSS3 1-(2) 표시 우선순위](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FF6HCm%2Fbtrr2XQIVpI%2FAAAAAAAAAAAAAAAAAAAAAKqTq_CCu6YHkgqA3i2NRyRdFpa4rO-_6zj9rTFbL1nc%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DC%252FzEe7qxChasB%252Fhl5HRt3Fu1GoE%253D)
CSS3
무엇도 설정하지 않은 단순 element, type : 우선순위 1점
class : 우선순위 10점
id : 우선순위 100점
style="" : inline 스타일로 따로 지정한 경우 우선순위 1000점
중괄호 { } 안에 항상 ; 필수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document<title>
<style type="text/css">
p{color: red;}
/* Element 요소선택자, type 선택자: 우선순위1점*/
.green{color: green;}
/* class 선택자 : 우선순위 10점 */
#blue{color: blue;}
/* id 선택자 : 우선순위 100점 */
/* style="" 인라인 스타일 : 우선순위 1000점 */
</style>
</head>
<body>
<h1 class="green">css 디자인 표현</h1>
<p class="green">css는 기본적으로 선택자, 속성, 값을 가진다.</p>
<p id="blue">내부 스타일시트, 외부 스타일시트, 인라인 스타일, 태그에 직접 삽입하기</p>
<p style="color: yellow;">선택자에는 스타일 적용대상 지정하고 {} 안에 적용할 스타일을 넣는다<br>
스타일은 속성을 기록하고 :로 구분한 후 값 입력한다<br>
값을 기록한 뒤에 ;로 마무리 하고 추가로 다른 속성과 값을 계속 넣을 수 있다</p>
</body>
</html>
▶ CSS3, javascript 등 다른 언어의 텍스트 양이 얼마 되지 않을 때는 html과 같은 창에 입력해도 괜찮음
결과물
