[CSS] css파일 link, 선택자(기본, 자손, 반응, 상태, 동위)

* css파일을 html파일에 link

 <link rel="stylesheet" type="text/css" href="파일 주소">

 

선택자 

 

종류	작성법	의미
기본 속성 선택자	선택자[속성="속성명"] { css 코드}	태그에 작성된 특정 속성을 선택
자손 선택자 ( > )	선택자 > 선택자 { css코드; }	지정된 요소의 바로 하위에 존재하는 요소를 선택
후손 선택자 (  (띄어쓰기))	선택자 선택자 { css 코드; }	지정된 요소의 모든 하위 요소를 선택
반응 선택자	사용자의 움직임에 따라 달라지는 선택자
	:active	사용자가 요소를 클릭하고 있는 경우
	:hover	사용자가 요소에 마우스를 올려두는 경우
상태선택자	입력 양식의 상태에 따라 선택되는 선택자
	:focus	초점이 맞춰진 상태에 따른 선택자
	:checked	체크 상태에 따른 선택자
	:enabled / :disabled	선택 또는 입력이 가능/불가능한 상태에 따른 선택자
동위 선택자	동위 관계(동일한 위치 == 형제 관계)에서 뒤에 위치한 요소를 선택하는 선택자
	A선택자 + B선택자{ css 코드; }	A 바로 뒤에 있는 B 요소 하나 선택 (+)
	A선택자 ~ B선택자{ css 코드; }	A 뒤에 있는 모든 B 요소 선택 (~)

 

 

기본 속성 선택자

(참고) 속성명 양쪽의 쌍따옴표("")는 홑따옴표('')로 작성되거나 생략도 가능하다.

/* div 태그 중 name 속성 값이 n1인 요소를 모두 선택 */
div[name="n1"] { background-color: rgb(252, 186, 162);}

/* class 속성 값이 cls1인 요소 중 
   name 속성 값이 n2인 요소를 모두 선택 */
.cls1[name="n2"]{ background-color: rgb(176, 176, 255);}

/* HTML 문서 내에 name 속성 값이 n2인 요소 모두 선택 */
[name="n2"] { color : rgba(206, 206, 0, 0.568); }

/* HTML 문서 내에 class 속성 값이 cls1인 요소 모두 선택 */
[class="cls1"] { font-size: 25px;}

<div name="n1" class="cls1"> div1 </div>
<div name="n1"> div2 </div>
<div name="n2"> div3 </div>
<div name="n2" class="cls1"> div4 </div>

---

자손, 후손 선택자

자손 : 바로 아래 자식 (아들, 딸)

후손 : 바로 아래 + 더 아래(아들, 딸, 손주, 증손주, ....)

/* 자손(자식) 선택자 */
/* 아이디가 test1인 요소의 자식 중 h4 태그 요소 선택 */
#test1 > h4 { background-color: orange; }

/* 아이디가 test1인 요소의 자식 중 ul태그 요소 선택  == #test2 */
#test1 > ul { background-color: #ccc; }

/* 아이디가 test1인 요소의 모든 자식 선택 */
#test1 > * { font-weight: bold;}

/* 후손 선택자 */
/* 아이디가 test1인 요소의 후손 중 li태그를 모두 선택*/
#test1 li{ font-style : italic; }

#test1 > ul > li{ color : rgb(23, 13, 116); }

<div id="test1">
        test1입니다.

        <h4>test1의 자손입니다.</h4>
        <h4>이 요소도 test1의 자손일까? yes</h4>

        <ul id="test2">
            이것도 test1의 자식?

            <li> list1 </li>
            <li> list2 </li>
        </ul>
</div>

---

반응 선택자

.div-cls{
    width : 200px; /* 폭 고정 크기 200px */
    height : 200px; /* 높이 고정 크기 200px */
    border : 1px solid black; /* 테두리 두께 1px, 실선, 검정색 */
    background-color: #ccc;

    cursor : pointer;
}


/* 클릭하고 있을 때만 반응하는 :active */
#div1:active  {
    background-color: gray;
    width: 195px;
    height: 195px;
}

/* 마우스 포인터가 올라 갔을 때 반응하는 :hover */
#div2:hover{
    background-color: rgb(255, 228, 105);
    width: 250px;
    height: 250px;

    transition-duration : 0.5s;
}

<div class="div-cls" id="div1">:active 테스트</div>
<div class="div-cls" id="div2">:hover 테스트</div>

---

상태 선택자

1) :focus

/* 입력 양식에 포커스가 맞춰 졌을 때 선택하는 :focus */
#text1:focus{ background-color: rgba(0, 0, 255, 0.1);}

 

<input type="text" id="text1">

rgba(0~255, 0~255, 0~255, 0~1) : rgb + 투명도 

2) :checked

/* input 태그 중 name 속성값이 fruits이 요소에 체크가 되었을 때 */
input[name="fruits"]:checked { 
    width: 30px;
    height: 30px;
 }

<input type="checkbox" name="fruits" checked> 사과 <br>
<input type="checkbox" name="fruits"> 딸기 <br>
<input type="checkbox" name="fruits"> 바나나 <br>

checkbox에는 크기를 제외한 스타일이 적용되지 않는다. 
ex) background-color

3) :enabled/ :disabled

/* 클래스가 input-cls인 요소 중에서 활성화된 요소만 선택 */
 .input-cls:enabled{ background-color: rgb(219, 250, 219);}
 
 /* 클래스가 input-cls인 요소 중에서 비활성화된 요소만 선택 */
 .input-cls:disabled{ background-color: rgb(255, 231, 234);}​

<input type="text" id="text2" disabled   value="user01">  <br>

활성화 : <input type="text" class="input-cls"> <br>
비활성화 : <input type="text" class="input-cls" disabled> <br>

---

동위 선택자

/* A 바로 뒤에 있는 B요소 선택 (+) */
#div-test1 + div{ background-color: springgreen;}
/* 바로 뒤 == 밀접한 요소(완전 딱, 진짜 바로 다음) */

/* A 뒤에 있는 모든 B요소 선택 (~) */
#div-test3 ~ div{ background-color: gold;}
/* 중간에 관련 없는 요소가 있으면 건너뜀 */

<div id="div-test1">1번 입니다.</div>
<div id="div-test2">2번 입니다.</div>
<div id="div-test3">3번 입니다.</div>
<div id="div-test4">4번 입니다.</div>
<p>관련 없는 태그입니다~</p>
<div id="div-test5">5번 입니다.</div>