7월 10일_CSS(선택자, 자식요소, 트래지션)

# CSS의 선택자 요소

요소 선택자	div	특정 HTML 요소를 선택합니다.
클래스 선택자	.classname	특정 클래스를 가진 요소를 선택합니다.
ID 선택자	#idname	특정 ID를 가진 요소를 선택합니다.
그룹화 선택자	h1, h2, h3	여러 요소를 한 번에 선택합니다.
전체 선택자	*	모든 요소를 선택합니다.

 

#자식요소 선택자

자식 선택자	div > p	특정 요소의 직계 자식 요소를 선택합니다.
하위(후손) 선택자	div p	특정 요소의 하위 요소를 모두 선택합니다.
인접 형제 선택자	div + p	특정 요소의 바로 다음에 위치한 형제 요소를 선택합니다.
일반 형제 선택자	div ~ p	특정 요소의 모든 형제 요소를 선택합니다.
속성 선택자	[type="text"]	특정 속성 값을 가진 요소를 선택합니다.
속성 존재 선택자	[required]	특정 속성이 존재하는 요소를 선택합니다.
속성 시작 선택자	[class^="btn"]	특정 속성 값으로 시작하는 요소를 선택합니다.
속성 종료 선택자	[class$="btn"]	특정 속성 값으로 끝나는 요소를 선택합니다.
속성 포함 선택자	[class*="btn"]	특정 속성 값을 포함하는 요소를 선택합니다.
부정 선택자	:not(.classname)	특정 선택자를 제외한 요소를 선택합니다.

 

첫 번째 자식 선택자	:first-child	첫 번째 자식 요소를 선택합니다.
마지막 자식 선택자	:last-child	마지막 자식 요소를 선택합니다.
N번째 자식 선택자	:nth-child(2)	N번째 자식 요소를 선택합니다.
첫 번째 요소 선택자	:first-of-type	첫 번째 해당 유형의 요소를 선택합니다.
마지막 요소 선택자	:last-of-type	마지막 해당 유형의 요소를 선택합니다.
N번째 요소 선택자	:nth-of-type(odd)	N번째 해당 유형의 요소를 선택합니다.
홀수번째 요소 선택자	nth-of-type(2n+1)	홀수번째 해당 유형의 요소를 선택
짝수번째 요소 선택자	nth-of-type(2n)	짝수번째 해당 유형의 요소를 선택

 

#기타요소 선택자

활성 선택자	:hover, :focus, :active	특정 상태에서 요소를 선택합니다.
체크된 상태 선택자	:checked	체크된 입력 요소를 선택합니다.
비활성 상태 선택자	:disabled	비활성화된 입력 요소를 선택합니다.

 

---

 

# 꼬리말 & 머리말 달기

    td.new::after {
      content: "NEW!!";
      font-size: x-small;
      padding: 2px 4px;
      margin: 0 10px;
      border-radius: 2px;
      background: #f00;
      color: #fff;
    }

 

.new::after 적용

td.new::before {
      content: "NEW!!";
      font-size: x-small;
      padding: 2px 4px;
      margin: 0 10px;
      border-radius: 2px;
      background: #f00;
      color: #fff;
    }

 

.new::before 적용

 

---

# 트랜지션 사용하기

 

위치 이동

#move-x:hover {
      transform: translateX(50px);
    }
#move-y:hover {
      transform: translatey(50px);
    }
#move-xy:hover {
      transform: translate(10px, 20px);
    }

 

크기 변화

#scale-x:hover {
      transform: scaleX(2);
    }
#scale-y:hover {
      transform: scaley(1.5);
    }
#scale-xy:hover {
      transform: scale(0.7);
    }

 

로테이션 - 이미지 사용
html>
<h1>로테이션- 이미지사용</h1>
    <div class="origin" id="rotate1">
      <img src="image/dog.jpg" alt="강아지">
    </div>
    <div class="origin" id="rotate2">
    </div>

style>
	#rotate1:hover {
      transform: rotate(-45deg);
    }
    #rotate2 {
      background: url('image/dog.jpg') no-repeat;
      background-size: cover;
    }
    #rotate2:hover {
      transform: rotate(45deg);
    }
    
로테이션
	#rotatex:hover {
      transform: rotateX(50deg);
    }
    #rotatey:hover {
      transform: rotatey(40deg);
    }
    #rotatez:hover {
      transform: rotatez(90deg);
    }
    #rotatexyz:hover {
      transform: rotate3d(8, 1.5, -1.5, 60deg);
    }

 

비틀기

	#skewx:hover {
      transform: skewX(30deg);
    }
    #skewy:hover {
      transform: skewy(45deg);
    }
    #skewxy:hover {
      transform: skew(-30deg, 15deg);
    }