TIL(퍼블리싱)-5

publishing

CSS 가상 클래스 - 마우스 오버 이펙트(hover) & 트랜지션(transition)

마우스 올리면 :hover로 디자인이 변경되고 transition으로 디자인 변경 때 애니메이션 효과가 들어간다.

a {
	color:#000;
    transition:0.5s;
}
a:hover {
	color : dodgerblue;
    text-decoration:underline
}

이런식으로 a태그에 :hover를 붙여 마우스가 해당 요소에 올라올 때 css가 변경되도록 하고 transition으로 그 변경될 때 애니메이션이 붙도록 해준다.
transition은 기본 a태그에서 a:hover 태그로 변경되는데 0.5s(초)가 걸리도록 하라는 얘기이다

• a태그 사용할 때 <a href="">...</a> href속성을 비우면 당연히 a태그가 동작하지 않는데 #none를 입력해서 이건 동작은 하지만 일을 안한다 알려주면 좋다(특히 웹 디자인 시험을 본다면)

• 선택자:hover{...} 가상클래스는 선택자와 가상클래스 사이에 띄어쓰기 X

• transition은 반드시 :hover가 아닌곳에 넣자! 이유는 hover인 곳에 넣으면 마우스가 들어올 때만 동작을 하기에 마우스가 빠져나갈 땐 동작하지 않는다.
  만약 그 부분을 생각하고 한다면 넣어도 무방

순서를 만드는 CSS 가상클래스 (nth-child, nth-of-type)

자식요소의 CSS를 적용할 때 각 자식 별로 CSS가 다르다면 클래스 네임을 주거나 해야하는데 그렇지 않고 사용할 때 가상클래스를 이용해 선택한다.

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.box div:first-child {
	background-color: dodgerblue;
    }
.box div:last-child{
	background-color: orange; 
}
.box div:nth-child(2){
	background-color: red;
}

• 순서 가상클래스 중 대표적인 가상클래스는 선택자:nth-child(숫자){...}
• 이때 코딩 공부를 할 때와 다르게 index는 1부터 잡는다 1번째는 1

※직접 작업하다보면 중요한 부분!
nth-child는 div든 h2든 요소를 딱히 구분짓지 않기 때문에 nth-child로 막 작업하다가 중간에 요소를 하나 추가해야한다! 싶으면 이제 난리가 난다.
이는 그냥 어떤 요소든 출현 순서이기 때문이다.

• <태그>:nth-of-type() : 이녀석은 태그를 체크한다!

만약 div:nth-of-type(2){...}라고 입력한다면 이는 div중에서 2번째로 나오는 것이라고 체크를 하게 된다

first-child , last-child

이름과 똑같이 몇 개의 요소가 있든 상관 없이 가장 첫번째 요소를 first-child 마지막을 last-child라 한다

만든 코드는 github에서 확인 할 수 있는데 만들다가 생긴 문제점들을 나열하자면

• span 태그는 inline 태그이기 때문에 width값을 주기위해 inline-block을 주었다. 다만 이러니 게시판 태그가 둘이 확 붙어야 하는데 inline 특성상 알수없는 margin이 살짝 붙는다
  • 이미 flex라는 걸 알고있지만 그런걸 제외하고 해보자면 margin을 -값 만큼 붙여서 강제로 붙게 가능하다.
• .btn span:first-child 뜻은 btn클래스 태그 안에서 span중에 첫번째꺼라는 뜻이다. last-child는 그 반대. 또한 이미 지정되어 있기 때문에 nth-child처럼 () 안에 순서를 넣지 않아도 된다.