TIL-44
css 가상선택자
:hover
- 태그:hover{}
- 마우스 커서를 대면 작동하는 선택자
.box {
weight: 100px;
height: 100px;
background: tomato;
transition: 0.5s;
}
.box:hover {
width: 200px;
}
:active
- 태그:active{}
- 마우스를 클릭시 작동되는 선택자
.box:active {
width: 200px;
backgound: red;
}
:focus
- 대화형 컨텐츠에서 사용가능 (input / img / tabindex)
- 태그:focus{}
- 마우스를 클릭시 바뀜
- 주로 input를 제어한다
input {
width:100px;
outline: none;
border: 1px solid lightgray;
padding: 5px 10px;
}
input:focus {
border-color: red;
width: 200px;
}
css에서 태그 뒤에 띄어쓰기 하면 후손 선택자 선택가능하다? (o/x)
- 가능하다. 태그적고 한칸띄우면 그 부모요소의 자식의 태그를 적으면 선택가능하다
.fruit li { }
:hover
.box {
weight: 100px;
height: 100px;
background: tomato;
transition: 0.5s;
}
.box:hover {
width: 200px;
}
:active
.box:active {
width: 200px;
backgound: red;
}
:focus
input {
width:100px;
outline: none;
border: 1px solid lightgray;
padding: 5px 10px;
}
input:focus {
border-color: red;
width: 200px;
}
css에서 태그 뒤에 띄어쓰기 하면 후손 선택자 선택가능하다? (o/x)
.fruit li { }
위와 같이 class에서 과일이라고 지정된 태그안에 li를 선택가능하다
또한 li 중에서 제일 첫번째 자식 or 마지막 자식 을 선택하고 싶으면
.fruit li:first-child -> 첫번째 대후손 선택가능
.fruit li:last-child -> 마지막 대후손 선택가능
가상클래스 선택자 : Nth-child
- 부모태그 자식태그:nth-child(n) {}
- n은 1부터 시작한다
- n*2이런 연산자로도 가능하다
.fruit li:nth-child(2) {}
동일한 타입의 요소 선택 : Nth Of Type
- 부모태그:nth-of-type(n) {}
*HTML
<div class="fruit">
<div>berry</div>
<p>apple</p>
<p>banana</p>
</div>
*CSS
.fruit p:nth-of-type(1) {}
::before , ::after -> css content:"" 짝궁
- ::before은 HTML 택스트(문자)앞에 css에서 추가 할 수 있다.
- ::after HTML택스트(문자)뒤에 css에서 추가 할 수 있다.
- 주의할점: 무조건 css의 선택자 안에 { content:""}는 함께 있어야한다
- 이미지 넣을 수 있다 content: url(주소)
**HTML**
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
**css**
ul li::before {
content: "";
width: 100px;
height: 10px;
backgound: red;
}
속성선택자 [attr]
- HTML에서 class로 따로 이름을 짓지 않고 속성을 바로 css 에서 선택할 수 있다.
- 주로 input type =""에서 많이 쓰인다
예를 들면
#HTML
<input type="text" value ="hello">
<input type="password" value="123>
<input type="text" value ="watermelon is the best"
watermelon>
#CSS
[type="password] {
width:100px;
} -> 타입이 하나만 존재할때
[watermelon] {
background: red;
} -> 타입이 여러게 존재할때 속성을 value 뒤에 적어준다.
상속(inherit)되는 속성들 (properties)
- 부모요소에서 css를 지정했을때 자식까지 영향을 미치는 것
- only 글자를 바꾸는 property 썻을때만 해당된다!!
ex) font 에 관한 것 - font-size
- font-weight
- font-style ....
- color
- text-align
- text-indent
- text-decoration ..
CSS의 우선순위 전체>태그>클레스>아이디
-점수 계산 잘 해라!
-
!important
모든 선언을 무시하고 가장 우선 -
인라인 선언 방식
-
아이디 #selector (100pt)
-
class selector (10pt)
-
tag =element (1px)
-
*(전체)
-
상속 inherit
Author And Source
이 문제에 관하여(TIL-44), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wlgus5977/D-44저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)