260908_CSS-ch13-14

ch13. CSS 고급 선택자

연결 선택자

• 둘 이상의 선택자 연결해서 스타일 적용
• descendant selector : 부모요소에 포함된 모든 하위요소에 적용됨 / 공백으로 구분
• child selector : 자식 요소에만 스타일 적용 / 부모요소 > 자식요소
• adjacent selector : 첫번째 동생 요소만 선택 / +
• sibling selector : 모든 형제 요소에 적용 / ~
• 부모 요소가 같으면 형제 관계라고 하고, 먼저 나오는 요소가 형 요소, 나중이 동생 요소

속성 선택자

• 태그 안의 속성값에 따라 요소 선택
• 요소[속성] ex. a[href] : 특정 속성이 있는 요소 모두 선택
• 요소[속성 = 속성값] : 특정 속성값이 있는 요소 모두 선택
• 요소[속성 ~= 속성값] : 여러 값 중 특정 속성값이 있는 요소 선택
• 요소[속성 |= 값] : 특정 속성값이 한단어로 일치하는 요소 선택
  - 지정한 값과 일치하는 값 외에도 하이픈- 으로 연결된 단어도 선택
  - div[id="us"] 라면 id가 "us-english"와 "us" 모두 선택됨
• 요소[속성 ^= 값] : 특정 속성값으로 시작하는 요소 선택
• 요소[속성 $= 값] : 특정 속성값으로 끝나는요소 선택
• 요소[속성 *= 값] : 일부 속성값이 일치하는 요소 선택

가상 클래스

• 사용자 동작
  - :link : 방문하지 않은 링크에 스타일 적용
  - :visited : 방문한 링크에 스타일 적용
  - :hover : 특정 요소에 마우스 올려놓으면 스타일 적용
  - :active : 웹 요소(링크나 이미지) 활성화했을때, 즉 클릭했을 때 스타일 적용
  - :link → :visited → :hover → :active : 이 순서로 스타일 적용해야 됨
  - :focus : 웹 요소에 focus 맞춰졌을 때 스타일 적용 (마우스 커서가 텍스트 필드 위에 올려두거나 tab 눌러서 커서 이동했을 때 등등)
• 요소 상태
  - :target
  - :enabled & :disabled
  - :checked
• 문서 구조
  - :first-child
  - :last-child
  - :only-child
  - :nth-child(숫자)
  - :nth-child(2n+1) : 홀수번째 자식만 적용됨
  - :nth-child(n+3) :세번째~마지막
  - :nth-child(-n+3) : 첫번째~세번째
  - :nth-child(n+3) 와 :nth-child(-n+3) 같이쓰면 중간에 겹치는 범위만 선택 가능
  - A:nth-of-type(숫자) : A요소 기준으로 지정한 위치의 자식 요소 택함 → div:nth-of-type(2) : div요소 중 2번째 요소 선택
• :not
• :is : 같은 스타일을 여러 요소에 적용 / ex. :is(h1, h2):hover { style... }
• A:has(B) : A 요소가 B요소 가지고 있으면 해당 스타일 적용
  - 예) nav:has(a:hover) a:not(:hover) : nav요소가 a:hover 를 가지고 있다면 :hover 선택자가 적용되지 않은 a 요소에 다음의 스타일 적용

가상 요소

• 가상 요소는 ::로 시작함. 가상 요소는 실제 내용에는 영향 주지 않고 ui 꾸며줄 때 사용함
• ::first-line , ::first-letter
• ::before , ::after : 내용 앞 뒤에 content 추가

CSS 함수 살펴보기

• :root : css 에서 변수 사용할 때 root 가상 클래스 많이 사용
  - 변수 앞에 반드시 하이픈 2개 -- 붙여야 함
  - var() 함수 괄포 안에 변수 이름 넣어서 사용

/* style 맨 위에 :root 가상 클래스 작성 */
:root {
	--bg-color: #222;
}

h1 { background-color: var(--bg-color); }

• calc() : 계산식으로 값 결정 / ex. calc(100% - 30px)
• min() / max()
• clamp(최소, 최적값, 최대) : 값의 범위 제한
• filter 속성과 함수 : blur, brightness, contrast, drop-shadow, grayscale, invert, sepia, opacity, hue-rotate, saturate

ch14. 트랜지션과 애니메이션

트랜스폼

• 트랜스폼: 물체의 크기나 형태의 위치 바꾸는 것 → 2차원 3차원 모두 가능
• transform: 트랜스폼 함수

p { transform: translate(50px, 10px); }

• translate() 함수: x축 y축, 혹은 z축으로 이동할 거리 지정하면 해당 크기만큼 이동함
• scale() : 요소를 지정한 크기만틈 확대하거나 축소. 값이 1보다 크면 확대됨
• rotate() : 요소 최전시킴. 2차원 3차원 모두 가능
  - perspective 속성 함꼐 사용하면 원근감 추가할 수 있음. 값은 0보다 커야하며 원래 있던 위치에서 사용자가 있는 쪽으로 얼마나 이동하는지를 픽셀 크기로 나타냄
  - perspective 속성은 3차원 트랜스폼에서 사용.
  - perspective 속성은 변형하는 요소의 부모 요소에 정해야 됨 → 부모요소 입장에서 원근감 추가하기 때문
• skew() : 요소를 비틂. 양쪽방향으로 비틀거나 한쪽으로 비틀거나 모두 가능

트랜지션

• transition : 시간에 따라 완전히 다른 스타일 속성으로 바뀌는 것
• transition-property : 트랜지션 대상 지정. default) all
• transition-duration : 진행 시간. 트랜지션 대상 속성 여러개면 시간도 여러개 가능.
• transition-timing-function : 속도 곡선 (ex. 처음 천천히, 마지막엔 빠르게 끝내기 등) default)ease
• transition-delay : 트랜지션 효과를 언제부터 시작할 것인지 설정. default) 0
• transition : 트랜지션 관련 속성 한꺼번에 정의

애니메이션

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #fa0;
    /* Do it! 2초 동안 애니메이션 실행하기 */
    /* animation-name: slideRight;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in; */
    animation: slideRight 2s infinite alternate ease-in;

  }

  /* Do it! @keyframes로 애니메이션 정의하기 */
  @keyframes slideRight {
    from {transform: translateX(0);}
    to {transform: translateX(500px);}
  }

</style>

• @keyframes : 애니메이션이 바뀌는 지점
• animation-delay
• animation-direction
• animation-duration
• animation-iteration-count : 애니메이션 반복 횟수
• animation-name : @keyframes로 설정한 애니메이션 지정함
• animation-timing-function : 키프레임의 전환 형태. 애니메이션의 속도 곡선
• animation : 속성 한꺼번에 묶어서 지정