CSS 2일차

CSS3

선택자

연결 선택자

• 하위 선택자 : 지정한 모든 하위 요소에 스타일 적용
  • section p { color: blue } ⇒ <section>(상위 요소) 안에 있는 모든 <p>(하위 요소) 요소의 글자색을 파란색으로 변경
  • 자식 요소, 손자 요소 모두 적용
• 자식 선택자 : 자식 요소에만 스타일 적용
  • section > p { color: blue } ⇒ <section>(부모 요소) 안에 포함된 <p> 요소 중 자식 <p>만 글자색을 파란색으로 변경
  • 부등호로 부모 요소와 자식 요소 구분
• 인접 형제 선택자 : 가장 가까운 형제 요소에만 스타일 적용
  • h1 + p { color: blue } ⇒ <h1> 첫번째 형제 요소 <p>의 글자색 파란색으로 변경
  • 요소1 과 요소2 사이에 + 표시
• 형제 선택자 : 모든 형제 요소에 스타일 적용
  • h1 ~ p { color: blue } ⇒ <h1> 이후 나오는 모든 형제 요소 <p>의 글자색 파란색으로 변경

속성 선택자

기본형	스타일 적용 경우	예시(선택자)	예시(적용되는 요소)
[속성]	지정한 속성일 때	[href]	<a href=”#”>메뉴 1</a>
[속성 = 값]	값이 일치할 때	[target=”_blank”]	<a href=”..” target=”_blank>HTML</a>
[속성 ~= 값]	여러 값 중 특정 값이 포함(단어)	[class~=”button”]	<a href=”#” class=”flat button”>메뉴 4</a>
[속성 |= 값]	값이 포함(하이픈 포함 단어)	[class |= “us”]	<a href=”#” title=”us”>영어</a><a href=”#” title=”us-english”>영어</a>
[속성 ^= 값]	값으로 시작	[title ^= “eng”]	<a href=”#” title=”english”>영어</a>
[속성 $= 값]	값으로 끝남	[href $= “xls”]	<a href=”intro.xls”>엑셀 파일</a>
[속성 *= 값]	값이 속성 값의 일부	[href *= “w3”]	<a href=”http://www.w3c.org/TR/html”>HTML 사이트</a>

가상 클래스 / 가상 요소

• 사용자 동작에 반응하는 가상 클래스
  • :link / :visited - 방문하지 않은 / 방문한 링크에 스타일 적용
    • 하이퍼링크
  • :hover - 마우스 커서를 올렸을 때
  • :active - 웹 요소 활성화했을 때
    • 마우스 클릭
  • :focus - 웹 요소에 초점이 맞춰졌을 때
• UI 요소 상태에 따른 가상 클래스
  • :enable / :disable - 사용할 수 있을 때 / 없을 때
  • :checked - 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때
• 구조 가상 클래스
  • :root - 문서 전체에 적용
  • :nth-child(n) / :nth-last-child(n) - 자식 요소의 위치에 따라 스타일 적용
    • 앞에서부터 몇 번째 / 뒤에서부터 몇 번째
    • 같은 레벨의 요소일 때만 사용 가능
  • :nth-of-type(n) / :nth-last-of-type(n) - 특정 태그 위치에 스타일 적용
    • <p> 태그나 <li> 태그가 여러개 나열되어 있고 id나 class를 쓰지 않았을 때 몇 번째에 있는 항목인지 지정
  • :first-child / :last-child - 첫 번째, 마지막 요소에 스타일 적용
  • :first-of-type / :last-of-type - 형제 관계 요소의 위치에 따라 스타일 적용
  • :only-child / :only-of-type - 하나뿐인 자식 요소에 스타일 적용
    • 자식 요소가 하나일때 / 해당 요소가 유일할 때
  • :target - 앵커 목적지에 스타일 적용
  • :not - 특정 요소가 아닐 때 스타일 적용
    • p:not(#ex) { color: blue } ⇒ #ex가 아닌 모든 p 요소에 스타일 적용
• 가상 요소
  • 내용의 일부만 선택해 스타일 적용
  • 클래스 이름 앞에 :: 붙여서 표시
  • ::first-line / ::first-letter - 첫 번째 줄 / 첫 번째 글자에 스타일 적용
    • 첫 번째 글자는 반드시 첫 번째 줄에 있어야 적용 가능
  • ::before / ::after - 내용의 앞뒤에 콘텐츠 추가

애니메이션

변형

• transform과 변형 함수
  • transform 속성에 변형 함수를 입력해서 사용
  • .photo { transform: translate(50px, 100px)

  • 2차원 변형함수

    변형 함수	설명
    translate(tx, ty)	지정한 크기만큼 x축과 y축으로 이동
    translateX(tx)	지정한 크기만큼 x축 이동
    translateY(yt)	지정한 크기만큼 y축 이동
    scale(sx, sy)	지정한 크기만큼 x축과 y축으로 확대 / 축소
    scaleX(sx)	x축으로 확대 / 축소
    scaleY(sy)	y축으로 확대 / 축소
    rotate(각도)	지정한 각도만큼 회전
    skew(ax, ay)	x축과 y축으로 왜곡
    skewX(ax)	x축으로 왜곡
    skewY(ay)	y축으로 왜곡

  • 3차원 변형함수

    변형 함수	설명
    matrix3d(n, [, n])	4X4 행렬을 이용해 이동과 확대/축소, 회전 등의 변화 지정
    translate3d(tx, ty, tz)	x축, y축, z축 이동
    translateZ(tz)	z축 이동
    scale3d(sx, sy, sz)	x축, y축, z축 확대 / 축소
    scaleZ(sz)	z축으로 확대 / 축소
    rotate3d(rx, ry, rz, 각도)	각도만큼 회전
    rotateX(각도)	각도만큼 x축 회전
    rotateY(각도)	각도만큼 y축 회전
    rotateZ(각도)	각도만큼 Z축 회전
    perspective(길이)	입체적으로 보일 수 있는 깊이 값 지정

• 변형 속성
  • transform-origin : 변형 기준점 설정
    • 특정 지점을 기준점으로 설정할 수 있음. 2차원 3차원 모두 사용
    • transform-origin: x축 y축 z축
    • x, y : 길이값, 백분율, left, center, right 사용
    • z : 길이값만 사용
  • perspective, perspective-origin - 원근감
    • perspective: 크기 : 3차원 변형에서 사용. 속성 값은 0보다 커야 하며 클수록 사용자로부터 멀어짐.
    • perspective-origin: x축, y축 : perspective와 함께 사용. x,y ⇒ 어디에 위치하는 지 지정, 길이 값, 백분율, left, right, center. 기본값 50%
  • transform-style - 3D 변형
    • transform-style: flat ⇒ 하위 요소를 평면으로 처리
    • transform-style: preserve-3d ⇒ 하위 요소들에 3D 효과 적용
  • backface-visibility - 요소 뒷면 표시(회전 시켰을 때)
    • ackface-visibility: visible ⇒ 뒷면 표시. 기본값
    • backface-visibility: hidden ⇒ 뒷면 표시 안함

트랜지션

• 시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것
• transition-property - 트랜지션 적용할 속성 지정
  • all : all 값을 사용하거나 transition-property를 생략하면 모든 속성이 트랜지션 대상
  • none : 변화 없음
  • 속성 이름 : 효과를 적용할 속성 지정
• transition-duration - 진행 시간 지정
  • 0 이면 실행 안됨 ⇒ 기본값 0, 음수는 0으로 간주
  • 시간 단위 : 초, 밀리초
  • 트랜지션 대상이 여러 개면 쉼표로 시간 구분해서 적용
  • 지정한 속성 값과 시간 값의 개수가 다르면 ⇒ 앞에서부터 반복 적용(e.g. 속성 값 4개, 시간 값 2개면 시간값이 2개 2개씩 적용)

• transition-timing-function - 속도 곡선 지정

  속성	설명
  linear	시작부터 끝까지 같은 속도로 진행
  ease	점점 빨라지다 천천히 끝냄. 기본값
  ease-in	시작 느리게
  ease-out	느리게 끝냄
  ease-in-out	느리게 시작하고 느리게 끝냄
  cubic-bezier(n,n,n,n)	배지에 함수를 직접 정의해서 사용. n에는 0 ~ 1

• transition-delay - 지연 시간 설정
  • 언제부터 시작할 것인지 설정
  • 초, 밀리초 사용. 기본값 0
• transition - 트랜지션 속성 한번에 표기
  • transition-property ⇒ transition-duration ⇒ transition-timing-finction ⇒ transition-delay 순으로 써야 함
  • 빠진 것이 있으면 기본값 적용

애니메이션

• 트랜지션과 비슷하지만 애니메이션은 시작해서 끝내는 동안 원하는 곳에서 스타일을 바꿔가며 실행 가능
• @keyframes - 애니메이션 지점 설정
  • 애니메이션의 시작, 끝, 상태가 바뀌는 곳 지정
  • 0% 50% 100% 지정 ⇒ 시작 중간 끝
  • 중간값 없으면 from to로 지정 가능
• animation-name - 이름 지정
• animation-duration - 실행 시간 설정
  • 기본값 0
  • 초, 밀리초 사용
• animation-direction - 방향 지정
  • normal : 애니메이션 끝까지 실행하면 원래 있던 위치로 돌아감. 기본값
  • alternate : 애니메이션 끝난 뒤 왔던 방향으로 돌아가면서 애니메이션 실행
• animation-iteration-count - 반복 횟수 지정
  • 숫자 : 숫자만큼 반복. 기본값 1
  • infinite : 무한 반복
• animation-timing-funciton - 애니메이션 속도 곡선 지정
  • 시작, 중간, 끝의 속도 지정
  • 트랜지션과 속성 값 같음
• animation - 애니메이션 속성 한번에 지정
  • 속성값 반드시 표기해야 함 ⇒ 기본값 0이기 때문에 실행 안됨.
  • 지정 순서 중요하지 않음