07. 인접 선택자 & 직계 자손 선택자 두 선택자는 꼭 알아둬야하지만 앞에서 배운 요소 선택자, ID 선택자, 클래스 선택자보다는 자주 쓰이진 않는다. 인접 선택자( = 결합자) 두 선택자 사이에 '+' 기호를 써서 표기하는데, h1 + p { color: red; } 처럼 쓴다면, h1 바로 다음에 오는 p를 선택하라는 의미이다. (실제로 선택되는 것은 + 뒤에 나오는 선택자인 것!) 그리고 +로 연결된 두 선택자 간의 관계는 '부모-자식'관계가 아니라 '형제'관계이다. 직계 자손 선택자 두 선택자 사이에 '>' 기호를 써서 표기한다. 인접 선택자에서 '형제' 관계였던 것과 달리 '부모-자식' 관계이다. div > nav { color: white; } 위와 같이 쓰면 의 바로 안에 쓰인 에 그 스타..

transition과 animation을 다루었던 이번 단원 마무리 문제 2가지. 문제 1. 책에서 제공된 코드를 따라 써보는데 반복되는 부분이 있길래 예전에(?) Udemy 강의에서 배운 Emmet을 활용해봤다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 ↓ 문제에서 제시된 위의 코드에 ① 트랜지션 진행 시간을 0.5초로 지정. ② 트랜지션 대상은 all로 지정. (default값이니 안 써도 OK.) ③ 트랜지션 함수는 ease-in으로 지정. 을 적용하는 것이 미션이다. ↓ 영상이 너무 짧아서 사실 위의 제시된 문제와 큰 차이를 못 느끼겠다🤣 문제 2. ↓ 위의 코드에 ① Y축을 기준으로 360° 회전. ② 입체감이 느껴지도록 perspective 속성 200px로 지정. ③ 변형 함수 rotate..

CSS 애니메이션 사용하면 자바스크립트를 사용하지 않고도 요소에 애니메이션을 추가할 수 있다..!!! animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만든다. 그렇게 스타일이 바뀌는 바로 그 지점이 keyframe키프레임이다. ▼ animation 관련 속성 요약 종류 설명 @keyframes 애니메이션이 바뀌는 지점 지정. animation-name 복수의 애니메이션을 구별하기 위한 이름 설정. animation-duration 애니메이션의 실행 시간 지정. animation-delay 애니메이션의 시작 시간 지연을 지정. animation-direction 애니메이션이 끝난 다음, 다시 실행할 때 처음과 같은 방향으로 시작할지, 역방향으로 시작할지 지정. animation-ite..

transition: 변화, 전환 웹 요소의 배경색이나 스타일 속성이 시간에 따라 바뀌는 것. 위의 영상에서처럼 transition을 사용하면 완전히 색, 모양, 테두리 등을 바꿀 수 있다. 트랜지션transition의 속성 요약 종류 설명 transition-property 트랜지션의 대상 지정. transition-duration 트랜지션을 실행할 시간 지정. transition-timing-function 트랜지션의 실행 형태 지정. transition-delay 트랜지션의 지연 시간 지정. transition 위의 모든 속성을 한꺼번에 정함. 트랜지션 대상 지정: transition-property 어떤 속성에 트랜지션을 적용할 것인지 지정한다. transition-property: all | n..

이번 섹션에 포함된 강의명은 다음과 같다. (강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!) 순서 강의명 소요 시간 중요도 (필수crucial/중요important/선택nice to have) 01 전체 선택자 & 요소 선택자 Universal & Element Selectors 4' 57" 필수 02 ID 선택자 The ID Selector 5' 24" 필수 03 클래스 선택자 The Class Selector 4' 43" 필수 04 코딩 연습 9: Basic Selectors Practice Coding Practice 9: Basic Selectors Practice - - 05 자손 선택자 The Descendant Select..