CSS 필수 가상클래스

hover, transition

• 선택자:hover
  선택자의 호버상태를 나타내는 가상태그이다. 띄어쓰기는 절대 포함시키지 말 것!
  예를 들어 a태그의 호버 가상태그는 a:hover 이런 식으로 쓰면 된다.

• trasition
  변형 시간을 설정할 수 있다. transition: 0.5s; 이런 식으로 쓴다.
  hover 태그와 같이 쓰곤하는데, hover태그 안에 넣으면 호버 모드로 전환될 때만 적용되고 다시 디폴트로 돌아갈 땐 적용이 안되므로 가상클래스가 아니라 원래 (디폴트)태그에 넣어야 한다.

예제 만들기

예제만 보고 나 혼자 만들기 도전해봤는데, 강의 오랜만에 들은 것 치고 display: inline-block 도 잘 적용하고 사이즈도 잘 조절했다고 생각했다. 그런데 텍스트가 가로 가운데는 적용을 했는데, 세로 가운데는 도무지 적용이 안되는거다. 알고보니 박스 높이가 텍스트에 맞춰 알아서 조절이 되므로 padding 값만 주면 되는걸(display: inline-block;이니까), 굳이 height값 주고 낑낑대고 있었음...

순서를 만드는 가상 클래스 Ⅰ

순서를 만드는 가상 클래스는 class name이 없는 태그도 구분하여 속성을 부여할 수 있다. class name이 없기 때문에 html 코드가 훨씬 깔끔해지고 css에서도 더 편하게 관리할 수 있다.

• nth-child(n) 선택자:nth-child(n)
  말 그대로 'n번째 자식요소'를 가리킨다. 태그 종류에 상관없이 순서만 따진다.
  

하지만 중간에 태그가 추가되거나 빠지거나 하면 순서가 꼬여버릴 수 있다. 그럴 땐 태그 종류도 순서 고려 대상에 포함시켜주면 되는데

• nth-of-type(n) 선택자:nth-of-type(n)
  예를 들어 div:nth-of-type이라고 썼을 때 div중에 n번째 것을 선택하는 것이다. 그러니 그 앞에 div외 다른 태그들은 아무리 추가해도 코드가 꼬이지 않는다. div 앞에 h2를 추가했지만 배경색이 제대로 들어가있다.

순서를 만드는 가상 클래스 Ⅱ

종류 상관 없이 가장 첫번째와 마지막 요소를 선택하는 클래스다.

• first-child
  첫번째 자식 요소
• last-child
  마지막 자식 요소
  리스트안의 구분선으로 a에 border-bottom을 넣어주는데, 가장 마지막 a에는 필요가 없다. 이럴 때 last-child를 쓰면 마지막이든 중간이든 a가 더 추가되더라도 리스트 디자인에는 영향이 없다.

메모

• a태그를 쓸 때 ""안을 비워두면 작동하지 않는다. #이나 #none이라도 넣어줘야함.
• a태그 요소는 커서를 올리면 포인터 모양으로 변하게 된다. 그 외의 다른 태그를 이와 같이 만들어주려면(예를 들어 버튼) CSS에서 cursor: pointer 를 넣어주면 된다.