TIL-44

8064 단어 가상선택자CSSCSS

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 { } 

위와 같이 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의 우선순위 전체>태그>클레스>아이디

-점수 계산 잘 해라!

  1. !important
    모든 선언을 무시하고 가장 우선

  2. 인라인 선언 방식

  3. 아이디 #selector (100pt)

  4. class selector (10pt)

  5. tag =element (1px)

  6. *(전체)

  7. 상속 inherit

좋은 웹페이지 즐겨찾기