<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>HTML5 BASIC PAGE</title>
<style>
.select{ color:red; }
input[type="text"] {background:red;}
input[type="password"] {background:blue;}
</style>
</head>
<body>
<ul>
<li class="select">사과</li>
<li>바나나</li>
<li class="select">오렌지</li>
<li>감</li>
</ul>
<form>
아이디<input type="text" />
비밀번호<input type="password" />
</form>
</body>
</html>
클래스 선택자
li 다음 class를 적고 이름을 적어줍니다.
.이름을 적어주고 css를 원하는대로 하면 적용됩니다.
예) class이름은 select입니다.
.select의 색상이 빨강이므로 select가 들어간곳은 빨강으로 처리됩니다.
속성 선택자
input[type="text"] 다음 background가 빨강이므로 네모칸 안의 색상은 빨간색이다.
input[type="password"] 다음 background가 파랑이므로 네모칸 안의 색상은 파란색이다.
글씨색상변경도 똑같이 background처럼 지정해주면 변경된다.
'프로그래밍 > HTML5' 카테고리의 다른 글
| 자손 선택자 (0) | 2017.09.20 |
|---|---|
| 후손 선택자 (0) | 2017.09.20 |
| 아이디 선택자 및 padding, margin (0) | 2017.09.20 |
| 선택자 태그 (0) | 2017.09.20 |
| css전체 선택자 태그 (0) | 2017.09.20 |
