1.CSS 소개
•
HTML과 비슷하지만 HTML보다 더 활용가치가 있음
2.CSS 기본선택자
2-1 선택자란 무엇인가??
•
특정한 HTML 태그를 선택할때 사용하는 기능으로 , 태그를 선택하여 원하는 스타일과 기능을 적용할 수 있음
3 선택자의 종류 소개
•
모든선택자
1.HTML문서 안의 모든 태그를 선택할 때 모든선택자를
사용할 수 있다.
<ul>
<li>테스트1</li>
<li>테스트2</li>
<li>테스트3</li>
</ul>
HTML
복사
•
태그선택자
1.HTML문서내의 같은 태그를 모두선택할떄 사용한다.
2. p.{color:red;}와 같은 형태로사용
•
아이디 선택자
1.HTML 문서 내에 해당하는 아이디 속성 값을 가진
태그만 선택할 때 사용한다
2. #아이디명{color:red;}와 같은형태로 사용한다
<style>
#id2 {
background: yellow;
color: green;
}
</style>
<ol>
<li id="id1">아이디 선택자 테스트1</li>
<li id="id2">아이디 선택자 테스트2</li>
<li id="id3">아이디 선택자 테스트3</li>
<li id="id4">아이디 선택자 테스트4</li>
<li id="id5">아이디 선택자 테스트5</li>
</ol>
HTML
복사
•
클래스선택자
1.HTML 문서 내에 여러개의 태그를 동일한 클래스명으로 지정하여 선택할때 사용한다.
2. .클래스명{color : purple;}와 같은 형태로 사용한다.
<style>
/*클래스 선택자*/
.class1 {
color :purple;
}
.class2{
background : gray;
color : orangered;
}
</style>
<ul>
<li class="class1">클래스 선택자 테스트1</li>
<li class="class2">클래스 선택자 테스트2</li>
<li class="class3">클래스 선택자 테스트3</li>
<li class="class4">클래스 선택자 테스트4</li>
<li class="class5">클래스 선택자 테스트5</li>
</ul>
HTML
복사
•
추가적인 기본속성 선택자
1. 시작하는속성
div[name^=name] : name으로 설정된 name으로시작하는 선택자
2.~로 끝나는속성
div[class$=class] : class가 설정된 이름이class로 끝나는선택자
3.~를 포함하는 선택자
div[class*=div] : class의 설정된 이름에서 div가 포함된선택
4. 그 밖에 선택자
1.후손선택자와 자손선택자
•
자손선택자 : 바로 아래의 요소
•
후손 선택자 : 하위 요소 전부
1-1.자손선택자는 어떻게 사용하나?
•
선택자> 자손선택자{설정내용}의 형식
•
후손 선택자 : 선택자> 후손선택자 {설정내용}의 형식으로 사용
<div id="test1">
<h4>자손입니다</h4>
<h4>나도 자손입니다.</h4>
<ul id="testul">
<li>나는 ul태그이 자손이고 동시에 div태그에 후손입니다.</li>
<li>나도 ul태그이 자손이고 동시에 div태그에 후손입니다.</li>
</ul>
</div>
HTML
복사
2. 동위선택자란?
동위관계에서 태그를 선택할 때 사용
2.1 어떻게 사용할까?
바로 뒤의 요소를 선택 시 선택자a + 선택자b {설정내용} 으로 사용하며,
뒤에 있는 모두를 선택할 때는 선택자a ~ 선택자b {설정내용} 으로 사용된다.
3. 반응선택자란?
•
사용자의 움직임에 따라 달라지는 선택자
대표적으로 active와 hover가 있다.
•
active 표현방법은 선택자:active{설정내용}
•
hover 표현방법은 선택자 :hover{설정내용}
<style>
#active-test:active{
background: yellow;
color:red;
}
#hover-test:hover{
background: cyan;
color: black;
cursor: pointer;
}
</style>
<div id ="active-test">active 테스트</div>
<div id ="hover-test">hover 테스트</div>
HTML
복사
4. 상태선택자
•
입력양식의 상태에 따라 선택되는 선택자
•
설정할 때 높이와 너비를 줘서 체크될때 체크박스를 확대시킬수도 있다 . 아래코드가 그런방법이다
<style>
input[type=checkbox]:checked{
width:20px;
height:20px;
}
</style>
<pre>체크 상태의 input태그 선택 :input태그:checked {설정내용}</pre>
<input type="checkbox" id="apple" name="fruits" value="사과"><label for="apple">사과</label>
<input type="checkbox" id="banana" name="fruits" value="바나나"><label for="banana">바나나</label>
<input type="checkbox" id="orange" name="fruits" value="오렌지"><label for="orange">오렌지</label>
HTML
복사
5 초점이 맞추어진 input 태그선택
•
input type설정해주고 홈페이지를 열었을 떄 autofocus가 되어있으면 그 설정칸에 집중된다.
•
선택자:focus{설정내용} 으로 표현한다.
<style>
#userid:focus{
background: red;
}
</style>
<label>아이디 : </label><input type ="text" id="userid"
placeholder="아이디를 입력해주세요" autofocus></label><br>
HTML
복사
6. 사용가능한 선택자 enabled / 사용불가능한 선택자 disabled
•
사용 가능한 input 태그 선택 : input태그:enabled{설정내용},
•
사용 불가능한 input 태그 선택: input태그:disabled{설정내용}
<style>
option:disabled{
background: red;
color: white;
}
option:enabled{
background: yellowgreen;
}
</style>
<select>
<option value ="10" disabled> 10대</option>
<option value ="20"> 20대</option>
<option value ="30"> 30대</option>
<option value ="40"> 40대</option>
<option value ="50"> 50대</option>
<option value ="60"disabled> 60대</option>
</select>
HTML
복사
7. 형제 관계 선택자와 형제 관계 태그에서 수열번째 선택자를 설정하는법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 선택자</title>
<style>
/* 형제 관계 태그 중 첫 번째 태그 선택*/
#test1 *:first-child{
background: red;
color: white;
}
/* 형제 관계 태그 중 마지막 번 째 태그 선택*/
#test1 *:last-child{
background: orange;
color:white;
}
/*형제 관계 태그 중 앞에서 수열 번 쨰 태그선택*/
#test1 *:nth-child(2n){
background: yellowgreen;
color: darkblue;
}
/*형제 관계 태그 중 위에서 수열 번째 태그 선택*/
#test1 *:nth-last-child(2n){
background: skyblue;
color:violet;
}
/*test2 선택자태그에서 첫번쨰 위치에있는 태그선택*/
#test2 *:first-of-type{
background: red;
color:white;
}
/*test2 선택자태그에서 마지막 위치에있는 태그선택*/
#test2 *:last-of-type{
background: yellowgreen;
color: darkblue;
}
/*test2 선택자태그에서 수열번째 위치에있는 태그선택*/
#test2 *:nth-of-type(2n){
background: khaki;
color:darkcyan;
}
/*뒤에서 2번째*/
#test2 *:nth-last-of-type(2){
background: darkgoldenrod;
color: darkred;
}
/*test3 선택자태그에서 첫번 째 글자 크기를2배 해준다*/
#test3 p::first-letter{
font-size: 2em;
}
/*test3 p태그에서 첫번째 줄 만 해당*/
#test3 p::first-line{
background: cyan;
}
#test3 p::selection{
background: red;
color: white;
}
#test4 p:not(:nth-child(2n)){
background: orange;
}
</style>
</head>
<body>
<h2>일반 구조 선택자</h2>
<p>특정한 위치에 있는태그 선택(위치로 구분)</p>
<div id="test1">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
</div>
<hr>
<h2>형태 구조 선택지</h2>
<p>특정한 위치에 있는 태그를 선택(태그 별로 구분)</p>
<div id="test2">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
</div>
<h2>문자 선택자</h2>
<p>태그내부에서 특정 조건의 문자를 선택하는 선택자</p>
<div id="test3">
<p>아니한 든 이상은 노래하며 뛰노는 인간은 노년에게서 그들은 힘있다. 없으면, 못할 오아이스도 고동을 할지니, 인간이 심장은 얼음 같이 보라. 따뜻한 것은 튼튼하며, 인간은 풀이 생의 하였으며, 약동하다. 되는 피고 심장은 방황하여도, 고행을 우리는 만물은 붙잡아 풀이 것이다. 피부가 풀밭에 무엇을 인도하겠다는 품었기 위하여, 힘있다. 얼음과 꽃 곧 되는 피어나기 튼튼하며, 인류의 것은 것이다. 끓는 그와 하여도 것은 사라지지 길을 청춘을 안고, 운다. 지혜는 곳이 물방아 때문이다. 되는 오직 귀는 얼마나 끓는 시들어 그림자는 있는가? 그러므로 사랑의 그들은 거친 커다란 것은 보는 끓는다.</p>
</div>
<h2>부정선택자</h2>
<p>지금까지 선택자에 대해 반대로 적용하는 선택자</p>
<div id="test4">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
</div>
</body>
</html>
HTML
복사
9. 부정선택자
9-1 부정선택자란?
1. 지금까지 선택자에 대해 반대로 적용하는 선택자
2. 사용법은 #test4 p:not(:조건식){설정내용;}
3.선택자 우선순위
태그선택자 < 클래스선택자< 아이디선택자< 인라인스타일< !important 순서로 우선순위를 가진다
