반응형
● Selector(선택자)
★ 기본 선택자
☆ * : 전체 선택자. 모든 요소를 선택. 모든 요소에 적용 .(html, body 포함)
☆ 태그(타입) : 지정 태그 요소를 선택.
☆ . : 클래스 선택자. 지정한 클래스 요소를 선택.
☆ # : id 선택자. 지정한 id 요소를 선택.(id 속성)
☆ [속성] : 속성 선택자. 지정한 속성 또는 '속성=값'으로 요소를 선택.
★ universal_selector.html ★
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전체 선택자</title>
<style type="text/css">
* {
color: blue;
background-color: yellow;
font-size: 20px;
border: 1px solid red;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<h1>전체 선택자</h1>
<h2>영어로 Universal Selector.</h2>
<h3>모두 같은 색상, 같은 크기</h3>
<p>문서의 모든 요소를 선택하여 스타일을 적용</p>
</body>
</html>★ type_selector.html ★
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>타입 선택자</title>
<style type="text/css">
h1 {
background-color: yellow;
}
h2 {
background-color: green;
}
h3 {
background-color: pink;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Type Selector(h1)</h1>
<h2>Type Selector(h2)</h2>
<h3>Type Selector(h3)</h3>
<p>Type Selector(p)</p>
<h3>Type Selector(h3)</h3>
<p>Type Selector6(p)</p>
<h1>Type Selector(h1)</h1>
</body>
</html>★ class_id_selector.html ★
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클래스 아이디 선택자</title>
<style type="text/css">
.c1 {
color: blue;
}
.c2 {
color: red;
}
/* type selector와 class selector 결합 */
h1.c2 {
background-color: pink;
}
#id1 {
background-color: hotpink;
}
#id2 {
background-color: gold;
}
#id3 {
color: green;
font-size: 20px;
}
/* type selector와 class selector 결합 */
h2#id2 {
color: white;
}
.c3 {
border-bottom: 2px dashed red;
}
.c4 {
background-color: #FFE08C;
}
</style>
</head>
<body>
<h1>클래스 선택자</h1>
<h1 class="c1">Type Selector(c1-h1)</h1>
<h2 class="c1">Type Selector(c1-h2)</h2>
<h3 class="c1">Type Selector(c1-h3)</h3>
<p class="c1">Type Selector(c1-p)</p>
<h3 class="c2">Type Selector(c2-h3)</h3>
<p class="c2">Type Selector6(c2-p)</p>
<h1 class="c2">Type Selector(c2-h1)</h1>
<hr>
<!-- id는 중복으로 사용하면 안된다. -->
<h1>아이디 선택자</h1>
<h1 id="id1" class="c1">Type Selector(id1-c1-h1)</h1>
<h2 id="id2">Type Selector(id2-h2)</h2>
<p id="id3">Type Selector(id3-p)</p>
<hr>
<!-- 클래스를 여러개 설정할 수 있다. -->
<h3 class="c3 c4 c1">다중 클래스 지정</h3>
<p>class 속성에 여러 클래스를 지정하여 복합적인 스타일을 지정할 수 있다.</p>
</body>
</html>★ attr_selector.html ★
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<!--[type] type전체를 적용할수도 있음.-->
<style type="text/css">
[type="text"], [type="password"] {
background-color: gray;
color: white;
}
input::placeholder {
color: white;
}
[text] {
background-color: gold;
}
[text="red"] {
color: red;
}
[href="http://naver.com"] {
border: 1px solid blue;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>회원 가입</legend>
<a>아이디:</a><input type="text" name="id" placeholder="아이디를 입력하세요"><br>
<a>비번:</a><input type="password" name="pwd" placeholder="비밀번호를 입력하세요"><br>
이름:<input type="text" name="name" placeholder="이름을 입력하세요"><br>
연락처:<input type="text" name="phone" placeholder="연락처를 입력하세요"><br>
<input type="submit" value="회원가입">
<input type="reset" value="취소"><br>
</fieldset>
</form>
<hr>
<!-- 없는속성'text'와 href 속성도 속성선택자로 사용되는지 확인 -->
<p text="hello">안녕하세요</p>
<p text="red">빨간색입니다.</p>
<p><a href="http://naver.com">네이버</a></p>
<p><a href="http://icia.co.kr">인천일보아카데미</a></p>
</body>
</html>반응형
'Front-end > Css' 카테고리의 다른 글
| CSS 가상 선택자4(::first-line, ::first-letter, ::before, ::after) (0) | 2023.05.16 |
|---|---|
| CSS 가상 선택자3(:disabled, :checked) (0) | 2023.05.16 |
| CSS 가상 선택자2(:first-child, :last-child, :nth-child(2n+1)) (0) | 2023.05.16 |
| CSS 가상 선택자1(:link, :visited, :hover, :active, :focus) (0) | 2023.05.16 |
| CSS 적용(인라인, 내부, 외부 스타일시트) - CSS-day-01 (0) | 2023.05.04 |
