<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)file:///C:/Users/TJ/Desktop/EX.html -->
<html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>-</title>
<meta name="robots" content="noindex, nofollow">
<meta name="keywords" content="-">
<meta name="description" content="-">
<meta name="author" content="-">
<!-- 주석: crtl + / -->
<!-- 복사 붙여넣기 : ctrl + D -->
<!-- 원하는 영역만 주석: ctrl + shifte + / -->
<style type="text/css">
/* 클래스 선택자 */
p .text {background-color: orange;} /* .~클래스 이름 p안에있는 text 라는 클래스를 찾아서 스타일 적용*/
p span.text {background-color: green;} /* 특성도값이 높기 때문에 orange가 아닌 green이 적용됨 */
.text {color: blue;} /* 앞에 요소(태그이름) 없이 .클래스 이름만 써도됨 */
/* 아이디 선택자 css적용 */
p span#text1{background-color: yellow} /*특정도 값 = 102*/
p span#text2{background-color: gray} /*특정도 값 = 102*/
p span#text3{background-color: green} /*특정도 값 = 102*/
#text1{background-color: green} /*x특정도 값 = 100 임으로 적용 안됨*/
/* id 명은 스크립트에서도 공유됨으로 가급적으로 클래스로 작업하는 것이 좋음*/
.child li:first-child{background-color: yellow}/*펄스트차일드 7브라우저부터 크로스브라우징 가능*/
div > p{color:green} /*자식선택자: div 자식 p를 찾아서 그와 같은 구조에 css적용*/
h4 + p{background-color:pink} /* 인접 선택자: h4에 인접한 p태그로 구성된 구조에 css적용*/
a[target="_blank"]{background-color: green}/*속성성택자 : _blank 찾아서 css 적용*/
input[type="text"]{color:red} /*입력창 내 글자 색 바꿈쓰*/
div p{color:yellowgreen} /*하위 선택자: div 요소 안에 있는 모든 p태그안에 있는 건 모두 적용됨*/
h2, dt, dd {color:saddlebrown} /*선택자 그룹화: h2, dt, dd 찾아서 적용*/
/* 전체 선택자 */
/* * {color:blue} /*전체 선택자: 페이지 안에 모든 태그를 다 찾는다 */
div:after{content: "이후"; color:lightcoral} /*컨텐츠 이전에 스타일 적용*/
div:before{content: "이전"; color:lightcoral} /*컨텐츠 이후에 스타일 적용*/
</style>
</head>
<body>
<h2>(2020/03/12)</h2>
<h3>클래스 선택자</h3>
<!--특정도 순위 : 인라인스타일(1000점) >아이디선택자(100점) >클래스 선택자(10점) > 요소(html)(1점)-->
<h3>인라인스타일</h3>
<div style="color:red"> 요소(html)에 스타일을 직접 선언하는 방식으로 권장하지 않음</div>
<br />
<h3>내부 스타일</h3>
<div>head안에 스타일을 선언하는 방식</div>
<br />
<h3>외부 스타일</h3>
<div>css파일을 생성하고 link태그로 선언하는 방식</div>
<br />
<h3>클래스 선택자(class)</h3>
<p>클래스 선택자는 <span class="text">문서내에서 여러번 사용 가능</span>하고 요소와 클래스명을 구분 할 때는 <span class="text">점(.)</span>으로 구분하고 클래스명 앞에 오는 <span class="text">요소명은 생략가능</span>하다
</p>
<br/>
<h3>아이디 선택자(id)</h3>
<!--아이디 명은 모두 다르게 넣어야 한다.-->
<p>
아이디 선택자는 <span id="text1">문서내에서 한번만 사용 가능</span>하고 요소와 아이디명을 구분할 때는<span id="text2"> 파운드(#)</span>로 적용하고 아이디 명 앞에 오는 <span id="text3">요소 명은 생략 가능</span> 하다.
</p>
<h3>first-child</h3><!--펄스트차일드-->
<ul class="child" >
<li>첫번째 자식요소 입니다.</li>
<li>두번째 자식요소 입니다.</li>
<li>세번째 자식요소 입니다.</li>
</ul>
<br/>
<h3>자식선택자(>)</h3><!--인접한 요소에 css적용-->
<div>
<h4>div의 자식요소</h4>
<P>div의 자식요소 이므로 적용 가능</P>
</div>
<p>div의 형제 요소이므로 적용 불가</p>
<br/>
<h3>인접선택자 (+)</h3>
<!--내바로 옆에 잇는 애 찾기-->
<div>
<h4>인접한 요소</h4>
<p> h4에 인접한 p요소 이므로 적용 가능</p>
<p> p요소에 인접한 요소이므로 적용 불가능</p>
</div>
<br/>
<h3>속성 선택자[]</h3>
<a href="#" target="_blank" title="새창"> 이동합니다.</a><br/><!--인라인요소니까 한줄띠움-->
<!--"#"는 뭔가용? 현재 페이지를 새창으로 연다-->
<input type="text" name="username"/>
<h3>하위 선택자</h3>
<div>
<p>특정 요소안에 있는 모든 요소를 선택하여 스타일을 적용</p>
</div>
<h3>선택자 그룹화(,)</h3>
<div>
<h2>선택자 그룹화</h2>
<dl>
<dt>선택자 그룹화</dt>
<dd>여러 요소나 선택자에 같은 속성,값을 선언할 때 쉼표(,)로 구분하여 스타일 적용</dd>
</dl>
</div>
<h3>after / befor</h3>
<div>컨텐츠의 이전과 이후에 스타일을 적용, content속성은 필수 요소이다</div>
</body></html>
color.css
0.00MB
EX_class&id.html
0.01MB
